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]
}
You can use like this:
const rootRoutes: Routes = [
{ path: 'your-path', loadChildren: () => UsersModule }
];
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"]