since angular 2 version 2.2.0 , there is new Api for upgrading/downgrading entities.
Implement parts of upgrade/static namespace to provide nice api for downgrading components/services within ng-metadata NgModule and also upgradeAdapter is not needed anymore.
function to implement(backport):
downgradeComponent -> provideNg2Component ( ofc inputs,outputs would be automagically extracted from ng2 Input,Output property decorators so user doesn't have to do this manual work )
downgradeInjectable -> provideNg2Injectable
I would love to see something like this:
angular 2 NgModule
// /app/app.module.ng2.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static/';
import { Logger } from './logger.service.ng2';
import { LoginService } from './login.service.ng2';
import { LoginComponent } from './login.component.ng2';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
],
declarations: [
LoginComponent
],
providers: [
LoginService,
Logger
],
entryComponents: [
LoginComponent
]
})
export class AppModule {
ngDoBootstrap() {}
}
// /main.ts
import { UpgradeModule } from '@angular/upgrade/static/';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from 'ng-metadata/core';
import { Ng1AppModule } from './app/app.module';
// now angular 2 module is the boss
import { AppModule } from './app/app.module.ng2';
if ( ENV === 'production' ) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, [Ng1AppModule.name], {strictDi: true});
});
We should also support old way of registering if user doesn't uses ng-metadata NgModule
import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static/';
import {downgradeNg2Component, downgradeNg2Injectable} from 'ng-metadata/upgrade';
import {provide} from 'ng-metadata/core';
import { AppComponent } from './app.component';
import { Logger, LoggerToken } from './logger.service.ng2';
import { LoginComponent } from './login.component.ng2';
export const Ng1AppModule = angular.module('myApp',[])
.directive(...provide(AppComponent))
.directive(...provide(downgradeNg2Component({
component:LoginComponent,
downgradeFn: downgradeComponent
})))
.factory(...provide(downgradeNg2Injectable({
token: LoggerToken,
injectable: Logger,
downgradeFn: downgradeInjectable
})))
Upgrading services
we should also provide convenient way to upgrade existing ng1 ng-metadata injectables(services) to ng2 ( rarely needed because as 1st step you should upgrade all ng-metadata services to ng2 and downgrade them instead )
let's say we have ng-metadata service:
// heroes.service.ts
import {Injectable} from 'ng-metadata/core'
import { Hero } from './hero';
@Injectable()
export class HeroesService {
get() {
return [
new Hero(1, 'Windstorm'),
new Hero(2, 'Spiderman'),
];
}
}
registered within ng-metadata NgModule
// app.module.ts
import { NgModule, getInjectableName } from 'ng-metadata/core';
import { HeroesService } from './heroes/heroes.service';
@NgModule( {
providers: [
HeroesService,
]
} )
class AppModule {}
this is how we can upgrade it via new angular 2 API (getInjectableName needed) :
// app.module.ng2.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static/';
import { getInjectableName } from 'ng-metadata/core';
import { LoginComponent } from './login.component.ng2';
import { HeroesService } from './heroes/heroes.service';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
],
declarations: [
LoginComponent
],
providers: [
{
// this can be any token, but because we are using ng-metadata we are already using TS DI via type
provide: HeroesService,
useFactory: ($injector: ng.auto.IInjectorService) => $injector.get<HeroesService>(getInjectableName(HeroesService)),
deps: ['$injector']
}
],
entryComponents: [
LoginComponent
]
})
export class AppModule {
ngDoBootstrap() {}
}
registering our ng-metadata injectable to ng2 is too much typing, what I would like to see is something like this:
// app.module.ng2.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static/';
import { provideNg1Injectable } from 'ng-metadata/upgrade';
import { LoginComponent } from './login.component.ng2';
import { HeroesService } from './heroes/heroes.service';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
],
declarations: [
LoginComponent
],
providers: [
provideNg1Injectable(HeroesService)
],
entryComponents: [
LoginComponent
]
})
export class AppModule {
ngDoBootstrap() {}
}
provideNg1Injectable should also accept just string(injected via @Inject('myString')) or OpaqueToken (injected via @Inject(myToken))
since angular 2 version 2.2.0 , there is new Api for upgrading/downgrading entities.
Implement parts of
upgrade/static
namespace to provide nice api for downgrading components/services within ng-metadata NgModule and also upgradeAdapter is not needed anymore.function to implement(backport):
I would love to see something like this:
angular 2 NgModule
ng-metadata angular 1 NgModule
We should also support old way of registering if user doesn't uses ng-metadata NgModule
Upgrading services
let's say we have ng-metadata service:
registered within ng-metadata NgModule
this is how we can upgrade it via new angular 2 API (
getInjectableName
needed) :registering our ng-metadata injectable to ng2 is too much typing, what I would like to see is something like this:
provideNg1Injectable
should also accept juststring
(injected via@Inject('myString')
) orOpaqueToken
(injected via@Inject(myToken)
)