I am a beginner of Angular2. When I am learning angular2 routing service from https://angular.io/tutorial/toh-pt5. I want to have herocomponent always displayed so I in the app.component.html like this:
<h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/heroes">Heroes</a>
<a routerLink="/dummy">Dummy</a>
</nav>
<app-heroes></app-heroes>
<router-outlet></router-outlet>
<app-messages></app-messages>
And here is the app-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import {DummyComponentComponent} from './dummy-component/dummy-component.component';
const routes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent },
{path: 'dummy',component:DummyComponentComponent}
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Strangely, when I click a hero on /dashboard or /heroes page it can direct to the correct URL and show the correct hero detail.
However, when I am on /detail/{{hero.id}} and click the hero on the hero component it can redirect the URL but the content in doesn't update. Can someone please help me with this?
if below is not issue then it should be issue that you are just changing parameter url that is reason its not updating
//put this code in your hero.component.ts file
ngOnInit() {
this.route.params.subscribe((params) => {
this.id = +params['id'];
this.loadComponentAgain();
});
}
above code monitor change in param value and update your component according to it.
There is issue because of this html
<app-heroes></app-heroes>
<router-outlet></router-outlet>
you are loading app-heroes component out side router-outlet, it should be loaded under router-outlet, so you should do this
<!-- <app-heroes></app-heroes> remove this-->
<router-outlet></router-outlet>
For changing a route with dynamic value you need to set your routerLink like this
[routerLink]="['/detail',hero.id]"
Related
My root component is loading twice even though I have a separate component for my homepage. I have tried to use different things, such as pathMatch, separate component, etc, but no luck. When I go to /dashboard, it works just fine, but when it loads the page initially (root page), the navbar is loaded twice. I want to avoid that.+
My code looks like this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { NavbarComponent } from './navbar/navbar.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { RouterModule, Routes } from '#angular/router';
import { RootComponent } from './root/root.component';
import { FeatureDashboardComponent } from '#angular/dashboard';
import { FeatureHomepageComponent } from '#angular/homepage';
const routes: Routes = [
{
path: '',
component: RootComponent,
pathMatch: 'full',
children: [
{
path: '',
component: FeatureHomepageComponent
}
]
},
{
path: 'dashboard',
component: FeatureDashboardComponent
},
{
path: '**',
redirectTo: ''
}
];
#NgModule({
declarations: [
NavbarComponent,
RootComponent
],
imports: [
BrowserModule,
NgbModule,
RouterModule.forRoot(routes)],
providers: [],
bootstrap: [RootComponent],
})
export class AppModule {}
And my HTML for RootComponent is:
<angular-navbar></angular-navbar>
<div class="layout">
<router-outlet></router-outlet>
</div>
And navbar is:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand">My App</a>
</div>
</nav>
Example in inspect
I think the problem might be that you have the route '' loading the RootComponent and the children route tries to load FeatureHomepageComponent but is also '', which can't be effectively resolved by the router.
Try giving the children route a path that is not empty, like this:
...
{
path: '',
component: RootComponent,
pathMatch: 'full',
children: [
{
path: 'home',
component: FeatureHomepageComponent
}
]
},
...
And play with the redirect at the end, so when your application loads, it should navigate to (for example) localhost:4200/home
I think the problem is with this code:
path: '',
component: RootComponent,
you most likely do NOT want to have your RootComponent here as it would allow the RootComponent to appear within your
<router-outlet>
and could explain why you have 2 of them.
<router-outlet>
should only route to CHILDREN of your RootComponent.
In other words, no route (in your routing config) should render your RootComponent it's already being rendered. The routes there should only render what you want to display WITHIN your router-outlet, aka CHILDREN of your RootComponent
For the solution I think you just have to make this:
path: '',
component: FeatureHomepageComponent
the first path in your config (delete the RootComponet part and the children:[] part)
Instead of calling the router-outlet try to call to the exact component name
This means you have either of two: another <router-outlet></router-outlet> instance or you are instantiating the <angular-navbar></angular-navbar> in another template other than the one you show here. pathMatch has nothing to do here because the <angular-navbar></angular-navbar> component is route agnostic, meaning it is a layout component.
I have two pages, home and player, and i want on the home page to nabvigate to the player page but without being with this format home/player
When i use routerLink="player", it got an error because the link goes to home/player, instead of just player. How can i make that happen?
app-routing module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {AddPlayerComponent} from './pages/add-player/add-player.component';
import {RouterModule, Routes} from '#angular/router';
import {HomeComponent} from './pages/home/home.component';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'Player', component: AddPlayerComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
Try routerLink = "/Player. Notice how in your defined routing module the "Player" is capitalized, as well as the missing "/" in routerLink. See https://angular.io/api/router/RouterLink for more clarification
Try Adding <base href="/"> code in head of index.html page and correct the code to routerLink="/Player".
Hi for me parent routing is working fine, but for chid routes it is not redirecting and not getting errors also
in app.routing
const routes: Routes = [
{
path: 'card',
loadChildren: './cards/cards.module#CardsModule',
canActivate: [AuthGuard]
},
{
path: 'card/:id',
loadChildren: './cards/cards.module#CardsModule',
canActivate: [AuthGuard]
}]
in card-routing:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { Cardscomponent } from './cards.component';
import { AuthGuard } from '../_services/auth.guard';
import { CardDetailsComponent } from './card-details/card-details.component';
const routes: Routes = [
{ path: '', component: Cardscomponent,
children :[
{ path: ':id', component: CardDetailsComponent}
]
}
]
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CardsRoutingModule { }
localhost:4200/card is working
but localhost:4200/card/1234 is not working and not getting any error also, any help...
Check whether you have router-outlet in child component.
When the url updated but view not rendered, it usually comes down to missing router-outlet.
Learned that from developing a entire project with angular elements.
If you enable tracing, you can see all the router events are triggered successfully.
I am trying to create a static website using angular 5,i am using owl carousel as image slider.I have implemented routing, after clicking on home menu slider not showing, only showing when page are loading for first time.
Below is my code
navigation.component.html
<div class="mainmenu text-center floatleft">
<nav>
<ul>
<li><a routerLink="/home" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active">Home</a>
</li>
<li><a routerLink="/about" routerLinkActive="active">about</a></li>
<li>
<a routerLink="/contact" routerLinkActive="active">contact</a>
</li>
</ul>
</nav>
</div>
below is my
app-routing.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common'
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HomesliderComponent } from './homeslider/homeslider.component';
import { FooterComponent } from './footer/footer.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
// { path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
// { path: '**', redirectTo: '/home', pathMatch: 'full' }
];
#NgModule({
imports: [CommonModule, RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [HomeComponent, AboutComponent, ContactComponent, NavigationComponent, HomesliderComponent, FooterComponent];
Apart from this i have included owl-caurousel code on home-component.html page,i haven't used owl-caurousel npm
included all supporting css and js files in angular-cli.json
"styles": [
"styles.css",
"assets/owl-carousel/owl.carousel.css",
"assets/owl-carousel/owl.theme.css",
"assets/owl-carousel/owl.transitions.css",
"assets/template/tabcontent.css",
"assets/threeDslider/css/threeDstyles.css"
],
"scripts": [
"assets/owl-carousel/owl.carousel.js",
"assets/owl-carousel/slider.js",
"assets/threeDslider/js/modernizr.custom.53451.js"
],
Please suggest me any solution, any tutorial on creating a static website using angular 5 or some thing like this also will be helpful
already googled and finally posting here
Any help appreciated
Thanks
Currently I'm new to Angular. I was learning routing topic but seems to stuck at a point where I want to load new route in main route. My app.module looks like
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import {HttpModule} from '#angular/http';
import {RouterModule, Routes} from '#angular/router';
// COMPONENTS
import {AppProduct} from './product.compnent';
import {AppFamily} from './family.component';
const appRoutes: Routes = [
{path: 'Family', component: AppFamily},
{path: 'Product', component: AppProduct}
]
#NgModule({
imports: [ BrowserModule, HttpModule, RouterModule.forRoot(appRoutes)],
declarations: [ AppComponent, AppFamily, AppProduct],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component
import { Component } from '#angular/core';
import {IProducts} from './IProduct';
import {ProductService} from './products.service'
// FAMILY IMPORTS
import {IFamily} from './IFamily'
import {familyService} from './family.service'
#Component({
selector: 'hello-world-app',
templateUrl: "app/app.component.html",
providers: [ProductService, familyService]
})
export class AppComponent {
iproducts: IProducts[];
familyMembers: IFamily[];
constructor(
private _product: ProductService,
private _family: familyService){
}
ngOnInit():void{
this._family.getAllFamilyMembers()
.subscribe(_successLog => {
this.familyMembers = _successLog;
})
}
}
app.component.html
<ul>
<li>
<a [routerLink]="['/Product']">
Product
</a>
</li>
<li>
<a [routerLink]="['/Family']">
Family
</a>
</li>
</ul>
<router-outlet>
</router-outlet>
Now when I serve my server all goes good except for my /Product and /Family route is loaded in <router-outlet></router-outlet> but I don't want navigation menu to appear when I visit /Product in other words I want that my route should load in parent route no child routing.
Any help would be appreciated !
You should define your children module in your appRoutes constant as this:
{ path: '/childPath',
component: ChildComponent,
children: [
{path: 'about',
loadChildren: './path/to/children.module#ModuleName'}
]
}
The answer by Mr. Deer is correct for lazy loading - however, you don't always want to do that. If you want to just have child components, you should do:
{ path: '/childPath',
component: ChildComponent,
children: [
{path: 'about',
component: SecondChildComponent
]
}
That said, lazy loading is generally preferred.