javascript - angular 1 + 2ハイブリッドアプリでの遅延読み込み

Question

angular 1 + 2ハイブリッドアプリケーションがあります（したがって、angular 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);

ダッシュボード.コンポーネント.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';
    }
}

これを行うと、ダッシュボード コンポーネントをアプリケーションで使用できるようになります。