How to achieve lazy loading in an Angular Hybrid Application?

[trafalgarDWaterLaw]

Here is how i am routing my angular 1 controllers:

myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/'); $stateProvider.state('main', { url: '/', views: { mainContainer: { controller: 'mainController', templateUrl: 'app/angular1/main/main.html' } }, resolve:{ loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('app/angular1/main/main.ctrl.js'); }] } })..state('calculator', { url: '/calc', views: { mainContainer: { controller: 'CalculatorController', templateUrl: 'app/angular1/calculator/calculator.html' } }, resolve:{ loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('app/angular1/service/service.js').then(function(){ $ocLazyLoad.load('app/angular1/calculator/calculator.ctrl.js'); }); }] } }) });

The above part works perfectly. But I now want to lazy load an Angular 2 component with a new state, and also i have to downgradeNg2Component while i am lazy loading that component. Also i am using systemjs. Please let me know if there is anything that can be done.

[trafalgarDWaterLaw]

Here is my demo repo for the same: https://github.com/trafalgarDWaterLaw/Angular-Hybrid/tree/master

can anyone please look into this. I am not able to lazy load angular 2's component "Hello". Even though i have tried loading hello.js via oclazyload but it gets loaded during bootstrap itself since the component needs to be downgraded before use. So i am trying to find a way to downgradeNg2component while routing to it and not before that. Also in the present scenario whenever i route to angular 2 component Hello(which is already loaded before ), it gives Uncaught TypeError: Unexpected anonymous System.register call , Error . If anybody has any idea on bootstraping the app in a different way which can give some kind of solution towards my main problem , would be most welcome.

[trafalgarDWaterLaw]

@ocombe can you please guide me, where i am going wrong.

[trafalgarDWaterLaw]

any updates on this?

[KhalipskiSiarhei]

I am also very interesting in it. We have hybrid application (AngularJS + Angular 4.1.0 + CLI 1.0.1) and we would like to use lazy loading for NG2 part. According to the provided documentation how to bootstrap hybrid application we need to downgrade NG2 components in bootstrap time; but in fact it means that everything should be available in this bootstrap time and lazy loading will not work/no sense in it. Probably there are some advanced techniques how to bootstrap hybrid application if we would like to use lazy loading?

[DeepakVnit]

I am also facing the same issue with my hybrid application. Since loading NG2 components at the bootstrap is not a good idea i suppose. @KhalipskiSiarhei do you have a demo repo for the same since i have also used systemjs. would like to see it work in CLI. @ocombe is there a way to downgrade and lazyload NG2 components at the time of routing hybrid app?

[trafalgarDWaterLaw]

Hi @KhalipskiSiarhei can you please share a demo repository for your hybrid app(AngularJS + Angular 4.1.0 + CLI 1.0.1) as upgradeAdapter is deprecated in Angular 4 so I am struggling in bootstraping of the application . Can you please let me know your bootstraping method(i guess upgradeModule needs to be used) or demo repository would be a huge favor. Thanks.

[KhalipskiSiarhei]

Hi @trafalgarDWaterLaw. Below is an example of main.ts with running hybrid. Nothing special is here, everything is according to the official documentation.

`import { enableProdMode, FactoryProvider } from '@angular/core'; import { UpgradeModule } from '@angular/upgrade/static'; import { downgradeComponent } from '@angular/upgrade/static'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { environment } from './environments/environment'; import { WebAppModule } from './app/webapp.module'; import { WebAppComponent } from './app/webapp.component';

declare var angular: any; if (environment.production) { enableProdMode(); }

angular.module('sport.core') .directive('webappComponentsDir', downgradeComponent({ component: WebAppComponent }) as angular.IDirectiveFactory); platformBrowserDynamic().bootstrapModule(WebAppModule).then(platformRef => { const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.documentElement, ['sportWebApp'], { strictDi: true }); });`

[trafalgarDWaterLaw]

Thanks a lot @KhalipskiSiarhei i will try this out.

[KhalipskiSiarhei]

Here is a set of articles how to do it https://blog.nrwl.io/using-ngupgrade-like-a-pro-lazy-loading-angularjs-applications-469819f5c86

We are still considering it.