From 9a80ef0a448e5aba926cde53a07bbdcfea122f95 Mon Sep 17 00:00:00 2001 From: Ryan Chenkie Date: Thu, 7 Jan 2016 19:18:53 -0700 Subject: [PATCH 1/2] (fix) Update to work with agular2 beta 0 --- CHANGELOG.md | 6 ++ LICENSE => LICENSE.txt | 0 index.html | 5 +- package.json | 55 ++++++------ src/app/LoggedInOutlet.ts | 10 +-- src/app/app.ts | 12 +-- src/common/BrowserDomAdapter.ts | 3 - src/common/headers.ts | 5 ++ src/common/jitInjectables.ts | 7 -- src/home/home.html | 10 +-- src/home/home.ts | 50 +++++------ src/index.ts | 17 +++- src/login/login.ts | 42 ++++----- src/signup/signup.ts | 42 ++++----- src/utils/fetch.ts | 18 ---- tsconfig.json | 32 ++++--- tslint.json | 55 ++++++++++++ typedoc.json | 15 ++++ typings.json | 16 ++++ typings/_custom/webpack.d.ts | 4 - typings/whatwg-fetch/whatwg-fetch.d.ts | 84 ------------------ webpack.config.js | 118 ++++++++++++------------- 22 files changed, 294 insertions(+), 312 deletions(-) rename LICENSE => LICENSE.txt (100%) delete mode 100644 src/common/BrowserDomAdapter.ts create mode 100644 src/common/headers.ts delete mode 100644 src/common/jitInjectables.ts delete mode 100644 src/utils/fetch.ts create mode 100644 tslint.json create mode 100644 typedoc.json create mode 100644 typings.json delete mode 100644 typings/_custom/webpack.d.ts delete mode 100644 typings/whatwg-fetch/whatwg-fetch.d.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index e69de29..6dd6d87 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -0,0 +1,6 @@ +# v0.0.1 - Update to Angular 2 Beta (2016-01-07) + +* Upgraded to work with Angular 2 Beta 0 +* Removed Fetch API in favor of Angular 2 Http +* Included [angular2-jwt](https://github.com/auth0/angular2-jwt) for authenticated API calls + diff --git a/LICENSE b/LICENSE.txt similarity index 100% rename from LICENSE rename to LICENSE.txt diff --git a/index.html b/index.html index 354b57f..85fd67c 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,7 @@ - - + @@ -24,7 +23,7 @@ - + diff --git a/package.json b/package.json index 77d0582..8381ba4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular2-authentication-sample", - "version": "0.0.0", + "version": "0.0.1", "description": "This is a sample that shows how to add authentication to an Angular 2 (ng2) app", "main": "", "scripts": { @@ -15,7 +15,8 @@ }, "contributors": [ "Martin Gontovnikas (http://gon.to) ", - "PatrickJS " + "PatrickJS ", + "Ryan Chenkie " ], "license": "MIT", "bugs": { @@ -23,32 +24,34 @@ }, "homepage": "https://github.com/auth0/angular2-authentication-sample", "dependencies": { - "angular2": "2.0.0-alpha.44", - "raw-loader": "0.5.1", - "reflect-metadata": "0.1.2", - "rtts_assert": "2.0.0-alpha.37", - "rx": "4.0.6", - "zone.js": "0.5.8", - "bootstrap": "3.3.5", - "jwt-decode": "1.4.0", - "whatwg-fetch": "0.10.0", - "when": "3.7.3" + "angular2": "2.0.0-beta.0", + "angular2-jwt": "0.1.4", + "bootstrap": "^3.3.6", + "es6-promise": "^3.0.2", + "es6-shim": "^0.33.3", + "es7-reflect-metadata": "^1.4.0", + "jwt-decode": "^1.5.0", + "rxjs": "5.0.0-beta.0", + "zone.js": "0.5.10" }, "devDependencies": { - "css-loader": "0.20.1", + "css-loader": "^0.23.0", "exports-loader": "0.6.2", - "expose-loader": "0.7.0", - "file-loader": "0.8.4", - "html-webpack-plugin": "1.6.2", - "imports-loader": "0.6.5", - "json-loader": "0.5.3", - "loader-utils": "0.2.11", - "style-loader": "0.12.4", - "ts-loader": "0.5.6", - "typescript": "1.6.2", - "url-loader": "0.5.6", - "webpack": "1.12.2", - "webpack-dev-server": "1.12.1", - "xtend": "4.0.0" + "expose-loader": "^0.7.1", + "file-loader": "^0.8.4", + "imports-loader": "^0.6.4", + "json-loader": "^0.5.3", + "raw-loader": "0.5.1", + "style-loader": "^0.13.0", + "ts-loader": "^0.7.2", + "tsconfig-lint": "^0.2.0", + "tslint": "^3.2.0", + "tslint-loader": "^2.1.0", + "typedoc": "^0.3.12", + "typescript": "^1.7.3", + "typings": "^0.3.1", + "url-loader": "^0.5.6", + "webpack": "^1.12.9", + "webpack-dev-server": "^1.12.1" } } diff --git a/src/app/LoggedInOutlet.ts b/src/app/LoggedInOutlet.ts index 44f477f..7c70d51 100644 --- a/src/app/LoggedInOutlet.ts +++ b/src/app/LoggedInOutlet.ts @@ -1,4 +1,4 @@ -import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2'; +import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core'; import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router'; import {Login} from '../login/login'; @@ -6,11 +6,11 @@ import {Login} from '../login/login'; selector: 'router-outlet' }) export class LoggedInRouterOutlet extends RouterOutlet { - publicRoutes:any; - private parentRouter:Router; + publicRoutes: any; + private parentRouter: Router; - constructor(_elementRef:ElementRef, _loader:DynamicComponentLoader, - _parentRouter:Router, @Attribute('name') nameAttr:string) { + constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader, + _parentRouter: Router, @Attribute('name') nameAttr: string) { super(_elementRef, _loader, _parentRouter, nameAttr); this.parentRouter = _parentRouter; diff --git a/src/app/app.ts b/src/app/app.ts index 33ed910..66eaf3a 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,4 +1,4 @@ -import {View, Component} from 'angular2/angular2'; +import {View, Component} from 'angular2/core'; import {Location, RouteConfig, RouterLink, Router} from 'angular2/router'; import {LoggedInRouterOutlet} from './LoggedInOutlet'; @@ -8,7 +8,6 @@ import {Signup} from '../signup/signup'; let template = require('./app.html'); - @Component({ selector: 'auth-app' }) @@ -17,11 +16,12 @@ let template = require('./app.html'); directives: [ LoggedInRouterOutlet ] }) @RouteConfig([ - { path: '/', redirectTo: '/home' }, - { path: '/home', as: 'Home', component: Home }, - { path: '/login', as: 'Login', component: Login }, - { path: '/signup', as: 'Signup', component: Signup } + { path: '/', redirectTo: ['/Home'] }, + { path: '/home', component: Home, as: 'Home' }, + { path: '/login', component: Login, as: 'Login' }, + { path: '/signup', component: Signup, as: 'Signup' } ]) + export class App { constructor(public router: Router) { } diff --git a/src/common/BrowserDomAdapter.ts b/src/common/BrowserDomAdapter.ts deleted file mode 100644 index a451b4a..0000000 --- a/src/common/BrowserDomAdapter.ts +++ /dev/null @@ -1,3 +0,0 @@ -/// -import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; -BrowserDomAdapter.makeCurrent(); diff --git a/src/common/headers.ts b/src/common/headers.ts new file mode 100644 index 0000000..8c19148 --- /dev/null +++ b/src/common/headers.ts @@ -0,0 +1,5 @@ +import { Headers } from 'angular2/http'; + +export const contentHeaders = new Headers(); +contentHeaders.append('Accept', 'application/json'); +contentHeaders.append('Content-Type', 'application/json'); diff --git a/src/common/jitInjectables.ts b/src/common/jitInjectables.ts deleted file mode 100644 index 3453398..0000000 --- a/src/common/jitInjectables.ts +++ /dev/null @@ -1,7 +0,0 @@ -/// -import {ChangeDetection, JitChangeDetection} from 'angular2/change_detection'; -import {bind} from 'angular2/di'; - -export var jitInjectables = [ - bind(ChangeDetection).toClass(JitChangeDetection) -]; diff --git a/src/home/home.html b/src/home/home.html index 1d57940..01e9213 100644 --- a/src/home/home.html +++ b/src/home/home.html @@ -1,14 +1,14 @@

