Lazy loading: Webpack angular-router-loader error.

[rasert]

When I run webpack, I get these errors:

ERROR in ./ClientApp/boot-client.ts Module build failed: TypeError: loaderUtils.getOptions is not a function at Object.module.exports (/Volumes/Mac HDD/Documentos/Workspace/AAPB_Web/AAPB_Web/node_modules/angular-router-loader/src/index.js:12:27)

ERROR in ./ClientApp/boot-server.ts Module build failed: TypeError: loaderUtils.getOptions is not a function at Object.module.exports (/Volumes/Mac HDD/Documentos/Workspace/AAPB_Web/AAPB_Web/node_modules/angular-router-loader/src/index.js:12:27)

I have added the loader in the sharedConfig from the file webpack.config.js and added a chunkFilename in the output object.

const sharedConfig = { stats: { modules: false }, context: __dirname, resolve: { extensions: [ '.js', '.ts' ] }, output: { filename: '[name].js', chunkFilename: '[id].chunk.js', // Para que o lazy-loading funcione. publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { rules: [ { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular-router-loader'] }, { 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' } ] }, plugins: [new CheckerPlugin()] };

Do I have to add some typescript compiler configuration so that lazy loading can work?

I also added the loadChildren property in the app.routing.module:

RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'home', canActivate: [AuthGuardService], component: HomeComponent }, { path: 'manad', canLoad: [AuthGuardService], loadChildren: './components/manad/manad.module#ManadModule' }, { path: '**', redirectTo: 'home' } ])

What am I doing wrong? The angular-router-loader is running on version 0.6.0. Is it a compatibility issue with the Angular 4.1.2 maybe?

[rasert]

Nevermind. I just found the answer. No one said I have to install the loader-utils package. So, one thing less to achieve lazy loading on Angular + Webpack.

[naveedahmed1]

Which version of angular-router-loader and loader-utils you are using. I tried latest versions of both but still getting this error.

"angular-router-loader": "0.6.0",
"loader-utils": "1.1.0"

[rasert]

@naveedahmed1 try using angular2-router-loader. People have updated the Angular template to use this one now. Maybe it's a good idea to pull this Project and compare it with your Project to see what improvements have been made. The latest version has lazy loading enabled.

[naveedahmed1]

Yes I tried that and it works but it seems that angular2-router-loader is now angular-router-loader. So, shouldnt we use angular-router-loader now?

[jrmcdona]

@naveedahmed1 did you achieve preloading modules? If yes, can I check your webpack.config.js that works for preloading modules and this template?

Thanks

[naveedahmed1]

I haven't tried preloading but I think this template by Mark has preloading enabled https://github.com/MarkPieszak/aspnetcore-angular2-universal

You might also want to take a look at upcoming template:

#1288 (comment)