Question

使用RC6

使用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>

Answer 1

这解决了我的问题，我正在使用typescript 2.0.2

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

webpack正在创建块，同时捆绑不同的模块和＆amp;在我们路由到新模块时加载它们。

Answer 2

您可以使用以下方法延迟加载模块：

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

es6-promise-loader npm模块是必需的。

Angular2 Webpack Lazy Loading Routes Giving 404

2 个答案: