Lazy loading with Angular 6.1, error with ng build

Question

I have a Angular 6.1 application which is served by django. When I try to ng build this and open it, following error is occuring:

Uncaught SyntaxError: Unexpected token <
ERROR Error: Uncaught (in promise): Error: Loading chunk recordmanagement-records-module-ngfactory failed.

There is no import of the records-module or its component in the app-module. If I ng serve this, it works just fine. I also tried --aot and a custom webpack build with angular-router-loader, which didn't work.

This is the app-routing:

const appRoutes: Routes = [
    { path: "records", loadChildren: './recordmanagement/records.module#RecordsModule'},
    { path: "", pathMatch: "full" , component: DashboardComponent, canActivate: [AuthGuardService]},
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

And the records-routing:

const recordsRoutes: Routes = [{
    path: "",
    component: RecordsComponent,
    canActivate: [AuthGuardService]
}];

@NgModule({
    imports: [RouterModule.forChild(recordsRoutes)],
    exports: [RouterModule],
    providers: [AuthGuardService]
})
export class RecordsRoutingModule {}

The basic angular depencies are used + ngrx for state management. Everything gets built perfectly:

chunk {main} main.js, main.js.map (main) 233 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 228 kB [initial] [rendered]
chunk {recordmanagement-records-module-ngfactory} recordmanagement-records-module-ngfactory.js, recordmanagement-records-module-ngfactory.js.map (recordmanagement-records-module-ngfactory) 208 kB  [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 9.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 78.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.22 MB [initial] [rendered]

Django really just serves the files which are created in the building process.

Do you have any ideas whats happening here?

Answer 1

对于延迟加载的模块，我们需要使用.forchild的方法RouterModule 。

RouterModule.forChild(routes)

Answer 2

thanks for your answers, the problem was indeed not the .forChild , I had that already. but the serving from django, which didnt find the chunk.

solution: user ng build --deploy-url /static/dist/ where '/static/dist/' is the location where the files get compiled.