在使用angular的模块懒加载的时候,一级路由是没问题的,都可以访问,但是使用二级路由,即子路由的时候报错或者没反应。
这个坑可真是大而深呀。
报错如下:
研究了很久,浪费了很多时间。刚开始确实想着一级模块路由和子模块路由配置应该是一样的。就将子模块路由的配置和一级路由模块懒加载的配置一样。但是事与愿违。刚开始第一个子模块路由懒加载出来,但是后面的又不出来了。折腾到了大晚上,还是搞不定。
重新建了个项目,还是按照自定义模块路由懒加载的方式配置的。但是一级路由是没有问题的,子模块路由还是不出来并且报错。
注意两点:
- 添加了子路由模块懒加载之后服务要重启
- 配置子路由模块的路径大小写问题,避免浏览器自动转换
angular路由懒加载正确配置姿势
一级路由:
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'login',
loadChildren: './views/login/login.module#LoginModule'
},
{
path: 'home',
loadChildren: './views/home/home.module#HomeModule'
},
{
path: '', redirectTo: '/login', pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
login-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
const routes: Routes = [
{
path: '',
component: LoginComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginRoutingModule { }
子路由
home-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: 'orderManage',
loadChildren: '../order-manage/order-manage.module#OrderManageModule'
},
{
path: 'productordercreate', // 重启服务
loadChildren: '../product-order/product-order-create/product-order-create.module#ProductOrderCreateModule'
},
{
path: 'productordermanage',
loadChildren: '../product-order/product-order-manage/product-order-manage.module#ProductOrderManageModule'
},
{
path: 'sendordercreat',
loadChildren: '../send-order/send-order-create/send-order-create.module#SendOrderCreateModule'
},
{
path: 'sendOrderManage',
loadChildren: '../send-order/send-order-manage/send-order-manage.module#SendOrderManageModule'
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }