Angular 8和惰性模块未加载运行时编译器

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)

我正在使用反引号,将其替换为普通的单引号”,效果很好。

  • 似乎也不允许使用双引号...当我们使用双引号时,我的AOT构建被破坏了。对于任何其他感到沮丧的人! (2认同)

Dev*_*v M 6

这种语法对我有用:

{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}
Run Code Online (Sandbox Code Playgroud)