use*_*955 9 lazy-loading angular
我用@ angular / cli-> ng new创建了一个新的Angular 8项目,添加了一个新的lazy模块,ng serve可以正常工作,但是ng build --prod会引发以下错误:
这是我的app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Run Code Online (Sandbox Code Playgroud)
这是我的app-routing.module.ts
const appRoutes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: 'dashboard',
loadChildren: () => import(`./dashboard/dashboard.module`).then(m => m.DashboardModule),
}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
Run Code Online (Sandbox Code Playgroud)
这是我的dashboard.module.ts
@NgModule({
imports: [
DashboardRoutingModule
],
declarations: [
DashboardComponent,
]
})
export class DashboardModule { }
Run Code Online (Sandbox Code Playgroud)
这是我的dashboard-routing.module.ts
const ROUTES: Routes = [
{
path: '',
component: DashboardComponent
}
];
@NgModule({
imports: [RouterModule.forChild(ROUTES)],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
Run Code Online (Sandbox Code Playgroud)
这是我的tsconfig.json(默认)
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
Run Code Online (Sandbox Code Playgroud)
use*_*955 12
我想我已经解决了问题,问题出在这一行:
loadChildren: () => import(`./dashboard/dashboard.module`)
Run Code Online (Sandbox Code Playgroud)
我正在使用反引号,将其替换为普通的单引号”,效果很好。
这种语法对我有用:
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
1971 次 |
最近记录: |