add ng1-upgraded-providers.ts, minor edits

Author: filipesilva

public/docs/_examples/_boilerplate/tsconfig.json

@@ -16,6 +16,7 @@
   "compileOnSave": true,
   "exclude": [
     "node_modules/*",
-    "**/*-aot.ts"
+    "**/*-aot.ts",
+    "aot/**/*"
   ]
 }

public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts

@@ -6,18 +6,17 @@ import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
 
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroesService } from './heroes.service';
-
 // #docregion register
+import { heroesServiceProvider } from './ng1-upgraded-providers';
+
 @NgModule({
   imports: [
     BrowserModule,
     UpgradeModule
   ],
-  providers: [{
-    provide: HeroesService,
-    useFactory: (i: any) => i.get('heroes'),
-    deps: ['$injector']
-  }],
+  providers: [
+    heroesServiceProvider
+  ],
   // #enddocregion register
   declarations: [
     HeroDetailComponent
@@ -39,7 +38,6 @@ angular.module('heroApp', [])
     downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
   );
 
-
 platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
   const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
   upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});

public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/ng1-upgraded-providers.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { HeroesService } from './heroes.service';
+
+export function heroesServiceFactory(i: any) {
+  return i.get('heroes');
+}
+
+export const heroesServiceProvider = {
+  provide: HeroesService,
+  useFactory: heroesServiceFactory,
+  deps: ['$injector']
+};

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts

@@ -21,6 +21,9 @@ import { CheckmarkPipe } from './core/checkmark/checkmark.pipe';
 // #docregion phonelist
 import { PhoneListComponent } from './phone-list/phone-list.component';
 // #enddocregion phonelist
+// #docregion routeparams
+import { routeParamsProvider } from './ng1-upgraded-providers';
+// #enddocregion routeparams
 // #docregion phonedetail
 import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 // #enddocregion phonedetail
@@ -57,11 +60,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
   providers: [
     Phone,
     // #enddocregion phone
-    {
-      provide: '$routeParams',
-      useFactory: routeParamsFactory,
-      deps: ['$injector']
-    }
+    routeParamsProvider
     // #docregion phone
   ]
   // #enddocregion routeparams
@@ -73,9 +72,3 @@ export class AppModule {
   // #docregion bare
 }
 // #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
-
-// #docregion routeparams
-export function routeParamsFactory(i: any) {
-  return i.get('$routeParams');
-}
-// #enddocregion routeparams

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/ng1-upgraded-providers.ts

@@ -0,0 +1,14 @@
+// #docregion
+export abstract class RouteParams {
+  [key: string]: string;
+}
+
+export function routeParamsFactory(i: any) {
+  return i.get('$routeParams');
+}
+
+export const routeParamsProvider = {
+  provide: RouteParams,
+  useFactory: routeParamsFactory,
+  deps: ['$injector']
+};

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts

@@ -4,11 +4,11 @@ declare var angular: angular.IAngularStatic;
 import { downgradeComponent } from '@angular/upgrade/static';
 
 // #docregion initialclass
-import { Component, Inject } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { Phone, PhoneData } from '../core/phone/phone.service';
 // #enddocregion initialclass
-// #docregion checkmark-pipe
+import { RouteParams } from '../ng1-upgraded-providers';
 
 // #docregion initialclass
 @Component({
@@ -18,13 +18,12 @@ import { Phone, PhoneData } from '../core/phone/phone.service';
   // #enddocregion initialclass
   // #docregion initialclass
 })
