[英]Angular 6 lazy loading problem with routes
I want use lazy loading in your app. 我想在您的应用中使用延迟加载。 A have 2 modules: login and cars. 一个有2个模块:登录和汽车。 Lazy loading is working fine, but route /add-car not working. 延迟加载工作正常,但路由/ add-car不起作用。 Why? 为什么? Path /add-car is not found and redirect to PageNotFoundComponent. 找不到路径/ add-car,并将其重定向到PageNotFoundComponent。
app.routing.module.ts app.routing.module.ts
const appRoutes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'login'
},
{
path: 'cars',
canLoad: [AuthCanLoadGuard],
loadChildren: './cars/cars.module#CarsModule',
},
{
path: 'user-account',
component: UserAccountComponent,
canActivate: [AuthGuardsService]
},
{
path: '**',
component: PageNotFoundComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes, {enableTracing: true})],
exports: [RouterModule]
})
cars.routing.module.ts cars.routing.module.ts
const carsRoutes: Routes = [
{
path: '',
component: CarsComponent,
children: [
{
path: '',
component: CarsListComponent,
resolve: { cars : CarsListResolve } // przeniesione z app.routing.module.ts
},
{
path: ':id',
component: CarsDetailsComponent,
canDeactivate: [FormCanDeactivateGuard],
resolve: { car: CarResolve }
}
]
},
{
path: '/add-car',
component: AddCarComponent,
}
];
@NgModule({
imports: [RouterModule.forChild(carsRoutes)],
exports: [RouterModule]
})
Path cannot start with a slash. 路径不能以斜线开头。 Adjust /add-car
to add-car
: 将/add-car
调整为add-car
:
{
path: 'add-car',
component: AddCarComponent,
}
And, as mentioned in the answer above, you'll also need the /cars
context. 并且,如上面的答案中所述,您还需要/cars
上下文。 As add-car
is a child, it is only available under /cars
, so path you'd use is in the browser is /cars/add-cars
由于add-car
是孩子,因此只能在/cars
下使用,因此在浏览器中使用的路径是/cars/add-cars
You should be redirecting to cars/add-car
since add-car is the part of cars.routing.module.ts
; 您应该重定向到cars/add-car
因为add-car是cars.routing.module.ts
的一部分; Also when you route, make sure to use { relativeTo: this.route }
. 另外,在路由时,请确保使用{ relativeTo: this.route }
。 Ex: this.router.navigate(['../add-car'], { relativeTo: this.route });
例如: this.router.navigate(['../add-car'], { relativeTo: this.route });
If I can get /car-add path I should add this path in app.routing.module.ts? 如果我可以得到/ car-add路径,我应该在app.routing.module.ts中添加此路径吗? It will be correct add addCarComponent outside cars module? 在汽车模块外添加addCarComponent会正确吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.