fix(ng2): Angular 2.0.0-rc.7 compatibility

Closes #2991

Author: christopherthielen

package.json

@@ -56,11 +56,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@angular/common": "^2.0.0-rc.6",
-    "@angular/compiler": "^2.0.0-rc.6",
-    "@angular/core": "^2.0.0-rc.6",
-    "@angular/platform-browser": "^2.0.0-rc.6",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.6",
+    "@angular/common": "^2.0.0-rc.7",
+    "@angular/compiler": "^2.0.0-rc.7",
+    "@angular/core": "^2.0.0-rc.7",
+    "@angular/platform-browser": "^2.0.0-rc.7",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.7",
     "babel-core": "^5.8.14",
     "clone": "^1.0.2",
     "conventional-changelog": "^1.1.0",
@@ -82,7 +82,7 @@
     "phantomjs-polyfill": "0.0.1",
     "reflect-metadata": "=0.1.2",
     "remap-istanbul": "^0.6.3",
-    "rxjs": "5.0.0-beta.11",
+    "rxjs": "5.0.0-beta.12",
     "shelljs": "^0.7.0",
     "systemjs": "^0.18.4",
     "ts-loader": "^0.8.1",
@@ -94,6 +94,6 @@
     "webpack": "1.x",
     "webpack-dev-server": "1.x",
     "yargs": "^4.2.0",
-    "zone.js": "^0.6.17"
+    "zone.js": "^0.6.21"
   }
 }

src/ng2/directives/uiView.ts

@@ -1,7 +1,7 @@
 /** @module ng2_directives */ /** */
 import {
     Component, ComponentFactoryResolver, ViewContainerRef, Input, ComponentRef, Type,
-    ReflectiveInjector, InputMetadata, ComponentMetadata, ViewChild, Injector, Inject
+    ReflectiveInjector, ViewChild, Injector, Inject
 } from '@angular/core';
 
 import {UIRouter} from "../../router";