-// #enddocregion checkmark-pipe
 export class PhoneDetailComponent {
   phone: PhoneData;
   mainImageUrl: string;
 
-  constructor(@Inject('$routeParams') $routeParams: any, phone: Phone) {
-    phone.get($routeParams['phoneId']).subscribe(phone => {
+  constructor(routeParams: RouteParams, phone: Phone) {
+    phone.get(routeParams['phoneId']).subscribe(phone => {
       this.phone = phone;
       this.setImage(phone.images[0]);
     });

public/docs/_examples/upgrade-phonecat-3-router/ts/app/app.module.ts

@@ -11,6 +11,7 @@ import { Phone } from './core/phone/phone.service';
 import { CheckmarkPipe } from './core/checkmark/checkmark.pipe';
 import { PhoneListComponent } from './phone-list/phone-list.component';
 import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
+import { routeParamsProvider } from './ng1-upgraded-providers';
 
 @NgModule({
   imports: [
@@ -32,18 +33,10 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
   ],
   providers: [
     Phone,
-    {
-      provide: '$routeParams',
-      useFactory: routeParamsFactory,
-      deps: ['$injector']
-    }
+    routeParamsProvider
   ],
   // #docregion bootstrap
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
 // #enddocregion bootstrap
-
-export function routeParamsFactory(i: any) {
-  return i.get('$routeParams');
-}

public/docs/_examples/upgrade-phonecat-3-router/ts/app/ng1-upgraded-providers.ts

@@ -0,0 +1,14 @@
+// #docregion
+export abstract class RouteParams {
+  [key: string]: string;
+}
+
+export function routeParamsFactory(i: any) {
+  return i.get('$routeParams');
+}
+
+export const routeParamsProvider = {
+  provide: RouteParams,
+  useFactory: routeParamsFactory,
+  deps: ['$injector']
+};

public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts

@@ -5,6 +5,7 @@ import { downgradeComponent } from '@angular/upgrade/static';
 import { Component, Inject } from '@angular/core';
 
 import { Phone, PhoneData } from '../core/phone/phone.service';
+import { RouteParams } from '../ng1-upgraded-providers';
 
 @Component({
   moduleId: module.id,
@@ -14,8 +15,8 @@ export class PhoneDetailComponent {
   phone: PhoneData;
   mainImageUrl: string;
 
-  constructor(@Inject('$routeParams') $routeParams: any, phone: Phone) {
-    phone.get($routeParams['phoneId']).subscribe(phone => {
+  constructor(routeParams: RouteParams, phone: Phone) {
+    phone.get(routeParams['phoneId']).subscribe(phone => {
       this.phone = phone;
       this.setImage(phone.images[0]);
     });

public/docs/ts/latest/guide/upgrade.jade

@@ -730,8 +730,16 @@ figure
 
 :marked
   We can upgrade the service using a Angular 2 [Factory provider](./dependency-injection.html#factory-providers)
-  that requests the service from the Angular 1 `$injector`:
+  that requests the service from the Angular 1 `$injector`. 
 
+  We recommend declaring the Factory Provider in a separate `ng1-upgraded-providers.ts` file
+  so that they are all together, making it easier to reference them, create new ones and
+  delete them once the upgrade is over. 
+  
+  It's also recommended to export the `heroesServiceFactory` function so that Ahead-of-Time
+  compilation can pick it up. 
+
++makeExample('upgrade-module/ts/app/1-to-2-providers/ng1-upgraded-providers.ts', null, 'ng1-upgraded-providers.ts')
 +makeExample('upgrade-module/ts/app/1-to-2-providers/app.module.ts', 'register', 'app.module.ts')
 
 :marked
@@ -1378,7 +1386,7 @@ code-example(format="").
 
 :marked
   This is similar to the phone list component. 
-  The new wrinkle is the `@Inject` decorator that identifies the `$routeParams` dependency. 
+  The new wrinkle is the `RouteParams` type annotation that identifies the `routeParams` dependency. 
 
   The Angular 1 injector has an Angular 1 router dependency called `$routeParams`.
   which was injected into `PhoneDetails` when it was still an Angular 1 controller.
@@ -1387,9 +1395,10 @@ code-example(format="").
   Unfortunately, Angular 1 dependencies are not automatically available to Angular 2 components.
   We must use a [Factory provider](#making-angular-1-dependencies-injectable-to-angular-2)
   to make `$routeParams` an Angular 2 provider.
-  Do that in `app.module.ts`:
+  Do that in a new file called `ng1-upgraded-providers.ts` and import it in `app.module.ts`:
 
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'routeparams', 'app/app.module.ts ($routeParms)')(format='.')
++makeExample('upgrade-phonecat-2-hybrid/ts/app/ng1-upgraded-providers.ts', null, 'app/ng1-upgraded-providers.ts')
++makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'routeparams', 'app/app.module.ts ($routeParams)')(format='.')
 
 :marked
   Convert the phone detail component template into Angular 2 syntax as follows:
@@ -1538,6 +1547,9 @@ code-example(format="").
   We can also remove the `ngDoBootstrap()` override from `app.module.ts` since we are now
   bootstrapping from Angular 2.
 
+  And since `PhoneListComponent` isn't being rendered from a `<phone-list>` tag anymore,
+  but rather routed to, we can do away with it's Angular 2 selector as well.
+
 +makeExample('upgrade-phonecat-3-router/ts/app/app.module.ts', null, 'app/app.module.ts')
 
 :marked
@@ -1601,10 +1613,13 @@ code-example(format="").
 
 :marked
   If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`, 
-  as well as any [Factory provider](#making-angular-1-dependencies-injectable-to-angular-2) for Angular 1 services.
-  
-  Also remove any `downgradeInjectable` or `downgradeComponent()` you find, 
+  as well as any [Factory provider](#making-angular-1-dependencies-injectable-to-angular-2) 
+  for Angular 1 services, and the `app/ng1-upgraded-providers.ts` file.
+
+  Also remove any `downgradeInjectable()` or `downgradeComponent()` you find, 
   together with the associated Angular 1 factory or directive declarations.
+  Since we have no downgraded components anymore, we also don't need to have them listed
+  in `entryComponents` either.
 
 +makeExample('upgrade-phonecat-4-final/ts/app/app.module.ts', null, 'app.module.ts')  
 
@@ -1621,9 +1636,7 @@ code-example(format="").
 
   The external typings for Angular 1 may be uninstalled as well. The only ones
   we still need are for Jasmine and Angular 2 polyfills.
-
-  The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also go, 
-  we don't need them anymore. 
+  The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also go.
 
 code-example(format="").
   npm uninstall @angular/upgrade --save