diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts index d288302597..1e3fc22dc3 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts @@ -1,9 +1,11 @@ // #docplaster // #docregion bare import { NgModule } from '@angular/core'; -import { UpgradeModule } from '@angular/upgrade/static'; import { BrowserModule } from '@angular/platform-browser'; // #enddocregion bare +// #docregion upgrademodule +import { UpgradeModule } from '@angular/upgrade/static'; +// #enddocregion upgrademodule // #docregion httpmodule import { HttpModule } from '@angular/http'; // #enddocregion httpmodule @@ -23,19 +25,20 @@ import { PhoneListComponent } from './phone-list/phone-list.component'; import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; // #enddocregion phonedetail -// #docregion bare, httpmodule, phone, phonelist, phonedetail, checkmarkpipe +// #docregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe @NgModule({ imports: [ BrowserModule, - UpgradeModule, // #enddocregion bare + UpgradeModule, + // #enddocregion upgrademodule HttpModule, // #enddocregion httpmodule, phone FormsModule, - // #docregion bare, httpmodule, phone + // #docregion bare, upgrademodule, httpmodule, phone ], - // #enddocregion bare, httpmodule, phone + // #enddocregion bare, upgrademodule, httpmodule, phone declarations: [ PhoneListComponent, // #enddocregion phonelist @@ -61,10 +64,11 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; } // #enddocregion routeparams ] -// #docregion bare, httpmodule, phonelist +// #docregion bare, upgrademodule, httpmodule, phonelist }) export class AppModule { + // #enddocregion bare ngDoBootstrap() {} + // #docregion bare } -// #enddocregion httpmodule, phone, phonelist, phonedetail, checkmarkpipe -// #enddocregion bare +// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts index ece216f692..72688d1753 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts @@ -17,9 +17,6 @@ import { PhoneListComponent } from './phone-list/phone-list.component'; import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; // #enddocregion phone-detail -// #docregion init-adapter -// let upgradeAdapter = new UpgradeAdapter(AppModule); -// #enddocregion init-adapter // #docregion routeparams // upgradeAdapter.upgradeNg1Provider('$routeParams'); @@ -48,9 +45,8 @@ angular.module('phoneDetail') // #enddocregion phone-detail // #docregion bootstrap -// upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['phonecatApp'], {strictDi: true}); + upgrade.bootstrap(document.documentElement, ['phonecatApp']); }); // #enddocregion bootstrap diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 48642f76fa..09a2659f28 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -1085,13 +1085,32 @@ code-example(format=""). that supports both Angular 1 and Angular 2 components. Once we've done that we can start converting the individual pieces to Angular 2. - To bootstrap a hybrid application, we first need to initialize an `UpgradeAdapter`, - which [provides the glue](#upgrading-with-the-upgrade-module) that joins the two - versions of the framework together. Let's import the `UpgradeAdapter` class into a - new file `app/main.ts`. This file has been configured as the application entrypoint - in `systemjs.config.js`, so it is already being loaded by the browser. + To [bootstrap a hybrid application](#bootstrapping-hybrid-angular-1-2-applications), + we first need to import `UpgradeModule` in our `AppModule`, and override it's bootstrap method: -+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'import-adapter', 'app/main.ts') ++makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'upgrademodule', 'app/app.module.ts') + +:marked + Our application is currently bootstrapped using the Angular 1 `ng-app` directive + attached to the `` element of the host page. This will no longer work with + Angular 2. We should switch to a JavaScript-driven bootstrap instead. + + So, remove the `ng-app` attribute from `index.html`, and instead boostrap via `app/main.ts`. + This file has been configured as the application entrypoint in `systemjs.config.js`, + so it is already being loaded by the browser. + ++makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'bootstrap') + +:marked + The arguments used here are the root element of the application (which is + the same element we had `ng-app` on earlier), and the Angular 1.x modules + that we want to load. Since we're bootstrapping the app through + an `UpgradeModule`, we're actually now running the app as a hybrid Angular 1+2 + app. + + This means we are now running both Angular 1 and 2 at the same time. That's pretty + exciting! We're not running any actual Angular 2 components yet though, + so let's do that next. .l-sub-section :marked @@ -1112,31 +1131,6 @@ code-example(format=""). process of moving our our to Angular 2 already. Instead we declare `angular` as `angular.IAngularStatic` to indicate it is a global variable and still have full typing support. - -:marked - We can then make an adapter by instantiating the class: - -+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'init-adapter') - -:marked - Our application is currently bootstrapped using the Angular 1 `ng-app` directive - attached to the `` element of the host page. This will no longer work with - Angular 2. We should switch to a JavaScript-driven bootstrap instead. So, remove the - `ng-app` attribute from `index.html`, and instead add this to `main.ts`: - -+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'bootstrap') - -:marked - The arguments used here are the root element of the application (which is - the same element we had `ng-app` on earlier), and the Angular 1.x modules - that we want to load. Since we're bootstrapping the app through - an `UpgradeAdapter`, we're actually now running the app as a hybrid Angular 1+2 - app. - - This means we are now running both Angular 1 and 2 at the same time. That's pretty - exciting! We're not running any actual Angular 2 components yet though, - so let's do that next. - :marked ## Upgrading the Phone service