improve angular1 type declaration in hybrid apps

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';

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';

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';

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;

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 => {

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';

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;

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
 

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
 

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;

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;

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';
 

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;

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[];

public/docs/ts/latest/guide/upgrade.jade

@@ -1095,15 +1095,23 @@ 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.
+    `@types/angular` is declared as a UMD module, and due to the way 
-    But we can't import its <a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD typings</a>
+    <a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD typings</a>
-    library, `@types/angular`, without also importing Angular 1 itself via `import * as angular from 'angular'`.
+    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` and 
+    Angular 1 is currently loaded by a script tag in `index.html`, which means that the whole app
-    switching to an ES6 import at this time is not worth the considerable effort.
+    has access to it as a global and uses the same instance of the `angular` variable.
-    Instead we declare `angular` as an untyped `any` to avoid typing errors.
+    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: