我们有一个角度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';
}
}
执行此操作后,我的仪表板组件可在应用程序中使用。