angular-ui-router - 为什么延迟加载不适用于子模块?
问题描述
我有一个小问题,我尝试为延迟加载 Angular CLI 8 自定义我的路由器,如果我尝试将 loadChildren 放在子模块上,我会遇到一些错误。app.routing.ts
import { CommonModule, } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import {CoreComponent} from './core/core.component';
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
},
{
path: '',
component: CoreComponent,
children: [
{
path: '',
loadChildren: () => import('./core/core.module').then(mod => mod.CoreModule)
}
]
}
];
@NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes , {
enableTracing: false
})
],
exports: [
RouterModule
],
})
export class AppRoutingModule { }
在 core.module.ts -> 这是有效的
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CoreRoutes } from '../_config/route';
import { TableListComponent } from '../table-list/table-list.component';
import { TypographyComponent } from '../typography/typography.component';
import { IconsComponent } from '../icons/icons.component';
import { MapsComponent } from '../maps/maps.component';
import { NotificationsComponent } from '../notifications/notifications.component';
import { UpgradeComponent } from '../upgrade/upgrade.component';
import {UsersComponent} from '../users/user-list/users.component';
import {UserDetailsComponent} from '../users/user-details/user-details.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(CoreRoutes)
],
declarations: [
TableListComponent,
TypographyComponent,
IconsComponent,
MapsComponent,
NotificationsComponent,
UpgradeComponent,
UsersComponent,
UserDetailsComponent
],
providers : [
]
})
export class CoreModule {}
在 route.ts -> 在这种情况下 loadchildren 仅在我包含像这样的完整路径时才有效 '../dashboard/dashboard.module#DashboardModule'
import { AuthGuard } from '../_helpers';
import {SandboxComponent, UsersComponent} from '../users/user-list/users.component';
import {UserDetailsComponent} from '../users/user-details/user-details.component';
export const CoreRoutes: Routes = [
{
path: 'dashboard',
loadChildren: () => import('../dashboard/dashboard.module').then(mod => mod.DashboardModule),
// '../dashboard/dashboard.module#DashboardModule'
canActivate: [AuthGuard],
},
{
path: 'users',
component: UsersComponent,
children: [
{ path: 'sandbox', component: SandboxComponent } // url: about/item
]
},
{
path: 'users/sandbox',
component: UsersComponent
},
{ path: 'user/:id', component: UserDetailsComponent }
];
ERROR in src\app\core\core.module.ts(18,31): Error during template compile of 'CoreModule'
Function expressions are not supported in decorators in 'CoreRoutes'
'CoreRoutes' contains the error at src\app\_config\route.ts(8,23)
Consider changing the function expression into an exported function.```
解决方案
我发现这个问题。问题是当我使用 --aot (Ahead Of Time) 参数启动服务器并且 CLI 版本是 7.X 时,如果我运行简单,就像ng serve
一切正常(JIT - 及时)编译器一样。根据那里的文件https://angular.io/guide/aot-compiler这来自 6 CLI 版本,并且在将 CLI 更新到 7 / 8 后发生了一些事情
推荐阅读
- c - exec* 函数中的前两个参数是否包含冗余信息?
- vue.js - 在 Vue.js 基于模板的功能组件中,如何传递完整的上下文?
- java - Restlet 使用不同的 HTTP 方法路由相同的 API
- javascript - 如何在 Angular 中使用高图表?
- java - 休眠无法加载类[]
- c++ - CPLEX - 降低成本
- audio - Raspberry Pi 音频通过以太网
- c++ - 使用浮点精度时,C++ 随机为相同的 Mersenne Twister 种子产生不同的数字
- python - Flask 没有从 cul 正确编码形式
- mysql - 如何从采购价格中计算商品?