Is using Universal a good idea if you are planning to make big application?

[FahadMullaji]

Hey guys,

Whenever I add new pages in my application then it gets compiled into index.js.
Of course, it uses webpack to minify the code but till what extent would it do?

What if I want to have around 1000 pages in my application then size of index.js will get into MBs and as this gets loaded at the time of initialization of application then it will take so much time for loading the application.

How would you deal with this problem? Split index.js? but on what basis? and which part to load when? and how?

Thanks
Fahad Mullaji

[flauc]

Hi @FahadMullaji,

There is an example on this repo of how to use LazyLoaded modules. This does exactly what you need, it splits the main.js file in to chunks and takes care of loading them when they are required (when the route connectect to the module is visited).

[StefanRein]

For anyone don't want using SystemJS beside Webpack:

NOTE: This will flicker under some circumstances (this is independent of the module loader)
See here: #175

/**
* This was in the repo:
export function getLazyModule() {
  return System.import('./lazy/lazy.module' + (process.env.AOT ? '.ngfactory' : ''))
    .then(mod => mod[(process.env.AOT ? 'LazyModuleNgFactory' : 'LazyModule')]);
}
*/

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: 'lazy',
          // loadChildren: getLazyModule
          loadChildren: './lazy/lazy.module#LazyModule'
          // loadChildren: () => new Promise(resolve => {
          //     (require as any).ensure([], require => {
          //         resolve(require('./lazy/lazy.module.ts').LazyModule);
          //     })
          // })
      }
    ], , {preloadingStrategy: PreloadAllModules})
  ],
})
export class AppRoutingModule { }

For this to work you need to run:
npm install angular2-router-loader --save-dev

And add in the webpack.config.ts the angular2-router-loader

export var commonConfig = {
  // https://webpack.github.io/docs/configuration.html#devtool
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [ root('node_modules') ]
  },
  context: __dirname,
  output: {
    publicPath: '',
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      // TypeScript
      { test: /\.ts$/,   use: ['awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader'] },
      { test: /\.html$/, use: 'raw-loader' },
      { test: /\.css$/,  use: 'raw-loader' },
      { test: /\.json$/, use: 'json-loader' }
    ],
  },
  plugins: [
    // Use commonPlugins.
  ]

};