upgrade to Angular2 2.2.0 and small fixes

Author: Tomabana

gulpfile.js

@@ -1,56 +1,46 @@
 var gulp = require('gulp');
-var ext_replace = require('gulp-ext-replace');
-var tslint = require('gulp-tslint');
-var inlineNg2Template = require('gulp-inline-ng2-template');
-/* CSS */
-var postcss = require('gulp-postcss');
-var sourcemaps = require('gulp-sourcemaps');
-var autoprefixer = require('autoprefixer');
-var precss = require('precss');
-var cssnano = require('cssnano');
-var typescript = require('gulp-typescript');
-var tsProject = typescript.createProject('tsconfig.json');
+var $ = require('gulp-load-plugins')({lazy: true});
+var sass = require('gulp-sass');
 
 var paths = {
-  src: {
-    ts: './src/ts/**/*.ts',
-    scss: './src/scss/app.scss'
-  },
-  dest: {
-    js: './app/js',
-    css: './app/css'
-  }
+    src: {
+        ts: './src/ts/**/*.ts',
+        scss: './src/scss/app.scss'
+    },
+    dest: {
+        js: './app/js',
+        css: './app/css'
+    }
 };
 
 gulp.task("tslint", function () {
     gulp.src([paths.src.ts])
-        .pipe(tslint({
+        .pipe($.tslint({
             formatter: "verbose"
         }))
-        .pipe(tslint.report());
+        .pipe($.tslint.report());
 });
 
-gulp.task('build-ts', ["tslint", "build-css"], function () {
+gulp.task('build-ts', ["tslint", "build-scss"], function () {
     return gulp.src(paths.src.ts)
-        .pipe(inlineNg2Template())
-        .pipe(sourcemaps.init())
-        .pipe(typescript(tsProject))
-        .pipe(sourcemaps.write())
+        .pipe($.sourcemaps.init())
+        .pipe($.typescript.createProject('tsconfig.json', {
+            typescript: require('typescript')
+        })())
+        .pipe($.sourcemaps.write())
+        .pipe($.inlineNg2Template())
         .pipe(gulp.dest(paths.dest.js));
 });
 
-gulp.task('build-css', function () {
-  return gulp.src(paths.src.scss)
-    .pipe(sourcemaps.init())
-    .pipe(postcss([precss, autoprefixer, cssnano]))
-    .pipe(sourcemaps.write())
-    .pipe(ext_replace('.css'))
-    .pipe(gulp.dest(paths.dest.css));
+gulp.task('build-scss', function () {
+    return gulp.src(paths.src.scss)
+        .pipe(sass().on('error', sass.logError))
+        .pipe(gulp.dest(paths.dest.css));
 });
 
 gulp.task('watch', function () {
-  gulp.watch(paths.src.ts, ['build-ts']);
-  gulp.watch(paths.src.scss, ['build-css']);
+    gulp.watch(paths.src.ts, ['build-ts']);
+    gulp.watch(paths.src.scss, ['build-scss']);
 });
 
-gulp.task('default', ['watch', 'build-ts', 'build-css']);
+gulp.task('default', ['watch', 'build-ts', 'build-scss']);

index.html

@@ -9,14 +9,14 @@
 
     <!-- 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="systemjs.config.js"></script>
     <script>
-        System.import('app').catch(function(err){ console.error(err); });
+        System.import('system-config.js').then(function () {
+            System.import('app');
+        }).catch(console.error.bind(console));
     </script>
 </head>
 

package.json

@@ -9,38 +9,36 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@angular/common": "~2.1.0",
-    "@angular/compiler": "~2.1.0",
-    "@angular/core": "~2.1.0",
-    "@angular/forms": "~2.1.0",
-    "@angular/http": "~2.1.0",
-    "@angular/platform-browser": "~2.1.0",
-    "@angular/platform-browser-dynamic": "~2.1.0",
-    "@angular/router": "~3.1.0",
-    "@angular/upgrade": "~2.1.0",
-    "es6-shim": "^0.35.0",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/forms": "~2.2.0",
+    "@angular/http": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/router": "~3.2.0",
+    "@angular/upgrade": "~2.2.0",
+
+    "systemjs": "0.19.39",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.39",
     "zone.js": "^0.6.25"
   },
   "devDependencies": {
-    "autoprefixer": "^6.3.5",
-    "cssnano": "^3.4.0",
     "concurrently": "^2.0.0",
     "gulp": "^3.9.0",
-    "gulp-ext-replace": "^0.2.0",
     "gulp-inline-ng2-template": "^4.0.0",
-    "gulp-postcss": "^6.0.1",
-    "gulp-sourcemaps": "^1.6.0",
+    "gulp-load-plugins": "1.4.0",
+    "gulp-sourcemaps": "^2.2.0",
+    "gulp-sass": "2.3.2",
     "gulp-tslint": "6.1.2",
-    "gulp-typescript": "^2.10.0",
-    "gulp-uglify": "^1.5.1",
+    "gulp-typescript": "^3.1.3",
     "lite-server": "^2.1.0",
-    "postcss": "^5.0.13",
-    "postcss-scss": "^0.1.3",
-    "precss": "^1.3.0",
-    "tslint": "^3.7.3"
+    "tslint": "^3.7.3",
+    "typescript": "^2.0.10",
+
+    "@types/core-js": "^0.9.34",
+    "@types/node": "^6.0.46"
   }
 }

src/html/app.component.html renamed to src/html/app.html

@@ -5,7 +5,7 @@
 <div>
     <h3>Posts</h3>
     <div class="grid grid-pad">
-        <div *ngFor="let post of posts" (click)="gotoPost(post)" class="col-2">
+        <div *ngFor="let post of posts" [routerLink]="['/post', post.id]" class="col-2">
             <div class="module post">
                 <h4>{{post.title}}</h4>
                 <button class="delete-button" (click)="deletePost(post, $event)">X</button>

src/html/dashboard/dashboard.component.html renamed to src/html/dashboard/dashboard.html

@@ -2,7 +2,7 @@ import {Component} from "@angular/core";
 
 @Component({
     selector: "my-app",
-    templateUrl: "/src/html/app.component.html",
+    templateUrl: "/src/html/app.html",
 })
 export class AppComponent {
 

src/html/post/post.component.html renamed to src/html/post/post.html

@@ -1,17 +1,36 @@
-import {AppRoutingModule, routedComponents} from "./app-routing.module";
 import {AppComponent} from "./app.component";
+import {DashboardComponent} from "./dashboard/components/dashboard.component";
+import {PostComponent} from "./post/components/post.component";
 import "./rxjs-extensions";
 import {LoggingService} from "./shared/services/logging.service";
 import {PostService} from "./shared/services/post.service";
 import {NgModule} from "@angular/core";
 import {FormsModule} from "@angular/forms";
 import {HttpModule} from "@angular/http";
 import {BrowserModule} from "@angular/platform-browser";
+import {RouterModule, Routes} from "@angular/router";
+
+const routes: Routes = [
+    {
+        path: "",
+        pathMatch: "full",
+        redirectTo: "/dashboard",
+    },
+    {
+        component: DashboardComponent,
+        path: "dashboard",
+    },
+    {
+        component: PostComponent,
+        path: "post/:id",
+    },
+];
+export const routedComponents = [DashboardComponent, PostComponent];
 
 @NgModule({
     bootstrap: [AppComponent],
     declarations: [AppComponent, routedComponents],
-    imports: [BrowserModule, FormsModule, HttpModule, AppRoutingModule],
+    imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes)],
     providers: [PostService, LoggingService],
 })
 export class AppModule {

src/ts/app-routing.module.ts

@@ -1,13 +1,12 @@
 import {Post} from "../../shared/models/post";
 import {PostService} from "../../shared/services/post.service";
 import {Component, OnDestroy, OnInit} from "@angular/core";
-import {Router} from "@angular/router";
 import {Observable} from "rxjs/Observable";
 import {AnonymousSubscription} from "rxjs/Subscription";
 
 @Component({
     selector: "dashboard",
-    templateUrl: "/src/html/dashboard/dashboard.component.html",
+    templateUrl: "/src/html/dashboard/dashboard.html",
 })
 export class DashboardComponent implements OnInit, OnDestroy {
 
@@ -16,7 +15,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     private posts: Post[];
     private post: Post;
 
-    constructor(private router: Router, private postService: PostService) {
+    constructor(private postService: PostService) {
         this.post = new Post();
     }
 
@@ -36,25 +35,17 @@ export class DashboardComponent implements OnInit, OnDestroy {
     public save(): void {
         this.postService
             .save(this.post)
-            .subscribe(bid => {
-                this.posts.unshift(bid);
+            .subscribe(post => {
+                this.posts.unshift(post);
                 this.post = new Post();
             });
     }
 
-    public deletePost(post: Post, event: any): void {
+    public deletePost(postToDelete: Post, event: any): void {
         event.stopPropagation();
-        this.postService
-            .delete(post)
-            .subscribe(() => {
-                this.posts = this.posts.filter((returnableObjects: Post) => {
-                    return returnableObjects.id !== post.id;
-                });
-            });
-    }
-
-    public gotoPost(post: Post): void {
-        this.router.navigate(["/posts", post.id]);
+        this.postService.delete(postToDelete).subscribe(() => {
+            this.posts = this.posts.filter((post: Post) => post.id !== postToDelete.id);
+        });
     }
 
     private refreshData(): void {

src/ts/app.component.ts

@@ -10,7 +10,7 @@ import {AnonymousSubscription} from "rxjs/Subscription";
 @Component({
     providers: [CommentService],
     selector: "bid",
-    templateUrl: "src/html/post/post.component.html",
+    templateUrl: "src/html/post/post.html",
 })
 export class PostComponent implements OnInit, OnDestroy {
 

src/ts/app.module.ts

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES6",
+    "target": "ES5",
     "module": "system",
     "moduleResolution": "node",
     "sourceMap": true,