Angular 5 lazy loading Error: Cannot find module

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

Supposing this is AppModule that handles lazyloading and the features of your system are of the same tree as it is:

routes: Routes = [
    {
        path: 'files-pannel',
        loadChildren: () => import('./module-folder/module-name.module').then(m => m.ModuleName)
    }
];

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

You can use like this:

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