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?
loadchildren
should relative path, if approutingmodule in/app/
,loadchildren
should./projects/projects.module#projectsmodule
.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. usepublicpath
setting let webpack know*.js
root path.recommend use
awesome-typescript-loader
, fasterts-loader
.
my github sample code reference:
https://github.com/johnwu1114/asp-net-core-angular-lazy-loading
Comments
Post a Comment