lazy loading not working in Angular 6

[cagline]

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

[Patrick-Kan]

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

[alexzuza]

angular/angular@f44a2c7

[mkollers]

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

[sluglit]

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'

[tjaussoin-luna]

had the same issue, and @sluglit had the solution with "Move the *RoutingModule to the bottom of the list of imports" ! Nothing related to the 2 other bullet points, at least on my side.

[Ricard]

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

[grapgrap]

@Ricard Thanks you!! I solved the issue with your solution.

[filipesilva]

@Ricard also opened an issue about this in angular/devkit#969, and it includes a simple repro that I will use for my response https://github.com/Ricard/ng6-lazyload-issue-evidence.

There's a couple parts to this issue. Yes it is all about baseUrl as that is how non-relative paths in typescript are resolved from. In Angular CLI 6 projects the baseUrl is ./, whereas in Angular CLI 1.x it was ./src/.

But we also never recommended using imports like loadChildren: 'app/mod/mod.module#ModModule'. The recommended approach is to always use a relative path, such as loadChildren: './mod/mod.module#ModModule'.

We did change the baseUrl for new projects in Angular CLI 6, and this was done purposefully. Angular CLI 6 supports multiple projects and it does not make a lot of sense to use src/ as baseUrl in that case.

If you have multiple projects and each of them has their own baseUrl, you're going to need a very specific file setup for that to work for both builds and for your editor. This is not trivial.

You can try to change the baseUrl for your workspace if you're sure you're never going to have other projects though. But as a default we try to be safe for multiple types of usage.

[Ricard]

@filipesilva I saw your commit angular/devkit@33af719
The property has moved from tsconfig.app.json to src/tsconfig.json file, but not it's value ./, therefore newly generated v6 apps by CLI wont be able to find lazy load modules with paths defined as lazy load documentation.

I suggest this change. It preserves baseUrl: "./" on tsconfig.json and each project have its tsconfig.app.json that overwrites baseUrl property. I hope this is aligned with the multiprojects approach and tooling.

If you prefere to use relative url for loadChildren, It should be updated on documentation and tutorial.

[filipesilva]

@Ricard you are right that the documentation on Angular.io shows a non-relative path. I am discussing this with the docs folks. Parts of the docs are not yet aligned with Angular CLI and I suspect this is one of them.

[filipesilva]

Opened as angular/angular#24109

[tomschreck]

@dalu - thanks for tip. it worked for me