upgrade to angular 4.

package.json

@@ -51,19 +51,19 @@
     "@uirouter/rx": "=0.3.1"
   },
   "peerDependencies": {
-    "@angular/common": "^2.3.1",
-    "@angular/core": "^2.3.1",
-    "@angular/router": "^3.3.1"
+    "@angular/common": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/router": "^4.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^2.3.1",
-    "@angular/compiler": "^2.3.1",
-    "@angular/compiler-cli": "^2.3.1",
-    "@angular/core": "^2.3.1",
-    "@angular/platform-browser": "^2.3.1",
-    "@angular/platform-browser-dynamic": "^2.3.1",
-    "@angular/platform-server": "^2.3.1",
-    "@angular/router": "^3.3.1",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/platform-server": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "@types/jasmine": "^2.2.34",
     "@types/jquery": "^1.10.31",
     "awesome-typescript-loader": "^3.1.2",
@@ -98,7 +98,7 @@
     "typedoc-plugin-external-module-name": "^1.0.2",
     "typedoc-plugin-internal-external": "^1.0.0",
     "typedoc-plugin-ui-router": "^1.0.0",
-    "typescript": "^2.1.4",
+    "typescript": "^2.2.0",
     "ui-router-typedoc-themes": "^1.0.0",
     "webpack": "^2.2.0",
     "webpack-dev-server": "2.2.0",

src/directives/uiView.ts

@@ -4,7 +4,7 @@ import {
   Component, ComponentFactoryResolver, ViewContainerRef, Input, ComponentRef, Type, ReflectiveInjector, ViewChild,
   Injector, Inject
 } from '@angular/core';
-import { reflector } from '../private_import_core';
+import { ɵReflectorReader as ReflectorReader } from '@angular/core';
 import {
   UIRouter, isFunction, Transition, parse, TransitionHookFn, StateDeclaration, inArray, trace, ViewContext, ViewConfig,
   ActiveUIView, ResolveContext, NATIVE_INJECTOR_TOKEN, flattenR
@@ -35,7 +35,7 @@ interface InputMapping {
  *
  * @internalapi
  */
-const ng2ComponentInputs = (ng2CompClass: Type<any>, component: any) => {
+const ng2ComponentInputs = (reflector: ReflectorReader, ng2CompClass: Type<any>, component: any) => {
   /** Get "@Input('foo') _foo" inputs */
   let props = reflector.propMetadata(ng2CompClass);
   let _props = Object.keys(props || {})
@@ -109,7 +109,7 @@ const ng2ComponentInputs = (ng2CompClass: Type<any>, component: any) => {
 @Component({
   selector: 'ui-view, [ui-view]',
   template: `
-    <template #componentTarget></template>
+    <ng-template #componentTarget></ng-template>
     <ng-content *ngIf="!componentRef"></ng-content>
   `
   // styles: [`
@@ -148,7 +148,8 @@ export class UIView {
   constructor(
       public router: UIRouter,
       @Inject(UIView.PARENT_INJECT) parent,
-      public viewContainerRef: ViewContainerRef
+      public viewContainerRef: ViewContainerRef,
+      private reflector: ReflectorReader
   ) {
     this.parent = parent;
   }
@@ -286,7 +287,7 @@ export class UIView {
     const explicitInputTuples = explicitBoundProps
         .reduce((acc, key) => acc.concat([{ prop: key, token: bindings[key] }]), []);
 
-    const implicitInputTuples = ng2ComponentInputs(componentClass, component)
+    const implicitInputTuples = ng2ComponentInputs(this.reflector, componentClass, component)
         .filter(tuple => !inArray(explicitBoundProps, tuple.prop));
 
     const addResolvable = (tuple: InputMapping) => ({

src/providers.ts

@@ -108,10 +108,7 @@ import { Ng2LocationConfig } from "./location/locationConfig";
  * Creates a UIRouter instance and configures it for Angular, then invokes router bootstrap.
  * This function is used as an Angular `useFactory` Provider.
  */
-export function uiRouterFactory(locationStrategy: LocationStrategy, injector: Injector) {
-  let rootModules: RootModule[] = injector.get(UIROUTER_ROOT_MODULE);
-  let modules: StatesModule[] = injector.get(UIROUTER_MODULE_TOKEN);
-
+export function uiRouterFactory(locationStrategy: LocationStrategy, rootModules: RootModule[], modules: StatesModule[], injector: Injector) {
   if (rootModules.length !== 1) {
     throw new Error("Exactly one UIRouterModule.forRoot() should be in the bootstrapped app module's imports: []");
   }
@@ -168,7 +165,7 @@ export function uiRouterFactory(locationStrategy: LocationStrategy, injector: In
 export function parentUIViewInjectFactory(r: StateRegistry) { return { fqn: null, context: r.root() } as ParentUIViewInject; }
 
 export const _UIROUTER_INSTANCE_PROVIDERS: Provider[] =  [
-  { provide: UIRouter, useFactory: uiRouterFactory, deps: [LocationStrategy, Injector] },
+  { provide: UIRouter, useFactory: uiRouterFactory, deps: [LocationStrategy, UIROUTER_ROOT_MODULE, UIROUTER_MODULE_TOKEN, Injector] },
   { provide: UIView.PARENT_INJECT, useFactory: parentUIViewInjectFactory, deps: [StateRegistry]},
 ];
 

src/uiRouterNgModule.ts

@@ -10,7 +10,7 @@ import { UIView } from "./directives/uiView";
 import { UrlRuleHandlerFn, TargetState, TargetStateDef, UIRouter } from "@uirouter/core";
 import { _UIROUTER_INSTANCE_PROVIDERS, _UIROUTER_SERVICE_PROVIDERS } from "./providers";
 
-import { ROUTES } from "@angular/router/src/router_config_loader";
+import { ROUTES } from "@angular/router";
 /** @hidden */ export const UIROUTER_ROOT_MODULE  = new OpaqueToken("UIRouter Root Module");
 /** @hidden */ export const UIROUTER_MODULE_TOKEN = new OpaqueToken("UIRouter Module");
 /** @hidden */ export const UIROUTER_STATES       = new OpaqueToken("UIRouter States");