We have complex Angular 1.5 application that is using a lot of Angular 1.5
components. I am thinking about starting developing of 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 upgrading simple Angular 1 services to use them in the
new Angular 2 component. I read many articles but most of them have
references to old Angular 2 - beta or release candidates.
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't use services at component level, they
are not available as I see om Chrome debugger.
I feel that import statements are missed here, however, how can I import
from Angular 1.5 services?
Any help would really appreciated!
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
