Skip to content

Commit

Permalink
fix(ng2): Angular 2.0.0-rc.7 compatibility
Browse files Browse the repository at this point in the history
Closes #2991
  • Loading branch information
christopherthielen committed Sep 13, 2016
1 parent 73d0a39 commit 7c54b75
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 35 deletions.
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
}
6 changes: 3 additions & 3 deletions src/ng2/directives/uiView.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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)

This comment has been minimized.

Copy link
@christopherthielen

christopherthielen Sep 20, 2016

Author Contributor

*Metadata removed in ng 2.0.0

// Get the .inputs string array
.map(x => x.inputs)
.reduce(flattenR, [])
Expand Down
65 changes: 47 additions & 18 deletions src/ng2/providers.ts
Original file line number Diff line number Diff line change
@@ -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`
Expand All @@ -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
Expand Down
34 changes: 27 additions & 7 deletions src/ng2/uiRouterNgModule.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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[]
}

Expand Down Expand Up @@ -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 {};
* ```
*
* ---
Expand All @@ -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 };

Expand Down

4 comments on commit 7c54b75

@sheniff
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@christopherthielen Thanks for this! when are you planning to release a new version with this changes? Really looking forward to it to finally stabilize my project into angular 2.0.0 :D Thanks again!

@christopherthielen
Copy link
Contributor Author

@christopherthielen christopherthielen commented on 7c54b75 Sep 16, 2016 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sheniff
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thanks also for the quick response. It's great to use packages that are so properly maintained.

@kolkov
Copy link

@kolkov kolkov commented on 7c54b75 Sep 16, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@christopherthielen Thanks! We look forward to the next version)

Please sign in to comment.