延迟加载角度1 + 2混合应用程序

Question

我们有一个角度1 + 2混合应用程序(因此使用角度1基础应用程序).

在使用适配器引导应用程序之前,我们使用升级适配器降级我们的angular2组件.这按预期工作.

但是,我们预计会有大量的angular2组件(150+),因此在引导之前加载所有组件意味着初始负载非常慢.我试图找到延迟加载angular2组件的方法,以便我们可以根据需要加载它们.有没有办法实现这一目标？

这是我的代码的一部分.

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';
    }
}

执行此操作后,我的仪表板组件可在应用程序中使用.