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: