docs(upgrade): update to latest release + tweaks (#2460)

Author: Foxandxss

public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts

@@ -1,18 +1,29 @@
 declare var angular: any;
+// #docregion ngmodule
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  imports: [ BrowserModule ]
+})
+export class AppModule {}
+// #enddocregion ngmodule
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
 
 // #docregion bootstrap
 import { UpgradeAdapter } from '@angular/upgrade';
 
 // #enddocregion bootstrap
 
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
+// This blank is expected to trigger the docplaster
 
 // #docregion bootstrap
 
-const upgradeAdapter = new UpgradeAdapter();
+const upgradeAdapter = new UpgradeAdapter(AppModule);
 
 upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});
 // #enddocregion bootstrap

public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts

@@ -1,3 +1,16 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  imports: [ BrowserModule ]
+})
+export class AppModule {}
+
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
 // #docregion
 import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter();
+export const upgradeAdapter = new UpgradeAdapter(AppModule);

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

@@ -1,10 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 import { UpgradeAdapter } from '@angular/upgrade';
 
 import { MainController } from './main.controller';
 import { HeroDetailComponent } from './hero-detail.component';
 
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroDetailComponent ]
+})
+export class AppModule {}
+
 declare var angular: any;
-const upgradeAdapter = new UpgradeAdapter();
+const upgradeAdapter = new UpgradeAdapter(AppModule);
 
 angular.module('heroApp', [])
   .controller('MainController', MainController)

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

@@ -1,3 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroDetailComponent } from './hero-detail.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroDetailComponent ]
+})
+export class AppModule {}
+
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
 // #docregion
 import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter();
+export const upgradeAdapter = new UpgradeAdapter(AppModule);

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

@@ -5,8 +5,6 @@ import { upgradeAdapter } from './upgrade_adapter';
 declare var angular: any;
 
 // #docregion register
-upgradeAdapter.addProvider(Heroes);
-
 angular.module('heroApp', [])
   .factory('heroes', upgradeAdapter.downgradeNg2Provider(Heroes))
   .component('heroDetail', heroDetailComponent);

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

@@ -1,3 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #docregion ngmodule
+import { Heroes } from './heroes';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [ Heroes ]
+})
+export class AppModule {}
+// #enddocregion ngmodule
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
 // #docregion
 import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter();
+export const upgradeAdapter = new UpgradeAdapter(AppModule);

public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts

@@ -1,19 +1,15 @@
 // #docregion
 import { Component } from '@angular/core';
-import { upgradeAdapter } from './upgrade_adapter';
 import { Hero } from '../hero';
 
-const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
-
 @Component({
   selector: 'my-container',
   template: `
     <hero-detail [hero]="hero">
       <!-- Everything here will get transcluded -->
       <p>{{hero.description}}</p>
     </hero-detail>
-  `,
-  directives: [HeroDetail]
+  `
 })
 export class ContainerComponent {
   hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');

public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts

@@ -1,3 +1,20 @@
 // #docregion
 import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter();
+import { NgModule, forwardRef } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { ContainerComponent } from './container.component';
+
+export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
+const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ ContainerComponent, HeroDetail ]
+})
+export class AppModule {}
+
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });

public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts

@@ -1,11 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
 import { MainController } from './main.controller';
 // #docregion downgradecomponent
 import { HeroDetailComponent } from './hero-detail.component';
 
 // #enddocregion downgradecomponent
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroDetailComponent ]
+})
+export class AppModule {}
+
 import { UpgradeAdapter } from '@angular/upgrade';
 
-const upgradeAdapter = new UpgradeAdapter();
+const upgradeAdapter = new UpgradeAdapter(AppModule);
 
 // #docregion downgradecomponent
 

public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts

@@ -1,10 +1,19 @@
-// #docregion downgradecomponent
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion downgradecomponent, ngmodule
 import { HeroDetailComponent } from './hero-detail.component';
 
 // #enddocregion downgradecomponent
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroDetailComponent ]
+})
+export class AppModule {}
+// #enddocregion ngmodule
 import { UpgradeAdapter } from '@angular/upgrade';
 
-const upgradeAdapter = new UpgradeAdapter();
+const upgradeAdapter = new UpgradeAdapter(AppModule);
 
 // #docregion downgradecomponent
 

public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts

@@ -1,19 +1,15 @@
 // #docregion
 import { Component } from '@angular/core';
-import { upgradeAdapter } from './upgrade_adapter';
 import { Hero } from '../hero';
 
-const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
-
 @Component({
   selector: 'my-container',
   template: `
     <h1>Tour of Heroes</h1>
     <hero-detail [hero]="hero"
                  (deleted)="heroDeleted($event)">
     </hero-detail>
-  `,
-  directives: [HeroDetail]
+  `
 })
 export class ContainerComponent {
   hero = new Hero(1, 'Windstorm');

public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts

@@ -1,3 +1,20 @@
 // #docregion
 import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter();
+import { NgModule, forwardRef } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { ContainerComponent } from './container.component';
+
+export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
+const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ ContainerComponent, HeroDetail ]
+})
+export class AppModule {}
+
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });

public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts

@@ -1,16 +1,12 @@
 // #docregion
 import { Component } from '@angular/core';
-import { upgradeAdapter } from './upgrade_adapter';
-
-const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
 
 @Component({
   selector: 'my-container',
   template: `
     <h1>Tour of Heroes</h1>
     <hero-detail></hero-detail>
-  `,
-  directives: [HeroDetail]
+  `
 })
 export class ContainerComponent {
 

public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts

@@ -1,3 +1,23 @@
 // #docregion
 import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter();
+import { NgModule, forwardRef } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { ContainerComponent } from './container.component';
+
+export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
+
+// #docregion heroupgrade
+const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ ContainerComponent, HeroDetail ]
+})
+export class AppModule {}
+// #enddocregion heroupgrade
+
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });

public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
     System.import('app/1-2-hybrid-bootstrap/app.module')
           .then(null, console.error.bind(console));

public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/1-2-hybrid-shared-adapter-bootstrap/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/1-to-2-projection/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/1-to-2-providers/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/2-to-1-providers/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/2-to-1-transclusion/app.module')
             .then(null, console.error.bind(console));

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

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/downgrade-io/app.module')
             .then(null, console.error.bind(console));

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

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/downgrade-static/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/upgrade-io/app.module')
             .then(null, console.error.bind(console));

public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html

@@ -16,9 +16,6 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <script>
       System.import('app/upgrade-static/app.module')
             .then(null, console.error.bind(console));