Angular 5 lazy loading Error: Cannot find module
I have found two solutions (via the OP by edit):
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]
}
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 }
];