Migrating Angular 1 Applications to Latest Angular in 5 Simple Steps
Victor Savkin
15933

We have very complex Angular 1.5 application that is using a lot of Angular 1.5 components. I am thinking about start developing new components in Angular 2.0 and gradually replace 1.5 components with 2.0. I was able downgrade Angular 2.0 component and use it in Angular 1.5 app. However, I am having problems upgrade some 1.5 services to use them in new 2 component. I read many articles but most of them have references to old Angular 2.0.

I have very simple Angular 1 services — file appresources.services.js. Those services are used in Angular 1.5 components:

(function () {

‘use strict’;

angular.module(‘phoneList’).service(‘appResourcesService’, appResourcesService);

function appResourcesService() {

// APPLICATION CONSTANTS:

var BUILD_NUMBER = ‘Regional Beta 1.0’;

function getBuildNumber() {

return BUILD_NUMBER;

}

return {

getBuildNumber: getBuildNumber

};

}

})();

This is what I have in main.ts. Component counter is already used in Angular 1.5 template.

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { UpgradeAdapter } from ‘@angular/upgrade’;

import { AppModule } from ‘./angular2/app.module’;

import {CounterComponent} from ‘./angular2/counter.component’;

//Getting upgrade adapter

let upgradeAdapter = new UpgradeAdapter(AppModule);

platformBrowserDynamic().bootstrapModule(AppModule);

//Making Angular 2.0 component to be used in Angular 1.5 app

angular.module(‘phonecatApp’)

.directive(

‘counter’,

<any>upgradeAdapter.downgradeNg2Component(CounterComponent))

upgradeAdapter.upgradeNg1Provider(‘appResourcesService’);

upgradeAdapter.bootstrap(document.body, [‘phonecatApp’]);

This is my new component that I am planning to use those services:

import {Component, Input, OnInit} from ‘@angular/core’;

import {Injectable, Inject} from ‘@angular/core’;

import {UpgradeAdapter} from ‘@angular/upgrade’;

@Component({

selector: ‘pagefooterng2’,

template: `

<div>

{{message}}

</div>

`

})

export class PagefooterN2Component implements OnInit {

private message: string;

constructor( @Inject(‘appResourcesService’) appResourcesService) {

}

ngOnInit() {

this.message = “Some message”;

}

}

This is very simple, however, I can use services at component level.

I feel that import statements are missed here, however, how can I import from Angular 1.5 services.

Any help would really appreciated!