@@ -39,14 +39,14 @@ const ng2ComponentInputs = (ng2CompClass: Type<any>) => {
       // -> flattened to [ { key: string, anno: annotation } ] tuples
       .reduce((acc, tuple) => acc.concat(tuple.annoArr.map(anno => ({ key: tuple.key, anno }))), [])
       // Only Inputs
-      .filter(tuple => tuple.anno instanceof InputMetadata)
+      .filter(tuple => tuple.anno instanceof Input)
       // If they have a bindingPropertyName, i.e. "@Input('foo') _foo", then foo, else _foo
       .map(tuple => ({ token: tuple.anno.bindingPropertyName || tuple.key, prop: tuple.key }));
 
   /** Get "inputs: ['foo']" inputs */
   let inputs = Reflect['getMetadata']('annotations', ng2CompClass)
       // Find the ComponentMetadata class annotation
-      .filter(x => x instanceof ComponentMetadata && !!x.inputs)
+      .filter(x => x instanceof Component && !!x.inputs)
       // Get the .inputs string array
       .map(x => x.inputs)
       .reduce(flattenR, [])

src/ng2/providers.ts

@@ -1,8 +1,10 @@
 /**
  * # UI-Router for Angular 2
  *
- * For the quick start repository, please see http://github.com/ui-router/quickstart-ng2
- * 
+ * - [ui-router-ng2 home page](https://ui-router.github.io/ng2)
+ * - [tutorials](https://ui-router.github.io/tutorial/ng2/helloworld)
+ * - [quick start repository](http://github.com/ui-router/quickstart-ng2)
+ *
  * Getting started:
  * 
  * - Use npm. Add a dependency on latest `ui-router-ng2`
@@ -12,36 +14,63 @@
  * import {StateRegistry} from "ui-router-ng2";
  * ```
  *
- * - When defining a component, add the [[UIROUTER_DIRECTIVES]] to `directives:` array.
- * - Either bootstrap a [[UIView]] component, or add a `<ui-view></ui-view>` viewport to your root component.
- * - Create application states (as defined by [[Ng2StateDeclaration]]) which will fill in the viewports.
- * - Create a [[UIRouterConfig]], and register your states in the [[UIRouterConfig.configure]] function.
+ * - Create application states (as defined by [[Ng2StateDeclaration]]).
+ *
+ * ```js
+ * export let state1 = {
+ *   name: 'state1',
+ *   component: State1Component,
+ *   url: '/one'
+ * }
+ *
+ * export let state2 = {
+ *   name: 'state2',
+ *   component: State2Component,
+ *   url: '/two'
+ * }
+ * ```
+ *
+ * - Create application feature modules using [[UIRouterModule]]
+ *
+ * ```js
+ * @ UIRouterModule({
+ *   imports: [ CommonModule ],
+ *   states: [ state1, state2 ]
+ * })
+ * export class MyFeatureModule {}
+ * ```
+ *
+ * - Optionally create a [[UIRouterConfig]] to perform any pre-bootstrap configuration.
  *
  * ```js
  * import {UIRouter} from "ui-router-ng2";
- * import {INITIAL_STATES} from "./app.states";
+ *
  * @ Injectable()
  * export class MyUIRouterConfig {
+ *   constructor() {} // Constructor is injectable
  *   configure(uiRouter: UIRouter) {
- *     INITIAL_STATES.forEach(function(state) {
- *       uiRouter.stateRegistry.register(state));
- *     });
+ *     uiRouter.urlRouterProvider.otherwise(() => uiRouter.stateService.target('home'));
  *   }
  * }
  * ```
  *
- * - When bootstrapping: include the [[UIROUTER_PROVIDERS]] and define a provider for your [[UIRouterConfig]]
+ * - When bootstrapping the root module: use the [[provideUIRouter]] function:
+ * - Either bootstrap a [[UIView]] component, or add a `<ui-view></ui-view>` viewport to your root component.
  *
  * ```js
- * import {provide} from "@angular/core";
- * import {bootstrap} from 'angular2/platform/browser';
- * import {UIRouterConfig, UIView, UIROUTER_PROVIDERS} from "ui-router-ng2";
+ * import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+ * import {UIRouterModule, provideUIRouter, UIView} from "ui-router-ng2";
  * import {MyUIRouterConfig} from "./router.config";
  *
- * bootstrap(UIView, [
- *     ...UIROUTER_PROVIDERS,
- *     provide(UIRouterConfig, { useClass: MyUIRouterConfig })
- * ]);
+ * @ UIRouterModule({
+ *   import: [ FeatureModule, BrowserModule ],
+ *   providers: [ provideUIRouter({ configClass: MyUIRouterConfig }) ],
+ *   states: [ homeState ],
+ *   bootstrap: [ UIView ]
+ * })
+ * class RootAppModule {}
+ *
+ * platformBrowserDynamic().bootstrapModule(RootAppModule);
  * ```
  *
  * @preferred @module ng2

src/ng2/uiRouterNgModule.ts

@@ -1,6 +1,6 @@
 /** @module ng2 */ /** */
 import {Ng2StateDeclaration} from "./interface";
-import {NgModule, NgModuleMetadataType, OpaqueToken} from "@angular/core";
+import {NgModule, OpaqueToken} from "@angular/core";
 import {_UIROUTER_DIRECTIVES} from "./directives/directives";
 import {_UIROUTER_PROVIDERS} from "./providers";
 import {UIView} from "./directives/uiView";
@@ -15,12 +15,30 @@ import {uniqR, flattenR} from "../common/common";
 export class UIRouterLibraryModule {}
 
 /**
- * A module declaration lteral, including UI-Router states.
+ * A module declaration literal, including UI-Router states.
  * 
- * This interface extends the NG2 [NgModuleMetadataType](https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html)
+ * This interface extends the NG2 [NgModule interface](https://angular.io/docs/ts/latest/api/core/index/NgModule-decorator.html)
  * by adding a `states` array.
+ * 
+ * The literal goes inside an `@UIRouterModule` decorator
+ *
+ * ---
+ * 
+ * Although this example demonstrates what the literal is, they are usually 
+ * defined inline instead of as a separate variable:
+ * ```
+ * let uiRouterModuleLiteral = {
+ *   providers: [ { provide: LocationStrategy, useClass: HashLocationStrategy } ],
+ *   declarations: [ FooComponent ],
+ *   imports: [ CommonModule ],
+ *   states: [ routerState1, routerState2 ]
+ * };
+ * 
+ * @UIRouterModule(uiRouterModuleLiteral) 
+ * class MyModule {}
+ * ``
  */
-export interface UIRouterModuleMetadata extends NgModuleMetadataType {
+export interface UIRouterModuleLiteral extends NgModule {
   states?: Ng2StateDeclaration[]
 }
 
@@ -57,7 +75,8 @@ export const UIROUTER_STATES_TOKEN = new OpaqueToken("UIRouter States");
  *   imports: [ BrowserModule ],
  *   declarations: [ NonRoutedComponent ],
  *   states: [ homeState, aboutState ]
- * }) export class AppModule {};
+ * })
+ * export class AppModule {};
  * ```
  *
  * ---
@@ -76,13 +95,14 @@ export const UIROUTER_STATES_TOKEN = new OpaqueToken("UIRouter States");
  *   providers: [
  *    { provide: UIROUTER_STATES_TOKEN, useValue: [homeState, aboutState], multi: true }
  *   ]
- * }) export class AppModule {};
+ * })
+ * export class AppModule {};
  * ```
  * 
  * @param moduleMetaData
  *        (See also [NgModuleMetadataType](https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html)
  */
-export function UIRouterModule(moduleMetaData: UIRouterModuleMetadata) {
+export function UIRouterModule(moduleMetaData: UIRouterModuleLiteral) {
   let states = moduleMetaData.states || [];
   var statesProvider = { provide: UIROUTER_STATES_TOKEN, useValue: states, multi: true };