I am creating a very simple Angular 2.4 application and no matter what I try I cannot get a Module to lazy load. Is it at all possible please?
export const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'schedule', loadChildren: 'app/schedule/schedule.module.ts#ScheduleModule' },
{ path: 'plant', loadChildren: 'app/plant/plant.module.ts#PlantModule' }
];
Related
This may seems as a silly question but I can't understand this routing
routes.ts:
const APP_ROUTES: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'articles', component: ArticulosComponent },
{ path: 'article/:id', component: ArticuloComponent },
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: '**', pathMatch: 'full', redirectTo: 'notfound' }
];
When access to localhost:4200/article/6 the router redirects to localhost:4200/#/home but when manually wrote localhost:4200/#/article/6 works fine.
First, note # symbol, why is it there and what different does it cause? And... I specify 'manually' because even through code adding the # symbol to the path (ex. ) keeps redirecting to home
The main question/problem is "Which would be the correct link or rule in other to load the correct component?"
You can remove # from route changing value of useHash in app.module.ts
RouterModule.forRoot(ROUTES, { useHash: false }),
You can add pathMatch: 'full' with home and articles routes
I have appRoutes in my Angular 2 app
const appRoutes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{
path: 'component-two', component: AppComponent2,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
]
},
];
How I can redirect from my LoginComponent to HomeComponent?
const appRoutes: Routes = [
{
path: '',
component: LoginComponent,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
]
}
];
You have to do this.
you should use redirectTo for default redirect
const appRoutes: Routes = [
{ path: '/login', component: LoginComponent },
{ path: '/home', component: LoginComponent },
{ path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
from Html you can redirect like
<nav>
<a routerLink="/login" routerLinkActive="active">Login</a>
<a routerLink="/home" routerLinkActive="active">Home</a>
</nav>
inject Router to your HomeComponent's constructor
constructor(
private router: Router,
private service: HeroService
) {}
Then use this.router.navigate(['/login']); in your event function
for more details refer angular guide
My router code is as below. When I am trying to access intro page in DashboardComponent,
it loads intro component but comes back to dashboard, what am I doing wrong?
{ path: '', component: HomeComponent, //home component
children: [
{ path: 'dashboard', component: DashboardComponent } // first child
{ path: 'main', component: ClientComponent, //2nd child
children: [
{ path:'intro', component:ClientsComponent, outlet:intro',
children: [ // grand children
{ path: '', redirectTo: 'list', pathMatch: 'full' },
{ path: 'list', component: ListComponent},
]
},
]}
}
I tried with both navigate and navigateByUrl, none seems to work:
router.navigate(['../main', {outlets: {'intro': ['intro']}}], {relativeTo: this.activatedRoute})
OR
router.navigateByUrl('main/(intro:intro/list)');
I have the following configuration for my Angular2 routes...
RouterModule.forRoot([
{
path: '',
// redirectTo: '/admin',
component: LoginComponent,
pathMatch: 'full'
},
{
path: "admin",
component: ContentComponent,
children: [
{
path:"admin",
component: HeaderComponent,
outlet: 'header'
},
{
path:"admin",
component: LeftNavComponent,
outlet: 'header'
},
{
path:"admin",
component: AdminComponent,
outlet: 'body'
}
]
}
])
This works good but I don't really need a path for the children and the navigation (["/admin", {outlets: {"header":["admin"], "body":["admin"], "leftNav":["admin"]}}];) and the url (#/admin/(header:admin//body:admin//leftNav:admin)) are really long. Since I can infer the children is there a way I can leave them out?
When I upgraded from #angular/router v3.1.2 to v3.2.0 it started working as I would expect.
Structure
app |- admin
|- users
|- userList.Component.ts
|- userDetails.Component.ts
|- admin.component.html (contains 'router-oulet')
|- admin.component.ts
|- admin.routes.ts
|- admin.module.ts
|- dogs
|- app.component.html (contains 'router-oulet')
|- app.component.ts
|- app.routes.ts
|- app.module.ts
app.routes.ts
const appRoutes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'dogs', component: DogListComponent, canActivate: [AuthGuard] },
{ path: 'dog/:id', component: DogDetailsComponent, canActivate: [AuthGuard]},
];
export const routing = RouterModule.forRoot(appRoutes);
admin.routes.ts
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AdminGuard],
children: [
{ path: '', redirectTo: '/admin/users' },
{ path: 'users', component: AdminUserListComponent },
{ path: 'user/:id', component: AdminUserDetailsComponent },
]
},
];
export const adminRouting = RouterModule.forChild(adminRoutes);
admin.userList.Component.ts
this._router.navigate(['/admin/user/', id]);
trying to navigate from AdminUserList ('admin/users') to AdminUserDetails ('admin/user/someId') but with no success.
(it seems like the scroller is going further down whenever i try to navigate to the user details)
any solution ?
you need to add pathMatch: 'full' in admin routes for default redirect,
admin.routes.ts
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AdminGuard],
children: [
{ path: '', redirectTo: '/admin/users', pathMatch: 'full' },
{ path: 'users', component: AdminUserListComponent },
{ path: 'user/:id', component: AdminUserDetailsComponent },
]
},
];
export const adminRouting = RouterModule.forChild(adminRoutes);
Update
To navigate back you have couple of ways,
// In the HTML
<a [routerLink]="['/admin']" >Back</a> or <a [routerLink]="['/admin/users']" >Back</a>
// Or create a back function and use in click binding in HTML
goBack = () => {
this.router.navigate(['/admin']);
or this.router.navigate(['/admin/users']);
}