Angular2 Webpack延遲加載路由給404

對於使用webpack延遲加載的模塊，404錯誤。

的WebPack不捆綁懶加載的模塊

我都嘗試

{path: 'admin', loadChildren: 'src/admin/config/admin.module'},

和

{path: 'admin', loadChildren: 'src/admin/config/admin.module#AdminModule'},

，但沒有什麼工作

反正有告訴的WebPack是考慮延遲加載用於捆綁實際模塊的模塊。

app.module

@NgModule({ 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    SharedModule.forRoot() 
], 
declarations: [ 
    AppComponent, 
    ValidateComponent, 
], 
bootstrap: [AppComponent]

app.routing

const appRoutes = [ 
{path: '', redirectTo: '/validate', pathMatch: 'full'}, 
{path: 'admin', loadChildren: 'src/admin/config/admin.module'}, 
{path: 'reader', loadChildren: 'src/reader/config/reader.module'}, 
{path: 'validate', component: ValidateComponent}]; 
export const routing = RouterModule.forRoot(appRoutes);

webpack.config.js

var webpack = require('webpack'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 

module.exports = { 
entry:{ 
    app:"./src/app/main" 
}, 
output:{ 
    filename:"./dist/app/[name].js", 
    chunkFilename: '[id].[hash].chunk.js' 
}, 
resolve:{ 
    extensions:["",".js",".ts"] 
}, 
module:{ 
    loaders:[ 
    { 
     test: /\.ts$/, 
     loaders: ['angular2-template-loader','ts-loader'], 
     exclude: /node_modules/ 
    }, 
    { 
     test: /\.html$/, 
     loader: 'html' 
    }] 
}, 
plugins: [new webpack.NoErrorsPlugin()]

的index.html

<body> 
    <archive id="recordsApp" class=""> Loading...</archive> 
    <div id="loading"> 
     <center> 
      <img id="loadingImg" class="shadowImg" src="assets/images/loading.gif"> 
     </center> 
    </div> 
    <script src="dist/app/app.js"></script> 
</body>

來源

2016-09-13 Satish Pokala

我有一個問題，雖然chunkFilename：'[id]。[hash] .chunk.js'有真正的效果嗎？它是否爲每個模塊生成多個js文件？ – Ayyash

這解決了我的問題，我用的打字稿2.0.2

require('es6-promise!./crisis-center/crisis-center.module')('CrisisCenterModule');

的WebPack創造塊，同時捆綁了不同的模塊&加載它們當過我們新模塊的路線。

來源

2016-09-20 07:43:44

可以偷懶使用加載模塊：需要

{path:"lazy", loadChildren:() => require('es6-promise!./path/to/module')('ClassName')}

es6-promise-loader NPM模塊。

來源

2016-09-23 18:28:32

Angular2 Webpack延遲加載路由給404

回答

相關問題