Lazy loading: Webpack angular-router-loader error. #584

New Issue

fergalmoran · 2025-08-09T17:16:51Z

fergalmoran commented

2025-08-09 17:16:51 +00:00

Originally created by @rasert on 7/13/2017

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?

*Originally created by @rasert on 7/13/2017* 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?

fergalmoran closed this issue

2025-08-09 17:16:51 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#584