docs(upgrade): update NgUpgrade with AoT, router, unit tests (#2803)

Followup from #2781

public/docs/_examples/.gitignore

@@ -15,4 +15,3 @@ protractor-helpers.js
 **/ts/**/*.js
 **/js-es6*/**/*.js
 **/ts-snippets/**/*.js
-!**/systemjs.config.extras.js

public/docs/_examples/_boilerplate/src/systemjs.config.js

@@ -23,8 +23,6 @@
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
-      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',

public/docs/_examples/upgrade-module/e2e-spec.ts

@@ -98,7 +98,7 @@ describe('Upgrade Tests', function () {
       expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
     });
 
-    xit('has outputs', function () {
+    it('has outputs', function () {
       element.all(by.buttonText('Delete')).first().click();
       expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
     });
@@ -161,4 +161,22 @@ describe('Upgrade Tests', function () {
 
   });
 
+  describe('Dividing routes', function() {
+
+    beforeAll(function () {
+      browser.get('/index-divide-routes.html');
+    });
+
+    it('allows ng1 routes', function () {
+      browser.get('/index-divide-routes.html#/villain');
+      expect(element(by.css('h2')).getText()).toBe('Mr. Nice - No More Mr. Nice Guy');
+    });
+
+    it('allows ng2 routes', function () {
+      browser.get('/index-divide-routes.html#/hero');
+      expect(element(by.css('h2')).getText()).toBe('Windstorm - Specific powers of controlling winds');
+    });
+
+  });
+
 });

public/docs/_examples/upgrade-module/ts/.gitignore

@@ -0,0 +1,7 @@
+**/*.js
+aot/**/*
+!aot/bs-config.json
+!aot/index.html
+!copy-dist-files.js
+!rollup-config.js
+!systemjs.config.1.js

public/docs/_examples/upgrade-module/ts/src/app/ajs-to-a-providers/ajs-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-module/ts/src/app/ajs-to-a-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 './ajs-upgraded-providers';
+
 @NgModule({
   imports: [
     BrowserModule,
     UpgradeModule
   ],
-  providers: [{
-    provide: 'heroes',
-    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/src/app/ajs-to-a-providers/hero-detail.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Component, Inject } from '@angular/core';
+import { Component } from '@angular/core';
 import { HeroesService } from './heroes.service';
 import { Hero } from '../hero';
 
@@ -11,7 +11,7 @@ import { Hero } from '../hero';
 })
 export class HeroDetailComponent {
   hero: Hero;
-  constructor(@Inject('heroes') heroes: HeroesService) {
+  constructor(heroes: HeroesService) {
     this.hero = heroes.get()[0];
   }
 }

public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.component.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <router-outlet></router-outlet>
+    <div ng-view></div>
+  `,
+})
+export class AppComponent { }

public/docs/_examples/upgrade-module/ts/src/app/divide-routes/app.module.ts

@@ -0,0 +1,62 @@
+// #docregion
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { HeroModule } from './hero.module';
+
+// #docregion router-config
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
+import { AppComponent } from './app.component';
+
+class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
+  // use only process the `/hero` url
+  shouldProcessUrl(url: UrlTree) { return url.toString().startsWith('/hero'); }
+  extract(url: UrlTree) { return url; }
+  merge(url: UrlTree, whole: UrlTree) { return url; }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule,
+    HeroModule,
+    RouterModule.forRoot([])
+  ],
+  providers: [
+    // use hash location strategy
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+    // use custom url handling strategy
+    { provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy }
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion router-config
+
+import { Villain } from '../villain';
+
+export const villainDetail = {
+  template: `
+    <h1>Villain detail</h1>
+    <h2>{{$ctrl.villain.name}} - {{$ctrl.villain.description}}</h2>
+  `,
+  controller: function() {
+    this.villain = new Villain(1, 'Mr. Nice', 'No More Mr. Nice Guy');
+  }
+};
+
+angular.module('heroApp', ['ngRoute'])
+  .component('villainDetail', villainDetail)
+  .config(['$locationProvider', '$routeProvider',
+    function config($locationProvider: angular.ILocationProvider,
+                    $routeProvider: angular.route.IRouteProvider) {
+      // #docregion ajs-route
+      $routeProvider
+        .when('/villain', { template: '<villain-detail></villain-detail>' });
+      // #enddocregion ajs-route
+    }
+  ]);

public/docs/_examples/upgrade-module/ts/src/app/divide-routes/hero.module.ts

@@ -0,0 +1,32 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Hero } from '../hero';
+
+@Component({
+  template: `
+    <h1>Hero detail</h1>
+    <h2>{{hero.name}} - {{hero.description}}</h2>
+  `
+})
+export class HeroDetailComponent {
+  hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');
+}
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    // #docregion a-route
+    RouterModule.forChild([
+      { path: 'hero', children: [
+        { path: '', component: HeroDetailComponent },
+      ] },
+    ])
+    // #enddocregion a-route
+  ],
+  declarations: [ HeroDetailComponent ]
+})
+export class HeroModule {}

public/docs/_examples/upgrade-module/ts/src/app/divide-routes/main.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { AppModule } from './app.module';
+
+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/src/app/villain.ts

@@ -0,0 +1,5 @@
+export class Villain {
+  constructor(public id: number,
+              public name: string,
+              public description?: string) { }
+}

public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-providers.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
       System.import('app/a-to-ajs-providers/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-a-to-ajs-transclusion.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
       System.import('app/a-to-ajs-transclusion/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-ajs-a-hybrid-bootstrap.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
     System.import('app/ajs-a-hybrid-bootstrap/app.module')
           .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-ajs-to-a-projection.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
       System.import('app/ajs-to-a-projection/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-ajs-to-a-providers.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
       System.import('app/ajs-to-a-providers/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-divide-routes.html

@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Angular 2 Upgrade</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
+
+    <!-- Polyfills for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.1.js"></script>
+    <script>
+    System.import('app/divide-routes/main')
+          .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <!--#docregion body-->
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+  <!--#enddocregion body-->
+</html>

public/docs/_examples/upgrade-module/ts/src/index-downgrade-io.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
       System.import('app/downgrade-io/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-downgrade-static.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
       System.import('app/downgrade-static/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-upgrade-io.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
       System.import('app/upgrade-io/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/index-upgrade-static.html

@@ -15,7 +15,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="systemjs.config.1.js"></script>
     <script>
       System.import('app/upgrade-static/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-module/ts/src/systemjs.config.1.js

@@ -0,0 +1,43 @@
+/**
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    paths: {
+      // paths serve as alias
+      'npm:': 'node_modules/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      app: 'app',
+      // angular bundles
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      // #docregion upgrade-static-umd
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+      // #enddocregion upgrade-static-umd
+
+      // other libraries
+      'rxjs':                      'npm:rxjs',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.js',
+        defaultExtension: 'js'
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      }
+    }
+  });
+})(this);