How to use "upgrade adapter" with the Angular 2 RC 5

Issue

I have the Angular 2 application working in the mixed mode with Angular 1. My main.ts file looks like:

declare var angular: any;

var moduleName = 'myApp';

import { AppComponent } from './app/app.component';
import { upgradeAdapter, UpgradeManager } from './app/index';

UpgradeManager.prototype.upgradeProviders();
UpgradeManager.prototype.addProviders();

angular.module(moduleName).directive('myApp', upgradeAdapter.downgradeNg2Component(AppComponent));

upgradeAdapter.bootstrap(document.body, [moduleName]);

That was working until Angular 2 RC 4. Now with the new modules in Angular 2 RC 5 the recomendation is to create app.module.ts file so I have the following:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
export class AppModule { }

My question is how can we bootstrap that module using the upgrade adapter from the “main.ts” file?

Solution

Found the solution here:

https://github.com/angular/angular/issues/10656

You need to add your app module to when constructing the upgrade adapter object.

Answered By – ptomaszi

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.