Solvedangular cli lazy loading not working in Angular 6

I'm getting this error when try to navigate to 'http://localhost:4200/dashboard' lazy loading route in angualr, angualr-cli 6.0.0

ERROR Error: Uncaught (in promise): Error: Cannot find module "app/dashboard/dashboard.module". Error: Cannot find module "app/dashboard/dashboard.module". at $_lazy_route_resource lazy namespace object:5

const routes: Routes = [
        path: 'login',
        loadChildren: 'app/login/login.module#LoginModule',

        path: '',
        component: MasterComponent,
        children: [
                path: 'dashboard',
                loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
        path: '**',
        redirectTo: 'login

    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
export class AppRoutingModule {
45 Answers

✔️Accepted Answer

this will work

Other Answers:

Edited, thanks to @filipesilva 👏

Efectively, there are three posible solutions:

a) Using relative path loadChildren: './...
b) Using absolute path starting with loadChildren: 'src/app/...
c) --> BaseUrl: "./"

The issue

Actually, the problem comes from typescript config.
Before NG 6, the scaffold generated by CLI set the BaseUrl in which is located inside /src. Currently, it is set by tsconfig.json located outside /src, but continues pointing to ./. Because of this, loadChildren path to module should be relative or include src folder.

Angular CLI: 6.0.3
Node: 8.11.1
OS: darwin x64
Angular: 6.0.2

What about relative parent? '../' is not working anymore :(

I had the same problem then stumbled across this article:

Also look at the example (links at the top of the article) it shows different techniques to import Modules.
HerosModule is loaded eagerly
CrisisCenterModule is loaded lazily

To solve the problem:

  • I upgraded @angular/cli to version 6.0.1 (not 100% sure if this made any difference)
  • I moved the order of my imports around. (Move the *RoutingModule to the bottom of the list of imports)
  • I also removed the lazy-loaded modules from the NgModule.imports property list

Using an absolute path value for 'loadChildren' still works for me:
loadChildren: 'app/dashboard/dashboard.module#DashboardModule'

More Issues: