7

我们有一个 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;

模块.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 { }

升级适配器.ts

import { UpgradeAdapter } from '@angular/upgrade';
import { AppModule } from './module'

export const Adapter = new UpgradeAdapter(AppModule);

仪表板.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';
    }
}

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

4

0 回答 0