7

I have an app structure like this:

├── /dashboard
│   ├── dashboard.css
│   ├── dashboard.html
│   ├── dashboard.component.ts
│   ├── dashboard.service.ts
│   ├── index.ts
├── /users
│   ├── users.css
│   ├── users.html
│   ├── users.component.ts
│   ├── users.service.ts
│   ├── index.ts
├── /login
│   ├── login.css
│   ├── login.html
│   ├── login.component.ts
│   ├── login.service.ts
│   ├── index.ts
├── app.component.ts
├── app.module.ts
├── app.routes.ts
├── app.styles.css

And I want to code split my app into something like this:

├── dashboard.js
├── users.js
├── login.js
├── app.js

I cannot seem to find an example of how I can do this with webpack. So 2 questions. Can this be done? And, How can this be done?

Any leads or help would be appreciated. I have been researching this all morning.

Angular documentation suggests it here, but no examples or tutorials that I can find. So it's possible, yet no one know how to do it?.

you can find the webpack configuration here

Jason Spick
  • 6,028
  • 13
  • 40
  • 59

1 Answers1

2

You will have to put each one of them as an entry point

entry: {
  'dashboard': './src/dashboard/index.ts',
  'users': './src/users/index.ts',
  'login': './src/login/index.ts',
  'app': './src/app.module.ts'
}

and then to make sure no code is duplicate across the different entry points set them in the commons chunk plugin. The order is important code encountered in app and subsequently also important in dashboard or users will only show up in the last one it is present/required in.

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
       name: ['app', 'dashboard', 'login', 'users'] 
    })
]

you can also get some inspiration from here: https://angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration

pzaenger
  • 11,381
  • 3
  • 45
  • 46
Eldin
  • 76
  • 5
  • I am not getting the behavior I was expecting. I am using async routes ex: { path: 'dashboard', loadChildren: () => System.import('./dashboard') }, but when I add your code above, the file is loaded on app init. Maybe I have some bad configurations? – Jason Spick Sep 28 '16 at 14:22
  • Is it generating the separate files now though? Could you add your webpack configuration to your post? – Eldin Sep 29 '16 at 07:08
  • I have added a link. – Jason Spick Sep 29 '16 at 16:12
  • Is it because the HtmlWebpackPlugin will inject ALL the chunks into the index template? – Tirinoarim Dec 23 '16 at 10:17