16

I've created a new Angular 8 project with @angular/cli -> ng new, added a new lazy module, with ng serve is working fine, but with ng build --prod it raises the following error:

enter image description here

Here is my app.module.ts

@NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Here is my 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 { }

Here is my dashboard.module.ts

@NgModule({
  imports: [
    DashboardRoutingModule
  ],
  declarations: [
    DashboardComponent,
  ]
})
export class DashboardModule { }

Here is my dashboard-routing.module.ts

const ROUTES: Routes = [
  {
    path: '',
    component: DashboardComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(ROUTES)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

This is my tsconfig.json (default)

{
  "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"
    ]
  }
}

3 Answers 3

23

I think I've solved the issue, the problem was with this line:

loadChildren: () => import(`./dashboard/dashboard.module`)

I was using the backticks, replacing them with the normal single-quote '', it works fine.

Sign up to request clarification or add additional context in comments.

1 Comment

It seems as though double quotes are not allowed either...my AOT build was breaking when we used double-quotes. For anyone else that is frustrated!
6

this syntax worked for me:

{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}

1 Comment

This syntax is no longer valid for the latest version of Angular (v9), a new spec was provided in version 8. angular.io/guide/lazy-loading-ngmodules
0

I had the same problem, and solved it by having my loadchildren in just one line, and not many (because of 120 caracts limit on my sonar !) I'm using Angular 10

Ko :

{
    path: "my-big-page",
    loadChildren: () => import("./pages/path-to-page/path-to-page/path-to-page/" +
    "ppage.module").then(
    m => m.MyPagePageModule),
},

Ok :

{
    path: "my-big-page",
    loadChildren: () => import("./pages/path-to-page/path-to-page/path-to-page/ppage.module").then(m => m.MyPagePageModule),
},

The string in the import must be a strict string !

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.