Lazy loading in angular 1 + 2 hybrid applications

Question

Lazy loading in angular 1 + 2 hybrid applications

We have a hybrid angular 1 + 2 application (therefore using the basic angular 1 application).

We use the update adapter to update our angular2 components before downloading our application with the adapter. This works as expected.

However, we expect a large number of angular2 components (150+) to be available, so loading all components before initial loading will mean a very slow initial load. I am trying to find ways for lazy angular2 loading components so that we can load them as needed. Is there any way to achieve this?

Here is part of my code.

main.ts

import baseRouter from './lib/routing/baseRouter'; import router from './lib/routing/router' import futureRoutes from './futureRoutes' import { Adapter } from './lib/framework/upgradeAdapter'; import { Http, Headers, Response } from '@angular/http'; import { DashboardComponent } from './2x/Dashboard/dashboard.component'; var app = angular.module('myApp', [ 'ui.router', 'ngStorage' ]); app.config(router(app, futureRoutes)) .config(baseRouter) .directive('dashboard', Adapter.downgradeNg2Component(DashboardComponent)); Adapter.bootstrap(document.body, ['myApp'], { strictDi: true }); export default app;

module.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DashboardComponent } from '../../2x/Dashboard/dashboard.component'; @NgModule({ imports: [BrowserModule], declarations: [DashboardComponent] }) export class AppModule { }

upgradeAdapter.ts

 import { UpgradeAdapter } from '@angular/upgrade'; import { AppModule } from './module' export const Adapter = new UpgradeAdapter(AppModule);

dashboard.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'dashboard', templateUrl: '/dist/core/2x/Dashboard/dashboard.html', }) export class DashboardComponent { greeting: string; constructor() { this.greeting = 'Hello world'; } }