How to create a separate file per module in Angular2 + Webpack?

Question

I followed the steps in https://angular.io/docs/ts/latest/guide/webpack.html and was able to get it working.

But what I want is to have a separate file per module.

I tried adding a new entry point in webpack.common.js for each module but it returns an error when building the app.

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts',
        'test': './src/app/test/test.module.ts'
    }
    .....
}

Is there a way to achieve this?

Jagan · Accepted Answer · 2016-11-17 07:52:08Z

2

You can use webpack's code-splitting with angular2's loadChildren method available in the route config. something like,

{
    path: 'yourroute', loadChildren: () => require.ensure('./yourmodule', (comp: any) => {
      return comp.default;
    }),
    ....
    ...
}

Here, the yourmodule would be loaded on-demand when the yourroute route is requested.

edited Nov 17, 2016 at 7:52

answered Nov 17, 2016 at 7:38

Jagan

5,2567 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PrinceG Over a year ago

I encountered an error when I tried this. Property 'ensure' does not exist on type 'NodeRequire'. . Any idea how to fix?

Jagan Over a year ago

I guess it is problem with typings included.. you might have used both requirejs d.ts and node.d.ts. remove require d.ts use only node.d.ts

PrinceG Over a year ago

Thanks for the idea, but I got this working by following the steps here -> Angular 2 lazy loading with Webpack

Edwin Kato · Accepted Answer · 2016-11-17 07:27:33Z

To use multiple entry points you can pass an object to the entry option. Each value is treated as an entry point and the key represents the name of the entry point.

When using multiple entry points you must override the default output.filename option. Otherwise each entry point would write to the same output file. Use [name] to get the name of the entry point.

eg

entry: {
    polyfills: './src/polyfills.ts',
    vendor: './src/vendor.ts',
    app: './src/main.ts',
    test: './src/app/test/test.module.ts'
}
output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].entry.js"
}

Try that without the quotes on the Left hand side. Also take note of the output

For more information please refer to Webpack multiple entry points

Collectives™ on Stack Overflow

How to create a separate file per module in Angular2 + Webpack?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related