Angular 2 lazy loading techniques

Question

I already wrote a big application with Angular 1 and requireJS with AMD for lazy loading and structuring. The application don't use routes but parts of the application like HTML, css and Javascript (angular modules) are lazy loaded.

Now I want to change to Angular 2 and I am looking for the best lazy loading technique for HTML, css and JS (angular) content which doesn't depends on routes and which doesn't depends on thousands of different javascript frameworks.

So lazy loading route components seems to be quite simple: http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

but how would you accomplish that scenario without routes? Would you recommend something like webpack, or should I keep requireJS? Is there something like OClazyload for angular 2? Or does it work somehow with Angular 2 even without any frameworks?

I'm a friend of "keep it simple" and I really would like to keep it as small and simple as possible.

Thanks!

Answer 1

Angular 2 is based on web components. The easiest way ("keep it simple" as you said) is using routes and components. You can also load components simply by using directives in your html. for example:

@Component({
  selector: 'my-component', // directive name
  templateUrl: './app/my.component.html',
  directives: []
})
export class MyComponent {}



@Component({
  selector: 'root-component', // directive name
  directives: [MyComponent],
  template: '<my-component></my-component>',
})
export class myComponent {}

if you modify your template to include <my-component> dynamically it will load the component dynamically. This is not a best practice.

there is a dynamic component loader for angular 2, but that is not as simple as using routes or directives. it will create an instance of a Component and attache it to a View Container located inside of the Component View of another Component instance.

with it you can use:

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}
bootstrap(MyApp);

The resulting DOM:

<my-app>
  Parent (
    <child id="child">Child</child>
  )
</my-app>

There is another option (look at angular2 link above) in which you can optionally provide providers to configure the Injector provisioned for this Component Instance.

Hope this helps.

Answer 2

With angular 2 Latest version we can use loadchildren property to perform lazy loading. For example : { path: 'Customer', loadChildren: './customer.module#Customer2Module?chunkName=Customer' },

In this above example I am using webpack Bundling(angular 2 router loader) + Anguar 2 Routing to lazy load the modules.

Answer 3

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

Lets assume we have two pages in our application, “home” and “about”. Some people might never reach the about page, so it makes sense to only serve the load of the about page to people that actually need it. This is where we will use lazy loading.