chore(deps): update Angular2 to rc.6 and @angular/router to 3.0.0-rc.2' (#84)

Author: marclaval

README.md

@@ -30,7 +30,6 @@ iOS:
 * OR, `gulp watch` and  open `.dist/app/ngReactNative/ios/ngReactNative.xcodeproj` in Xcode and hit `Run`
 
 Tests:
-* `gulp test.node` to run tests in Node
 * `gulp test.browser` to run tests in Chrome
 
 Doc:

doc/pages/bootstrap.jade

@@ -9,18 +9,21 @@ block content
         To bootstrap an application, you must use the special method `bootstrapReactNative`.
 
         ```
-        import {bootstrapReactNative}
-            from 'angular2-react-native';
-        import {Example} from "./example";
+        import {bootstrapReactNative} from 'angular2-react-native';
+        import {MyAppModule} from "./app/module";
 
-        bootstrapReactNative('example', Example, [/* extra providers */]);
+        bootstrapReactNative('myApp', MyAppModule);
         ```
 
-        In order to use the [Http](./http.html) and [Router](./router.html) modules, extra providers are needed. They can be passed during the bootstrap:
-        ```
-        import {bootstrapReactNative, HTTP_PROVIDERS, ROUTER_PROVIDERS}
-            from 'react-angular2-react-native';
-        import {Example} from "./example";
+        The main module must import the `ReactNativeModule`:
+         ```
+         @NgModule({
+           declarations: [...],
+           imports: [ReactNativeModule, CommonModule],
+           bootstrap: [...]
+         })
+         export class MyAppModule {}
 
-        bootstrapReactNative('example', Example, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);
-        ```
+         ```
+
+        In order to use the [Http](./http.html) and [Router](./router.html) features, extra modules need to be imported in the main module.

doc/pages/http.jade

@@ -8,17 +8,18 @@ block content
         # Http
 
         The http module of Angular 2 can be used as is in applications.
-        The only thing to be done is to bootstrap the application with the right providers (see below).
+        The only thing to be done is to import `ReactNativeHttpModule` in the main module of the application (see below).
 
         Behind the scene, it uses the [Network polyfill](https://facebook.github.io/react-native/docs/network.html) provided by React Native.
 
-        ## bootstrap
+        ## Main module
         ```
-        import {bootstrapReactNative, HTTP_PROVIDERS}
-            from 'angular2-react-native';
-        import {Example} from "./example";
-
-        bootstrapReactNative('example', Example, [HTTP_PROVIDERS]);
+        @NgModule({
+          declarations: [...],
+          imports: [ReactNativeModule, CommonModule, ReactNativeHttpModule],
+          bootstrap: [...]
+        })
+        export class MyAppModule {}
         ```
 
         ## Example

doc/pages/router.jade

@@ -8,17 +8,23 @@ block content
         # Router
 
         The rooter module of Angular 2 can be used as is in applications.
-        The only thing to be done is to bootstrap the application with the right providers (see below), and use the right directives.
+        The only thing to be done is to import `ReactNativeRouterModule` in the main module of the application (see below), and use the static `forRoot` method to configure routes.
 
         It uses a mock of `LocationStrategy`. Manipulating the location triggers a navigation of the router.
 
-        ## bootstrap
+        ## Main module
         ```
-        import {bootstrapReactNative, ROUTER_PROVIDERS}
-            from 'angular2-react-native';
-        import {Example} from "./example";
+        const appRoutes: Routes = [
+          { path: '', component: CompA },
+          { path: 'b', component: CompB }
+        ];
 
-        bootstrapReactNative('example', Example, [ROUTER_PROVIDERS]);
+        @NgModule({
+          declarations: [Example, CompA, CompB, ...],
+          imports: [ReactNativeModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
+          bootstrap: [Example]
+        })
+        export class MyAppModule {}
         ```
 
         ## Directives
@@ -28,9 +34,7 @@ block content
         ## Example
         ```
         import {Component} from '@angular/core';
-        import {RouteConfig} from '@angular/router-deprecated';
         import {LocationStrategy} from '@angular/common';
-        import {ROUTER_DIRECTIVES} from "angular2-react-native";
 
         @Component({
           selector: 'comp-a',
@@ -49,11 +53,6 @@ block content
           }
         }
 
-
-        @RouteConfig([
-          { path: '/', component: CompA, name: 'CompA' },
-          { path: '/b', component: CompB, name: 'CompB' },
-        ])
         @Component({
           selector: 'example',
           template: `

karma-test-shim.js

@@ -31,56 +31,49 @@ System.config({
 System.config(
   {
     defaultJSExtensions: true,
+    paths: {
+      // paths serve as alias
+      'npm:': 'node_modules/'
+    },
     map: {
-      'rxjs': 'node_modules/rxjs',
-      '@angular': 'node_modules/@angular'
+      // angular bundles
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+
+      // angular testing umd bundles
+      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+      '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+      '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+
+      // other
+      'rxjs': 'npm:rxjs'
     },
     packages: {
-      '@angular/core': {
-        main: 'index.js',
-        defaultExtension: 'js'
-      },
-      '@angular/compiler': {
-        main: 'index.js',
-        defaultExtension: 'js'
-      },
-      '@angular/common': {
-        main: 'index.js',
-        defaultExtension: 'js'
-      },
-      '@angular/platform-browser': {
-        main: 'index.js',
-        defaultExtension: 'js'
-      },
-      '@angular/platform-browser-dynamic': {
-        main: 'index.js',
-        defaultExtension: 'js'
-      },
-      '@angular/http': {
-        main: 'index.js',
-        defaultExtension: 'js'
-      },
-      '@angular/router-deprecated': {
-        main: 'index.js',
-        defaultExtension: 'js'
-      },
       'rxjs': {
         defaultExtension: 'js'
       }
     }
   });
 
-Promise.all([
-  System.import('@angular/core/testing'),
-  System.import('@angular/platform-browser-dynamic/testing')
-]).then(function (providers) {
-  var testing = providers[0];
-  var testingBrowser = providers[1];
-
-  testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-    testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
-
-}).then(function() {
+System.import('@angular/core/testing')
+  .then(function(coreTesting){
+    return System.import('@angular/platform-browser-dynamic/testing')
+      .then(function(browserTesting) {
+        coreTesting.TestBed.initTestEnvironment(
+          browserTesting.BrowserDynamicTestingModule,
+          browserTesting.platformBrowserDynamicTesting());
+      });
+  })
+.then(function() {
   // Finally, load all spec files.
   // This will run the tests directly.
   return Promise.all(

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1-alpha.15",
   "description": "A React Native renderer for Angular 2",
   "scripts": {
-    "test": "gulp test.browser/ci && gulp test.node/ci",
+    "test": "gulp test.browser/ci",
     "postinstall": "typings install"
   },
   "repository": {
@@ -48,18 +48,18 @@
     "through2": "~0.6.3"
   },
   "dependencies": {
-    "@angular/common": "v2.0.0-rc.5",
-    "@angular/compiler": "v2.0.0-rc.5",
-    "@angular/core": "v2.0.0-rc.5",
-    "@angular/http": "v2.0.0-rc.5",
-    "@angular/platform-browser": "v2.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "v2.0.0-rc.5",
-    "@angular/platform-server": "v2.0.0-rc.5",
-    "@angular/router-deprecated": "v2.0.0-rc.2",
+    "@angular/common": "v2.0.0-rc.6",
+    "@angular/compiler": "v2.0.0-rc.6",
+    "@angular/core": "v2.0.0-rc.6",
+    "@angular/http": "v2.0.0-rc.6",
+    "@angular/platform-browser": "v2.0.0-rc.6",
+    "@angular/platform-browser-dynamic": "v2.0.0-rc.6",
+    "@angular/platform-server": "v2.0.0-rc.6",
+    "@angular/router": "3.0.0-rc.2",
     "hammerjs": "2.0.6",
     "react-native": "0.32.0",
     "reflect-metadata": "0.1.8",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.11",
     "zone.js": "0.6.17"
   }
 }

sample/samples/android/kitchensink.ts

@@ -1,17 +1,10 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
-import {Router, RouteConfig} from '@angular/router-deprecated';
+import {Router, NavigationEnd} from '@angular/router';
 import {LocationStrategy} from '@angular/common';
 import {StyleSheet, BackAndroid, Alert, NativeModules, processColor} from 'react-native';
 import {DrawerLayout, Toolbar} from 'angular2-react-native';
 
-import {HelloApp} from "./hello";
 import {TodoMVC} from "./../common/todomvc";
-import {GesturesApp} from "./../common/gestures";
-import {WidgetsList} from "./widgets";
-import {WebViewApp} from './../common/webview';
-import {APIsList} from "./apis";
-import {HttpApp} from "./../common/http";
-import {AnimationApp} from './../common/animation';
 
 @Component({
   selector: 'kitchensink-app',
@@ -22,42 +15,35 @@ import {AnimationApp} from './../common/animation';
     <Toolbar [styleSheet]="styles.toolbar" [navIcon]="hamburgerIcon" [overflowIcon]="moreIcon"
     title="Kitchen Sink" titleColor="#FFFFFF" (select)="handleToolbar($event)"></Toolbar>
     <View [styleSheet]="styles.content">
-      <router-outlet></router-outlet>
+      <router-outlet (activate)="_lastActivated = $event"></router-outlet>
     </View>
   </DrawerLayoutSide>
   <DrawerLayoutContent>
     <View [styleSheet]="styles.drawer">
-      <View *ngFor="let item of menuItems" [styleSheet]="styles.menuItem" [routerLink]="['/' + item.as]" rippleFeedback="#00a9e0">
+      <View *ngFor="let item of menuItems" [styleSheet]="styles.menuItem" [routerLink]="item.as" rippleFeedback="#00a9e0">
         <Text [styleSheet]="styles.menuText">{{item.name}}</Text>
       </View>
     </View>
   </DrawerLayoutContent>
 </DrawerLayout>
 `
 })
-@RouteConfig([
-  { path: '/', component: HelloApp, name: 'HelloApp' },
-  { path: '/todomvc', component: TodoMVC, name: 'TodoMVC' },
-  { path: '/gestures', component: GesturesApp, name: 'GesturesApp' },
-  { path: '/widgets', component: WidgetsList, name: 'WidgetsList' },
-  { path: '/webview', component: WebViewApp, name: 'WebViewApp' },
-  { path: '/apis', component: APIsList, name: 'APIsList' },
-  { path: '/http', component: HttpApp, name: 'HttpApp' },
-  { path: '/animation', component: AnimationApp, name: 'AnimationApp'}
-])
 export class KitchenSinkApp {
-  @ViewChild(TodoMVC) viewChild: TodoMVC;
+  private _lastActivated: any;
+  private _todoMVC: TodoMVC;
   @ViewChild(DrawerLayout) drawerLayout: DrawerLayout;
   @ViewChild(Toolbar) toolbar: Toolbar;
   hamburgerIcon: any = require('../../assets/icon_hamburger.png');
   moreIcon: any = require('../../assets/icon_more.png');
-  menuItems: Array<any> = [{name: 'Hello world', as: 'HelloApp'}, {name: 'Components', as: 'WidgetsList'}, {name: 'WebView', as: 'WebViewApp'}, {name: 'APIs', as: 'APIsList'},
-    {name: 'TodoMVC', as: 'TodoMVC'}, {name: 'Gestures', as: 'GesturesApp'}, {name: 'Http', as: 'HttpApp'}, {name: 'Animation', as: 'AnimationApp'}]
+  menuItems: Array<any> = [{name: 'Hello world', as: ''}, {name: 'Components', as: 'widgets'}, {name: 'WebView', as: 'webview'}, {name: 'APIs', as: 'apis'},
+    {name: 'TodoMVC', as: 'todomvc'}, {name: 'Gestures', as: 'gestures'}, {name: 'Http', as: 'http'}, {name: 'Animation', as: 'animation'}]
   styles: any;
   _el : any = null;
   constructor(el: ElementRef, private router: Router, private locationStrategy: LocationStrategy) {
-    this.router.subscribe((res) => {
-      this._afterNavigate(res.instruction.urlPath);
+    this.router.events.subscribe((res) => {
+      if (res instanceof NavigationEnd) {
+        this._afterNavigate(res.url.substring(1));
+      }
     })
     NativeModules.StatusBarManager.setColor(processColor('#00a9e0'), true);
 
@@ -114,25 +100,27 @@ export class KitchenSinkApp {
     this.drawerLayout.closeDrawer();
     if (url == 'todomvc') {
       this._addMoreInToolbar();
+      this._todoMVC = this._lastActivated;
     } else {
       this._removeMoreInToolbar();
+      this._todoMVC = null;
     }
   }
 
   handleToolbar(event: any) {
     var position = event.position;
     if (position == -1) {
       this.drawerLayout.openDrawer();
-    } else if (position == 0 && this.viewChild) {
-      this.viewChild.reset();
-    } else if (position == 1 && this.viewChild) {
-      this.viewChild.empty();
-    } else if (position == 2 && this.viewChild) {
-      this.viewChild.full();
-    } else if (position == 3 && this.viewChild) {
-      this.viewChild.save();
-    } else if (position == 4 && this.viewChild) {
-      this.viewChild.load();
+    } else if (position == 0 && this._todoMVC) {
+      this._todoMVC.reset();
+    } else if (position == 1 && this._todoMVC) {
+      this._todoMVC.empty();
+    } else if (position == 2 && this._todoMVC) {
+      this._todoMVC.full();
+    } else if (position == 3 && this._todoMVC) {
+      this._todoMVC.save();
+    } else if (position == 4 && this._todoMVC) {
+      this._todoMVC.load();
     }
   }
 

sample/samples/android/module.ts

@@ -1,14 +1,32 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {ReactNativeModule} from 'angular2-react-native';
+import {Routes} from '@angular/router';
+import {ReactNativeModule, ReactNativeRouterModule, ReactNativeHttpModule} from 'angular2-react-native';
 import {KitchenSinkApp}   from './kitchensink';
 
+import {HelloApp} from "./hello";
 import {TodoMVC, TodoItem} from '../common/todomvc';
-import {Ball} from '../common/animation';
+import {GesturesApp} from "./../common/gestures";
+import {WidgetsList} from "./widgets";
+import {WebViewApp} from './../common/webview';
+import {APIsList} from "./apis";
+import {HttpApp} from "./../common/http";
+import {AnimationApp, Ball} from './../common/animation';
+
+const appRoutes: Routes = [
+  { path: '', component: HelloApp },
+  { path: 'todomvc', component: TodoMVC },
+  { path: 'gestures', component: GesturesApp },
+  { path: 'widgets', component: WidgetsList },
+  { path: 'webview', component: WebViewApp },
+  { path: 'apis', component: APIsList },
+  { path: 'http', component: HttpApp },
+  { path: 'animation', component: AnimationApp }
+];
 
 @NgModule({
-  declarations: [KitchenSinkApp, TodoMVC, TodoItem, Ball],
-  imports: [ReactNativeModule, CommonModule],
+  declarations: [KitchenSinkApp, HelloApp, TodoMVC, TodoItem, GesturesApp, WidgetsList, WebViewApp, APIsList, HttpApp, AnimationApp, Ball],
+  imports: [ReactNativeModule, ReactNativeHttpModule, CommonModule, ReactNativeRouterModule.forRoot(appRoutes)],
   bootstrap: [KitchenSinkApp]
 })
 export class KitchenSinkModule {}