diff --git a/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts index 270cf6222c..c8f1b4e49b 100644 --- a/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; // #docregion ngmodule import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; diff --git a/public/docs/_examples/upgrade-module/ts/app/1-bootstrap/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-bootstrap/app.module.ts index 7b9d8c8dab..639b780d1b 100644 --- a/public/docs/_examples/upgrade-module/ts/app/1-bootstrap/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/1-bootstrap/app.module.ts @@ -1,5 +1,3 @@ -declare var angular: any; - angular.module('heroApp', []) .controller('MainCtrl', function() { this.message = 'Hello world'; diff --git a/public/docs/_examples/upgrade-module/ts/app/1-ng-app/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-ng-app/app.module.ts index 37241e1a07..904f7578b8 100644 --- a/public/docs/_examples/upgrade-module/ts/app/1-ng-app/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/1-ng-app/app.module.ts @@ -1,5 +1,3 @@ -declare var angular: any; - angular.module('heroApp', []) .controller('MainCtrl', function() { this.message = 'Hello world'; diff --git a/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts index ced1fa37f6..17e05bf0e0 100644 --- a/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; import { NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -28,7 +28,7 @@ angular.module('heroApp', []) .directive('heroDetail', downgradeComponent({ component: HeroDetailComponent, inputs: ['hero'] - })); + }) as angular.IDirectiveFactory); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; diff --git a/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts index 2d4562cd59..5d269f65c5 100644 --- a/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; import { NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -34,7 +34,10 @@ export class AppModule { angular.module('heroApp', []) .service('heroes', HeroesService) - .directive('heroDetail', downgradeComponent({component: HeroDetailComponent})); + .directive( + 'heroDetail', + downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory + ); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { diff --git a/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts index 190fa7490b..65c3dbcc8e 100644 --- a/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; import { NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; diff --git a/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts index abf395aff4..0ce9170082 100644 --- a/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; import { NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -28,7 +28,10 @@ export class AppModule { angular.module('heroApp', []) .component('heroDetail', heroDetail) - .directive('myContainer', downgradeComponent({component: ContainerComponent})); + .directive( + 'myContainer', + downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory + ); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; diff --git a/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts index c2820f56a1..b9b67eceb1 100644 --- a/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; import { NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -33,7 +33,7 @@ angular.module('heroApp', []) component: HeroDetailComponent, inputs: ['hero'], outputs: ['deleted'] - })); + }) as angular.IDirectiveFactory); // #enddocregion downgradecomponent diff --git a/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts index beab000f39..d7a3aba388 100644 --- a/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; import { NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -29,7 +29,10 @@ export class AppModule { import { downgradeComponent } from '@angular/upgrade/static'; angular.module('heroApp', []) - .directive('heroDetail', downgradeComponent({component: HeroDetailComponent})); + .directive( + 'heroDetail', + downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory + ); // #enddocregion downgradecomponent diff --git a/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts index abf395aff4..0ce9170082 100644 --- a/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; import { NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -28,7 +28,10 @@ export class AppModule { angular.module('heroApp', []) .component('heroDetail', heroDetail) - .directive('myContainer', downgradeComponent({component: ContainerComponent})); + .directive( + 'myContainer', + downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory + ); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; diff --git a/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts index 35e17256fd..3d252626d7 100644 --- a/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts @@ -1,4 +1,4 @@ -declare var angular: any; +declare var angular: angular.IAngularStatic; import { NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -30,7 +30,10 @@ export class AppModule { angular.module('heroApp', []) .component('heroDetail', heroDetail) - .directive('myContainer', downgradeComponent({component: ContainerComponent})); + .directive( + 'myContainer', + downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory + ); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; 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 cb2de7865b..ece216f692 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 @@ -1,5 +1,5 @@ // #docregion import-adapter -declare var angular: any; +declare var angular: angular.IAngularStatic; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { UpgradeModule, downgradeComponent, downgradeInjectable } from '@angular/upgrade/static'; diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts index 333c08aa45..80282858c4 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts @@ -1,6 +1,6 @@ // #docregion +declare var angular: angular.IAngularStatic; import { Phone, PhoneData } from '../core/phone/phone.service'; -declare var angular: any; class PhoneDetailController { phone: PhoneData; diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts index 47b1e35e4a..81eac1cd81 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts @@ -1,6 +1,6 @@ // #docregion +declare var angular: angular.IAngularStatic; import { Phone, PhoneData } from '../core/phone/phone.service'; -declare var angular: any; class PhoneListController { phones: PhoneData[]; diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 93db36f25c..48642f76fa 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -1095,16 +1095,24 @@ code-example(format=""). .l-sub-section :marked - ### Why declare _angular_ as _any_? + ### Why declare _angular_ as _angular.IAngularStatic_? - A strongly typed `angular` reference to Angular 1 would be great. - But we can't import its UMD typings - library, `@types/angular`, without also importing Angular 1 itself via `import * as angular from 'angular'`. - - Angular 1 is currently loaded by a script tag in `index.html` and - switching to an ES6 import at this time is not worth the considerable effort. - Instead we declare `angular` as an untyped `any` to avoid typing errors. + `@types/angular` is declared as a UMD module, and due to the way + UMD typings + work, once you have an ES6 `import` statement in a file all UMD typed modules must also be + imported via `import` statements instead of being globally available. + Angular 1 is currently loaded by a script tag in `index.html`, which means that the whole app + has access to it as a global and uses the same instance of the `angular` variable. + If we used `import * as angular from 'angular'` instead we would also need to overhaul how we + load every file in our Angular 1 app to use ES6 modules in order to ensure Angular 1 was being + loaded correctly. + + This is a considerable effort and it often isn't worth it, especially since we are in the + 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: