angular - angular2-router-loader lazy loading webpack error -


i have angular 2 project webpack , i'm trying implement router lazy loading:

import { ngmodule }     '@angular/core'; import { routermodule } '@angular/router';  @ngmodule({   imports: [     routermodule.forroot([       {         path: '',         loadchildren: './app/projects/projects.module#projectsmodule',       }     ])   ],   exports: [     routermodule   ] }) export class approutingmodule {} 

to make worked tried use angular2-router-loader. followed instructions , added loaders in webpack config.

module.exports = [   {     entry: {       core: './node_modules/core-js/client/shim.min.js',       zone: './node_modules/zone.js/dist/zone.js',       reflect: './node_modules/reflect-metadata/reflect.js',       system: './node_modules/systemjs/dist/system.src.js'     },     output: {       filename: './wwwroot/js/[name].js'     },     target: 'web',     node: {       fs: "empty"     }   },   {     entry: {       app: './wwwroot/app/main.ts'     },     output: {       filename: './wwwroot/app/bundle.js'     },     devtool: 'source-map',     resolve: {       extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']     },     module: {       loaders: [         {            test: /\.ts$/,           loaders: [             'ts-loader',             'angular2-router-loader'           ]         }       ]     }   }]; 

but when try run webpack configuration following error:

error in ./wwwroot/app/app-routing.module.ts module build failed: typeerror: undefined not function     @ object.module.exports.normalizefilepath (/path/to/app/node_modules/angular2-router-loader/src/utils.js:54:16)     @ /path/to/app/node_modules/angular2-router-loader/src/index.js:56:22     @ string.replace (native)     @ object.module.exports (/path/to/app/node_modules/angular2-router-loader/src/index.js:28:31)  @ ./wwwroot/app/app.module.ts 16:27-58 

is there additional setup need do?

  1. loadchildren should relative path, if approutingmodule in /app/, loadchildren should ./projects/projects.module#projectsmodule.

  2. output should have publicpath setting. output: { filename: './wwwroot/js/[name].js', publicpath: "/js/" }, angular2-router-loader generate files each modules *.js, webpack replace wrong path. use publicpath setting let webpack know *.js root path.

  3. recommend use awesome-typescript-loader, faster ts-loader.

my github sample code reference:
https://github.com/johnwu1114/asp-net-core-angular-lazy-loading


Comments

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -