Angular 5 lazy loading Error: Cannot find module

Question

I would like to use lazy loading but I can not understand why it does not work, it gives me error \"Cannot find module\".
This is my environment:
- Angular 5.2.1

Answer 1

You can use like this:

const rootRoutes: Routes = [
  { path: 'your-path', loadChildren: () => UsersModule }
];

Answer 2

Usually, it is an error with the path. Change the path.

For example, this solution works for me::

loadChildren: '../changelog/changelog.module#ChangelogModule'

./folder or ../folder or folder

Answer 3

I have found two solutions (via the OP by edit):

1. Reference to the module, after it has already been resolved with an import statement:

   import { UsersModule } from './components/users/users.module';

then referencing this way:

{
    path: 'users',
    loadChildren: () => UsersModule,
    canLoad: [AuthGuard]
}

2. I have added ng-router-loader to the application (npm install ng-router-loader --save-dev) and I set up Webpack like this:

        rules: [{
                test: /\.ts$/,
                include: /ClientApp/,
                //use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack'
                use: isDevBuild ? [{ loader: 'ng-router-loader' }, 'awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack'
            },
            {
                test: /\.html$/,
                use: 'html-loader?minimize=false'
            },
            {
                test: /\.css$/,
                use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: 'url-loader?limit=25000'
            }
        ],
   

then referencing the module by path:

    {
        path: 'users',
        loadChildren: './components/users/users.module#UsersModule',
        canLoad: [AuthGuard]
    }

Answer 4

Its typo folder name is Users not users :

Change

'./components/users/users.module#UsersModule'

to

'./components/Users/users.module#UsersModule'

Answer 5

The currently accepted answer, which proposes to exchange the value of loadChildren from a string to a function, removes the possibility of AOT compilation when doing a production build.

What worked for me, was 1) use absolute paths 2) Add the lazy loaded modules as a string array in angular.json under projects > 'projectname' > architect > build > options > lazyModules. The paths should be the same as defined under loadChildren.

So, in your case, I think this should work in your routing module:

loadChildren: 'app/components/users/users.module#UsersModule'

And in angular.json, add this at the location specified above:

lazyModules: ["app/components/users/users.module"]

Answer 6

try to do n your user.module.ts:

import {UserRoutes } from './User.routing'

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        UsersRoutingModule.forChild(UserRoutes), //<-- for child
        RouterModule
    ],
    declarations: [
        UsersComponent,
        UserFormComponent,
        UsersListComponent,
        UserViewComponent
    ],
    providers: [
        UsersResolver,
        RouterModule
    ]
})
export class UsersModule { }