Lazy loading in angular 1+2 hybrid apps

681 Views Asked by At

We have an angular 1+2 hybrid application (therefore using an angular 1 base app).

We are using upgrade adapter to downgrade our angular2 components before we bootstrap our application with the adapter. That works as expected.

However, we anticipate having large number of angular2 components (150+) so loading all the components before bootstrapping would mean a very slow initial load. I am trying to find ways to lazy load angular2 components so that we can load them as needed. Is there any way to achieve that?

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

Upon doing this, my dashboard component is available to use in the application.

0

There are 0 best solutions below