Welcome to the angular2 authentication sample!

-

Your JWT is:

- 
{{ jwt }}
- 
{{ decodedJwt | json }}
+

Your JWT is:

+ 
{{ jwt }}
+ 
{{ decodedJwt | json }}

Click any of the buttons to call an API and get a response

Call Anonymous API

Call Secure API

Logout

-

The response of calling the {{api}} API is:

-

{{response}}

+

The response of calling the {{api}} API is:

+

{{response}}

diff --git a/src/home/home.ts b/src/home/home.ts index df445e8..2a18a30 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -1,8 +1,9 @@ -import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'; +import { Component, View } from 'angular2/core'; +import { CORE_DIRECTIVES } from 'angular2/common'; +import { Http, Headers } from 'angular2/http'; +import { AuthHttp } from 'angular2-jwt'; import { Router } from 'angular2/router'; -import {status, text} from '../utils/fetch' - let styles = require('./home.css'); let template = require('./home.html'); @@ -16,12 +17,12 @@ let template = require('./home.html'); styles: [styles] }) export class Home { - jwt:string; - decodedJwt:string; - response:string; - api:string; + jwt: string; + decodedJwt: string; + response: string; + api: string; - constructor(public router:Router) { + constructor(public router: Router, public http: Http, public authHttp: AuthHttp) { this.jwt = localStorage.getItem('jwt'); this.decodedJwt = this.jwt && window.jwt_decode(this.jwt); } @@ -41,22 +42,21 @@ export class Home { _callApi(type, url) { this.response = null; - this.api = type; - window.fetch(url, { - method: 'GET', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', - 'Authorization': 'bearer ' + this.jwt - } - }) - .then(status) - .then(text) - .then((response) => { - this.response = response; - }) - .catch((error) => { - this.response = error.message; - }); + if (type === 'Anonymous') { + // For non-protected routes, just use Http + this.http.get(url) + .subscribe( + response => this.response = response.text(), + error => this.response = error.json().message + ); + } + if (type === 'Secured') { + // For protected routes, use AuthHttp + this.authHttp.get(url) + .subscribe( + response => this.response = response.text(), + error => this.response = error.json().message + ); + } } } diff --git a/src/index.ts b/src/index.ts index 00eaa03..604c6b8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,9 @@ -import { bootstrap, FORM_PROVIDERS } from 'angular2/angular2'; +import { bootstrap } from 'angular2/platform/browser'; +import { provide } from 'angular2/core'; +import { FORM_PROVIDERS } from 'angular2/common'; import { ROUTER_PROVIDERS } from 'angular2/router'; -import { HTTP_PROVIDERS } from 'angular2/http'; +import { Http, HTTP_PROVIDERS } from 'angular2/http'; +import { AuthConfig, AuthHttp } from 'angular2-jwt'; import { App } from './app/app'; @@ -9,6 +12,14 @@ bootstrap( [ FORM_PROVIDERS, ROUTER_PROVIDERS, - HTTP_PROVIDERS + HTTP_PROVIDERS, + provide(AuthHttp, { + useFactory: (http) => { + return new AuthHttp(new AuthConfig({ + tokenName: 'jwt' + }), http); + }, + deps: [Http] + }) ] ); diff --git a/src/login/login.ts b/src/login/login.ts index 28e9622..23d24e6 100644 --- a/src/login/login.ts +++ b/src/login/login.ts @@ -1,6 +1,8 @@ -import {Component, View} from 'angular2/angular2'; +import { Component, View } from 'angular2/core'; import { Router, RouterLink } from 'angular2/router'; -import {status, json} from '../utils/fetch' +import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common'; +import { Http, Headers } from 'angular2/http'; +import { contentHeaders } from '../common/headers'; let styles = require('./login.css'); let template = require('./login.html'); @@ -9,36 +11,28 @@ let template = require('./login.html'); selector: 'login' }) @View({ - directives: [RouterLink], + directives: [RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES ], template: template, styles: [ styles ] }) export class Login { - constructor(public router: Router) { + constructor(public router: Router, public http: Http) { } login(event, username, password) { event.preventDefault(); - window.fetch('http://localhost:3001/sessions/create', { - method: 'POST', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - username, password - }) - }) - .then(status) - .then(json) - .then((response:any) => { - localStorage.setItem('jwt', response.id_token); - this.router.parent.navigateByUrl('/home'); - }) - .catch((error) => { - alert(error.message); - console.log(error.message); - }); + let body = JSON.stringify({ username, password }); + this.http.post('http://localhost:3001/sessions/create', body, { headers: contentHeaders }) + .subscribe( + response => { + localStorage.setItem('jwt', response.json().id_token); + this.router.parent.navigateByUrl('/home'); + }, + error => { + alert(error.json().message); + console.log(error.json().message); + } + ); } signup(event) { diff --git a/src/signup/signup.ts b/src/signup/signup.ts index c903cf9..20707d6 100644 --- a/src/signup/signup.ts +++ b/src/signup/signup.ts @@ -1,6 +1,8 @@ -import {CORE_DIRECTIVES, Component, View} from 'angular2/angular2'; -import {status, json} from '../utils/fetch'; +import { Component, View } from 'angular2/core'; import { Router, RouterLink } from 'angular2/router'; +import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common'; +import { Http } from 'angular2/http'; +import { contentHeaders } from '../common/headers'; let styles = require('./signup.css'); let template = require('./signup.html'); @@ -9,36 +11,28 @@ let template = require('./signup.html'); selector: 'signup' }) @View({ - directives: [ RouterLink, CORE_DIRECTIVES ], + directives: [ RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES ], template: template, styles: [ styles ] }) export class Signup { - constructor(public router: Router) { + constructor(public router: Router, public http: Http) { } signup(event, username, password) { event.preventDefault(); - window.fetch('http://localhost:3001/users', { - method: 'POST', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - username, password - }) - }) - .then(status) - .then(json) - .then((response:any) => { - localStorage.setItem('jwt', response.id_token); - this.router.navigateByUrl('/home'); - }) - .catch((error) => { - alert(error.message); - console.log(error.message); - }); + let body = JSON.stringify({ username, password }); + this.http.post('http://localhost:3001/users', body, { headers: contentHeaders }) + .subscribe( + response => { + localStorage.setItem('jwt', response.json().id_token); + this.router.parent.navigateByUrl('/home'); + }, + error => { + alert(error.json().message); + console.log(error.json().message); + } + ); } login(event) { diff --git a/src/utils/fetch.ts b/src/utils/fetch.ts deleted file mode 100644 index 9e64aa9..0000000 --- a/src/utils/fetch.ts +++ /dev/null @@ -1,18 +0,0 @@ -/// - -export function status(response) { - if (response.status >= 200 && response.status < 300) { - return Promise.resolve(response); - } - return response.text().then(function(text) { - throw new Error(text); - }); -} - -export function text(response) { - return response.text(); -} - -export function json(response) { - return response.json(); -} diff --git a/tsconfig.json b/tsconfig.json index c9fa060..a53f5b1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,22 +1,26 @@ { - "version": "1.5.0", "compilerOptions": { - "target": "es5", + "target": "ES5", "module": "commonjs", - "declaration": true, - "noImplicitAny": false, - "removeComments": false, - "noLib": false, + "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, - "sourceMap": true, - "listFiles": true, - "outDir": "dist" + "sourceMap": true }, - "exclude": [ - "node_modules" - ], "files": [ - "src/index.ts" - ] + "typings/tsd.d.ts", + "src/app/app.ts", + "src/home/home.ts", + "src/login/login.ts", + "src/signup/signup.ts", + "src/index.ts", + "src/common/headers.ts" + ], + "filesGlob": [ + "./src/**/*.ts", + "!./node_modules/**/*.ts" + ], + "compileOnSave": false, + "buildOnSave": false, + "atom": { "rewriteTsconfig": true } } diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..e9c78dc --- /dev/null +++ b/tslint.json @@ -0,0 +1,55 @@ +{ + "rules": { + "class-name": true, + "curly": false, + "eofline": true, + "indent": "spaces", + "max-line-length": [ + true, + 100 + ], + "member-ordering": [ + true, + "public-before-private", + "static-before-instance", + "variables-before-functions" + ], + "no-arg": true, + "no-construct": true, + "no-duplicate-key": true, + "no-duplicate-variable": true, + "no-empty": false, + "no-eval": true, + "no-trailing-comma": true, + "no-trailing-whitespace": true, + "no-unused-expression": true, + "no-unused-variable": false, + "no-unreachable": true, + "no-use-before-declare": true, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "quotemark": [ + true, + "single" + ], + "semicolon": true, + "triple-equals": [ + true, + "allow-null-check" + ], + "variable-name": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ] + } +} \ No newline at end of file diff --git a/typedoc.json b/typedoc.json new file mode 100644 index 0000000..1a9f282 --- /dev/null +++ b/typedoc.json @@ -0,0 +1,15 @@ +{ + "mode": "modules", + "out": "doc", + "theme": "default", + "ignoreCompilerErrors": "true", + "experimentalDecorators": "true", + "emitDecoratorMetadata": "true", + "target": "ES5", + "moduleResolution": "node", + "preserveConstEnums": "true", + "stripInternal": "true", + "suppressExcessPropertyErrors": "true", + "suppressImplicitAnyIndexErrors": "true", + "module": "commonjs" +} \ No newline at end of file diff --git a/typings.json b/typings.json new file mode 100644 index 0000000..b903cd2 --- /dev/null +++ b/typings.json @@ -0,0 +1,16 @@ +{ + "dependencies": { + "es6-promise": "github:typings/typed-es6-promise#9243c53f70fb4909ed7cce3094bec221b9fb6d5f" + }, + "devDependencies": {}, + "ambientDependencies": { + "angular-protractor": "github:angular/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9", + "es6-shim": "github:angular/DefinitelyTyped/es6-shim/es6-shim.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9", + "hammerjs": "github:angular/DefinitelyTyped/hammerjs/hammerjs.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9", + "jasmine": "github:angular/DefinitelyTyped/jasmine/jasmine.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9", + "node": "github:angular/DefinitelyTyped/node/node.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9", + "selenium-webdriver": "github:angular/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9", + "webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4", + "zone": "github:angular/DefinitelyTyped/zone/zone.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9" + } +} \ No newline at end of file diff --git a/typings/_custom/webpack.d.ts b/typings/_custom/webpack.d.ts deleted file mode 100644 index 3d81807..0000000 --- a/typings/_custom/webpack.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare var require: any; -declare var __filename: string; -declare var __dirname: string; -declare var global: any; diff --git a/typings/whatwg-fetch/whatwg-fetch.d.ts b/typings/whatwg-fetch/whatwg-fetch.d.ts deleted file mode 100644 index 23c353c..0000000 --- a/typings/whatwg-fetch/whatwg-fetch.d.ts +++ /dev/null @@ -1,84 +0,0 @@ -// Type definitions for fetch API -// Project: https://github.com/github/fetch -// Definitions by: Ryan Graham -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare class Request { - constructor(input: string|Request, init?:RequestInit); - method: string; - url: string; - headers: Headers; - context: RequestContext; - referrer: string; - mode: RequestMode; - credentials: RequestCredentials; - cache: RequestCache; -} - -interface RequestInit { - method?: string; - headers?: HeaderInit|{ [index: string]: string }; - body?: BodyInit; - mode?: RequestMode; - credentials?: RequestCredentials; - cache?: RequestCache; -} - -declare enum RequestContext { - "audio", "beacon", "cspreport", "download", "embed", "eventsource", "favicon", "fetch", - "font", "form", "frame", "hyperlink", "iframe", "image", "imageset", "import", - "internal", "location", "manifest", "object", "ping", "plugin", "prefetch", "script", - "serviceworker", "sharedworker", "subresource", "style", "track", "video", "worker", - "xmlhttprequest", "xslt" -} -declare enum RequestMode { "same-origin", "no-cors", "cors" } -declare enum RequestCredentials { "omit", "same-origin", "include" } -declare enum RequestCache { "default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached" } - -declare class Headers { - append(name: string, value: string): void; - delete(name: string):void; - get(name: string): string; - getAll(name: string): Array; - has(name: string): boolean; - set(name: string, value: string): void; -} - -declare class Body { - bodyUsed: boolean; - arrayBuffer(): Promise; - blob(): Promise; - formData(): Promise; - json(): Promise; - text(): Promise; -} -declare class Response extends Body { - constructor(body?: BodyInit, init?: ResponseInit); - error(): Response; - redirect(url: string, status: number): Response; - type: ResponseType; - url: string; - status: number; - ok: boolean; - statusText: string; - headers: Headers; - clone(): Response; -} - -declare enum ResponseType { "basic", "cors", "default", "error", "opaque" } - -declare class ResponseInit { - status: number; - statusText: string; - headers: HeaderInit; -} - -declare type HeaderInit = Headers|Array; -declare type BodyInit = Blob|FormData|string; -declare type RequestInfo = Request|string; - -interface Window { - fetch(url: string, init?: RequestInit): Promise; -} diff --git a/webpack.config.js b/webpack.config.js index c40882f..db7d4aa 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,9 @@ -var webpack = require('webpack'); -var HtmlWebpackPlugin = require("html-webpack-plugin"); -var path = require('path'); var sliceArgs = Function.prototype.call.bind(Array.prototype.slice); +var toString = Function.prototype.call.bind(Object.prototype.toString); +var path = require('path'); +var webpack = require('webpack'); +// Webpack Plugins +var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; module.exports = { devtool: 'source-map', @@ -9,22 +11,25 @@ module.exports = { // entry: { - angular2: [ - // Angular 2 Deps - 'zone.js', + 'vendor': [ + // Polyfills + 'es6-shim', + 'es6-promise', 'reflect-metadata', - - //'./src/common/BrowserDomAdapter', - - 'angular2/angular2', + 'zone.js/dist/zone-microtask', + 'zone.js/dist/long-stack-trace-zone', + // Angular2 + 'angular2/platform/browser', + 'angular2/platform/common_dom', + 'angular2/core', 'angular2/router', - 'angular2/core' + 'angular2/http', + // RxJS + 'rxjs', + // Other + 'angular2-jwt' ], - app: [ - // App - /* - // * include any 3rd party js lib here - */ + 'app': [ './src/index' ] }, @@ -46,71 +51,62 @@ module.exports = { '.ts', '.js', '.json', - '.webpack.js', - '.web.js' - ], - alias: { - // When Angular2 has a TypeScript build - // we can switch between development and production - // 'angular2': 'angular2/es6/prod', - // 'angular2': 'angular2/es6/dev', - //'webapp': 'src' - } + '.css', + '.html' + ] }, module: { + preLoaders: [ { test: /\.ts$/, loader: 'tslint-loader' } ], loaders: [ + // Support for .ts files. + { + test: /\.ts$/, + loader: 'ts-loader', + query: { + 'ignoreDiagnostics': [ + 2403, // 2403 -> Subsequent variable declarations + 2300, // 2300 Duplicate identifier + 2374, // 2374 -> Duplicate number index signature + 2375 // 2375 -> Duplicate string index signature + ] + }, + exclude: [ /\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/ ] + }, + // Support for *.json files. - { test: /\.json$/, loader: 'json' }, + { test: /\.json$/, loader: 'json-loader' }, // Support for CSS as raw text - { test: /\.css$/, loader: 'raw' }, + { test: /\.css$/, loader: 'raw-loader' }, // support for .html as raw text - { test: /\.html$/, loader: 'raw' }, - - // Support for .ts files. - { test: /\.ts$/, loader: 'ts' } + { test: /\.html$/, loader: 'raw-loader' }, ], noParse: [ - /rtts_assert\/src\/rtts_assert/ + /zone\.js\/dist\/.+/, + /reflect-metadata/, + /es(6|7)-.+/, ] }, plugins: [ - new webpack.optimize.CommonsChunkPlugin({ - name: 'angular2', - minChunks: Infinity, - }), - new webpack.optimize.CommonsChunkPlugin({ - name: 'common', - filename: 'common.js' - }), - new webpack.DefinePlugin({ - 'ENV': { - 'type': JSON.stringify('development'), - 'debug': true - } - }), - - // new webpack.HotModuleReplacementPlugin(), - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.optimize.DedupePlugin(), - new webpack.BannerPlugin(getBanner()) + new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }), + new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] }) ], + + // Other module loader config + tslint: { + emitErrors: false, + failOnHint: false + }, + // our Development Server configs + // our Webpack Development Server config devServer: { - inline: true, - colors: true, historyApiFallback: true, - contentBase: '.', publicPath: '/build' - }, - debug: true, - cache: true, - - context: __dirname, - stats: { colors: true, reasons: true } + } }; function getBanner() { From 2eb9dc2b6c1276884dced8ad48000bb9c42b5d95 Mon Sep 17 00:00:00 2001 From: Ryan Chenkie Date: Thu, 7 Jan 2016 20:05:13 -0700 Subject: [PATCH 2/2] (fix) Proper error handling in HTTP requests --- src/home/home.ts | 4 ++-- src/login/login.ts | 4 ++-- src/signup/signup.ts | 4 ++-- typings/_custom/webpack.d.ts | 4 ++++ typings/tsd.d.ts | 1 - 5 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 typings/_custom/webpack.d.ts diff --git a/src/home/home.ts b/src/home/home.ts index 2a18a30..1850311 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -47,7 +47,7 @@ export class Home { this.http.get(url) .subscribe( response => this.response = response.text(), - error => this.response = error.json().message + error => this.response = error.text() ); } if (type === 'Secured') { @@ -55,7 +55,7 @@ export class Home { this.authHttp.get(url) .subscribe( response => this.response = response.text(), - error => this.response = error.json().message + error => this.response = error.text() ); } } diff --git a/src/login/login.ts b/src/login/login.ts index 23d24e6..84c5210 100644 --- a/src/login/login.ts +++ b/src/login/login.ts @@ -29,8 +29,8 @@ export class Login { this.router.parent.navigateByUrl('/home'); }, error => { - alert(error.json().message); - console.log(error.json().message); + alert(error.text()); + console.log(error.text()); } ); } diff --git a/src/signup/signup.ts b/src/signup/signup.ts index 20707d6..878a70f 100644 --- a/src/signup/signup.ts +++ b/src/signup/signup.ts @@ -29,8 +29,8 @@ export class Signup { this.router.parent.navigateByUrl('/home'); }, error => { - alert(error.json().message); - console.log(error.json().message); + alert(error.text()); + console.log(error.text()); } ); } diff --git a/typings/_custom/webpack.d.ts b/typings/_custom/webpack.d.ts new file mode 100644 index 0000000..3bd85f3 --- /dev/null +++ b/typings/_custom/webpack.d.ts @@ -0,0 +1,4 @@ +declare var require: any; +declare var __filename: string; +declare var __dirname: string; +declare var global: any; \ No newline at end of file diff --git a/typings/tsd.d.ts b/typings/tsd.d.ts index 170fce0..3aec03f 100644 --- a/typings/tsd.d.ts +++ b/typings/tsd.d.ts @@ -1,2 +1 @@ /// -///