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
    }
];


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

✔️Accepted Answer

this will work
'./login/login.module#LoginModule'
'./dashboard/dashboard.module#DashboardModule'

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) tsconfig.app.json --> BaseUrl: "./"

The issue

Actually, the problem comes from typescript config.
Before NG 6, the scaffold generated by CLI set the BaseUrl in tsconfig.app.json 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: https://angular.io/guide/router#module-import-order-matters.

Also look at the example (links at the top of the article) it shows different techniques to import Modules.
E.g.:
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: