Update Angular 2 example to Angular 2.0.0 final release

examples/demo-template/angular2-product-app/src/main/webapp/.gitignore

@@ -0,0 +1,4 @@
+app/*.js
+app/*.js.map
+node_modules
+typings

examples/demo-template/angular2-product-app/src/main/webapp/app/app.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { Http, Headers, RequestOptions, Response } from '@angular/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+import { KeycloakService } from './keycloak.service';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <div id="content-area" class="col-md-9" role="main">
+      <div id="content">
+        <h1>Angular2 Product (Beta)</h1>
+        <h2><span>Products</span></h2>
+        <button type="button" (click)="logout()">Sign Out</button>
+        <button type="button" (click)="reloadData()">Reload</button>
+        <table class="table" [hidden]="!products.length">
+          <thead>
+          <tr>
+            <th>Product Listing</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr *ngFor="let p of products">
+            <td>{{p}}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+`
+})
+export class AppComponent {
+  products: string[] = [];
+
+  constructor(private http: Http, private kc: KeycloakService) {}
+
+  logout() {
+    this.kc.logout();
+  }
+
+  reloadData() {
+    //angular dont have http interceptor yet
+
+    this.kc.getToken()
+      .then(token => {
+        let headers = new Headers({
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + token
+        });
+
+        let options = new RequestOptions({ headers });
+
+        this.http.get('/database/products', options)
+          .map(res => res.json())
+          .subscribe(prods => this.products = prods,
+            error => console.log(error));
+      })
+      .catch(error => console.log(error));
+  }
+
+  private handleError(error: Response) {
+    console.error(error);
+    return Observable.throw(error.json().error || 'Server error');
+  }
+}

examples/demo-template/angular2-product-app/src/main/webapp/app/app.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
+import { KeycloakService } from './keycloak.service';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    HttpModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  providers: [
+    KeycloakService,
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}

examples/demo-template/angular2-product-app/src/main/webapp/app/app.ts

@@ -1,78 +0,0 @@
-import {Http, Headers,
-    RequestOptions, Response}   from 'angular2/http';
-import {Component}              from 'angular2/core';
-import {Observable}             from 'rxjs/Observable';
-import {KeycloakService}        from './keycloak';
-
-
-
-
-@Component({
-    selector: 'my-app',
-    template:
-`
-<div id="content-area" class="col-md-9" role="main">
-    <div id="content">
-        <h1>Angular2 Product (Beta)</h1>
-        <h2><span>Products</span></h2>
-       
-        <button type="button" (click)="logout()">Sign Out</button>
-        <button type="button" (click)="reloadData()">Reload</button>
-        <table class="table" [hidden]="!products.length">
-            <thead>
-            <tr>
-                <th>Product Listing</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="#p of products">
-                <td>{{p}}</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-</div>
-`
-})
-export class AppComponent {
-
-    constructor(private _kc:KeycloakService, private http:Http){ }
-
-    products : string[] = [];
-
-    logout(){
-        this._kc.logout();
-    }
-
-    reloadData() {
-        //angular dont have http interceptor yet
-
-        this._kc.getToken().then(
-            token=>{
-                let headers = new Headers({
-                        'Accept': 'application/json',
-                        'Authorization': 'Bearer ' + token
-                    });
-
-                let options = new RequestOptions({ headers: headers });
-
-                this.http.get('/database/products', options)
-                .map(res => <string[]> res.json())
-                .subscribe(
-                     prods => this.products = prods,
-                     error =>  console.log(error));
-
-            },
-            error=>{
-                console.log(error);
-            }
-        );
-
-    }
-
-    private handleError (error: Response) {
-        console.error(error);
-        return Observable.throw(error.json().error || 'Server error');
-    }
-
-}

examples/demo-template/angular2-product-app/src/main/webapp/app/keycloak.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+
+declare var Keycloak: any;
+
+@Injectable()
+export class KeycloakService {
+  static auth: any = {};
+
+  static init(): Promise<any> {
+    let keycloakAuth: any = new Keycloak('keycloak.json');
+    KeycloakService.auth.loggedIn = false;
+
+      return new Promise((resolve, reject) => {
+        keycloakAuth.init({ onLoad: 'login-required' })
+          .success(() => {
+            KeycloakService.auth.loggedIn = true;
+            KeycloakService.auth.authz = keycloakAuth;
+            KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/protocol/openid-connect/logout?redirect_uri=/angular2-product/index.html";
+            resolve();
+          })
+          .error(() => {
+            reject();
+          });
+      });
+    }
+
+  logout() {
+    console.log('*** LOGOUT');
+    KeycloakService.auth.loggedIn = false;
+    KeycloakService.auth.authz = null;
+
+    window.location.href = KeycloakService.auth.logoutUrl;
+  }
+
+  getToken(): Promise<string> {
+    return new Promise<string>((resolve, reject) => {
+      if (KeycloakService.auth.authz.token) {
+        KeycloakService.auth.authz.updateToken(5)
+          .success(() => {
+            resolve(<string>KeycloakService.auth.authz.token);
+          })
+          .error(() => {
+            reject('Failed to refresh token');
+          });
+      }
+    });
+  }
+}

examples/demo-template/angular2-product-app/src/main/webapp/app/keycloak.ts

@@ -1,49 +0,0 @@
-import {Injectable} from 'angular2/core';
-
-
-declare var Keycloak: any;
-
-@Injectable()
-export class KeycloakService {
-
-    static auth : any = {};
-
-    static init() : Promise<any>{
-        let keycloakAuth : any = new Keycloak('keycloak.json');
-        KeycloakService.auth.loggedIn = false;
-
-        return new Promise((resolve,reject)=>{
-            keycloakAuth.init({ onLoad: 'login-required' })
-                .success( () => {
-                    KeycloakService.auth.loggedIn = true;
-                    KeycloakService.auth.authz = keycloakAuth;
-                    KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/tokens/logout?redirect_uri=/angular2-product/index.html";
-                    resolve(null);
-                })
-                .error(()=> {
-                    reject(null);
-                });
-        });
-    }
-
-    logout(){
-        console.log('*** LOGOUT');
-        KeycloakService.auth.loggedIn = false;
-        KeycloakService.auth.authz = null;
-
-        window.location.href = KeycloakService.auth.logoutUrl;
-    }
-
-    getToken(): Promise<string>{
-        return new Promise<string>((resolve,reject)=>{
-            if (KeycloakService.auth.authz.token) {
-                KeycloakService.auth.authz.updateToken(5).success(function() {
-                    resolve(<string>KeycloakService.auth.authz.token);
-                })
-                .error(function() {
-                    reject('Failed to refresh token');
-                });
-            }
-        });
-    }
-}

examples/demo-template/angular2-product-app/src/main/webapp/app/main.ts

@@ -1,14 +1,11 @@
-import 'rxjs/Rx';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {bootstrap}    from 'angular2/platform/browser';
+import { AppModule } from './app.module';
-import {HTTP_BINDINGS} from 'angular2/http';
-import {KeycloakService} from './keycloak';
-import {AppComponent} from './app';
 
-KeycloakService.init().then(
+import {KeycloakService} from './keycloak.service';
-    o=>{
+
-        bootstrap(AppComponent,[HTTP_BINDINGS, KeycloakService]);
+KeycloakService.init()
-    },
+  .then(() => {
-    x=>{
+    const platform = platformBrowserDynamic();
-        window.location.reload();
+    platform.bootstrapModule(AppModule);
-    }
+  })
-);
+  .catch(() => window.location.reload());

examples/demo-template/angular2-product-app/src/main/webapp/index.html

@@ -2,48 +2,23 @@
 <html>
   <head>
     <title>Angular 2 QuickStart</title>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <!-- 1. Load libraries -->
-
+    <!-- Polyfill(s) for older browsers -->
-
+    <script src="node_modules/core-js/client/shim.min.js"></script>
-
+    <script src="node_modules/zone.js/dist/zone.js"></script>
-
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="/auth/js/keycloak.js"></script>
+    <!-- 2. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
   </head>
-
   <!-- 3. Display the application -->
   <body>
     <my-app>Loading...</my-app>
-
-
-
-    <!-- 1. Load libraries -->
-    <!-- IE required polyfills, in this exact order -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
-
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
-    <script src="node_modules/angular2/bundles/http.js"></script>
-
-
-    <script src="/auth/js/keycloak.js"></script>
-
-    <!-- 2. Configure SystemJS -->
-    <script>
-      System.config({
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/main')
-            .then(null, console.error.bind(console));
-    </script>
   </body>
-
 </html>

examples/demo-template/angular2-product-app/src/main/webapp/package.json

@@ -2,24 +2,36 @@
   "name": "angular2-product-app",
   "version": "1.0.0",
   "scripts": {
+    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
+    "lite": "lite-server",
+    "postinstall": "typings install",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
-    "lite": "lite-server",
+    "typings": "typings"
-    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.3",
+    "@angular/common": "2.0.0",
-    "systemjs": "0.19.6",
+    "@angular/compiler": "2.0.0",
-    "es6-promise": "^3.0.2",
+    "@angular/core": "2.0.0",
-    "es6-shim": "^0.33.3",
+    "@angular/forms": "2.0.0",
-    "reflect-metadata": "0.1.2",
+    "@angular/http": "2.0.0",
-    "rxjs": "5.0.0-beta.0",
+    "@angular/platform-browser": "2.0.0",
-    "zone.js": "0.5.11"
+    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/router": "3.0.0",
+    "@angular/upgrade": "2.0.0",
+    "angular2-in-memory-web-api": "0.0.20",
+    "bootstrap": "^3.3.6",
+    "core-js": "^2.4.1",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.12",
+    "systemjs": "0.19.27",
+    "zone.js": "^0.6.21"
   },
   "devDependencies": {
-    "concurrently": "^1.0.0",
+    "concurrently": "^2.2.0",
-    "lite-server": "^2.0.1",
+    "lite-server": "^2.2.2",
-    "typescript": "^1.7.5"
+    "typescript": "^2.0.2",
+    "typings": "^1.3.2"
   }
 }

examples/demo-template/angular2-product-app/src/main/webapp/systemjs.config.js

@@ -0,0 +1,43 @@
+/**
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    paths: {
+      // paths serve as alias
+      'npm:': 'node_modules/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      app: 'app',
+      // 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/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      // other libraries
+      'rxjs':                       'npm:rxjs',
+      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.js',
+        defaultExtension: 'js'
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      },
+      'angular2-in-memory-web-api': {
+        main: './index.js',
+        defaultExtension: 'js'
+      }
+    }
+  });
+})(this);

examples/demo-template/angular2-product-app/src/main/webapp/tsconfig.json

@@ -1,15 +1,12 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "system",
+    "module": "commonjs",
     "moduleResolution": "node",
-    "sourceMap": false,
+    "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false
-  },
+  }
-  "exclude": [
-    "node_modules"
-  ]
 }

examples/demo-template/angular2-product-app/src/main/webapp/typings.json

@@ -0,0 +1,7 @@
+{
+  "globalDependencies": {
+    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
+    "node": "registry:dt/node#6.0.0+20160909174046"
+  }
+}