Sfx build 2 (#75)

* refactor todolist delTodo

* Finish implement SFX build

* revert changedetector usage

* call enableProdMode when bundling

* update to new rc router

* compile ts to tmp folder

* refactor clean-ts to del tmp

* refactor typescript task

* update readme

* fix test import

* update typings 1.0 and fix breaking things

Author: antonybudianto

.gitignore

@@ -3,9 +3,6 @@
 /build
 /report
 /typings
+/tmp
 .DS_Store
-app/**/*.js
-app/**/*.js.map
-test/**/*.js
-test/**/*.js.map
 assets/styles/*.css

README.md

@@ -8,7 +8,7 @@
 
 
 > Angular 2 is still in **Release Candidate** stage, please **don't** use this in production
-> Follow it [here](https://splintercode.github.io/is-angular-2-ready/)
+> Follow Angular 2 Changelog [here](https://github.com/angular/angular/blob/master/CHANGELOG.md)
 
 ## Table of Content
 * [Introduction](#introduction)
@@ -92,7 +92,7 @@ You can create production build by running:
 ```bash
 gulp build
 ```
-or you can create production build and then serve it using `live-server` by running:
+or you can create production build and then serve it using Browsersync by running:
 ```bash
 gulp serve-build
 ```

app/app.component.spec.ts

@@ -5,19 +5,10 @@ import {
     inject,
     async,
     describe,
-    MockApplicationRef
 } from '@angular/core/testing';
-import {
-    TestComponentBuilder
-} from '@angular/compiler/testing';
-import {
-    ROUTER_PRIMARY_COMPONENT,
-    ROUTER_PROVIDERS
-} from '@angular/router-deprecated';
-import {
-    APP_BASE_HREF,
-} from '@angular/common';
-import { Component, provide, ApplicationRef } from '@angular/core';
+import { TestComponentBuilder } from '@angular/compiler/testing';
+import { ROUTER_FAKE_PROVIDERS } from '@angular/router/testing';
+import { Component } from '@angular/core';
 import { AppComponent } from './app.component';
 import { LoggerService } from './blocks/logger.service';
 
@@ -32,10 +23,7 @@ class TestComponent {
 describe('AppComponent', () => {
     beforeEachProviders(() => [
         LoggerService,
-        ROUTER_PROVIDERS,
-        provide(ROUTER_PRIMARY_COMPONENT, { useValue: AppComponent }),
-        provide(ApplicationRef, { useClass: MockApplicationRef }),
-        provide(APP_BASE_HREF, { useValue: '/' }),
+        ROUTER_FAKE_PROVIDERS
     ]);
 
     it('should have brand Angular 2 Starter', async(inject([TestComponentBuilder],

app/app.component.ts

@@ -1,17 +1,17 @@
 import {Component} from '@angular/core';
-import {RouterOutlet, RouteConfig, RouteDefinition} from '@angular/router-deprecated';
+import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
 import {APP_ROUTES} from './app.routes';
 import {NavbarComponent} from './navbar/navbar.component';
 import {LoggerService} from './blocks/logger.service';
 
 @Component({
     selector: 'as-main-app',
     templateUrl: 'app/app.html',
-    directives: [RouterOutlet, NavbarComponent]
+    directives: [NavbarComponent, ROUTER_DIRECTIVES]
 })
-@RouteConfig(APP_ROUTES)
+@Routes(APP_ROUTES)
 export class AppComponent {
-    public appRoutes: RouteDefinition[];
+    public appRoutes: any[];
     private logger: LoggerService;
 
     constructor(logger: LoggerService) {

app/app.routes.ts

@@ -1,10 +1,9 @@
-import {RouteDefinition} from '@angular/router-deprecated';
 import {HomeComponent} from './home/home.component';
 import {TodolistComponent} from './todolist/todolist.component';
 import {SimplebindComponent} from './simplebind/simplebind.component';
 
-export var APP_ROUTES: RouteDefinition[] = [
-    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
+export var APP_ROUTES: any[] = [
+    { path: '/', name: 'Home', component: HomeComponent },
     { path: '/simplebind', name: 'Simplebind', component: SimplebindComponent },
     { path: '/todolist', name: 'Todolist', component: TodolistComponent }
 ];

app/bundle.ts

@@ -0,0 +1 @@
+// This file is for production only, please leave it blank

app/main.ts

@@ -1,8 +1,15 @@
 import {bootstrap} from '@angular/platform-browser-dynamic';
-import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
+import {enableProdMode} from '@angular/core';
+import {ROUTER_PROVIDERS} from '@angular/router';
 import {AppComponent} from './app.component';
 import {LoggerService} from './blocks/logger.service';
 
+declare var ENV: string;
+
+if (ENV === 'production') {
+    enableProdMode();
+}
+
 bootstrap(AppComponent, [
     LoggerService, ROUTER_PROVIDERS
 ]);

app/navbar/navbar.component.ts

@@ -1,14 +1,14 @@
 import {Component, Input, ChangeDetectionStrategy} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
-import {RouterLink, RouteDefinition} from '@angular/router-deprecated';
+import {ROUTER_DIRECTIVES} from '@angular/router';
 
 @Component({
     selector: 'as-navbar',
     templateUrl: 'app/navbar/navbar.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    directives: [RouterLink, CORE_DIRECTIVES]
+    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES]
 })
 export class NavbarComponent {
     @Input() brand: string;
-    @Input() routes: RouteDefinition[];
+    @Input() routes: any[];
 }

app/navbar/navbar.html

@@ -11,7 +11,7 @@
     </div>
     <div id="navbar" class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
-        <li *ngFor="let route of routes"><a [routerLink]="[route.name]">{{route.name}}</a></li>
+        <li *ngFor="let route of routes"><a [routerLink]="[route.path]">{{route.name}}</a></li>
       </ul>
     </div>
   </div>

app/todolist/todolist.component.ts

@@ -1,8 +1,4 @@
-import {
-    Component,
-    ChangeDetectorRef,
-    ChangeDetectionStrategy
-} from '@angular/core';
+import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 import {Todo} from './todo.model';
 import {CompletedFilterPipe} from './completed-filter.pipe';
@@ -11,15 +7,14 @@ import {CompletedFilterPipe} from './completed-filter.pipe';
     selector: 'as-todolist',
     templateUrl: 'app/todolist/todolist.html',
     directives: [CORE_DIRECTIVES],
-    pipes: [CompletedFilterPipe],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    pipes: [CompletedFilterPipe]
 })
 export class TodolistComponent {
     public todo: Todo;
     private list: Todo[];
     private showCompleted: Boolean;
 
-    constructor(private _ref: ChangeDetectorRef) {
+    constructor() {
         this.showCompleted = true;
         this.todo = new Todo('Add me to list!', false);
         this.list = [
@@ -31,14 +26,10 @@ export class TodolistComponent {
     addTodo() {
         this.list = this.list.concat(Todo.clone(this.todo));
         this.todo.clear();
-        this._ref.markForCheck();
     }
 
-    delTodo(index: number) {
-        this.list = [].concat(
-            this.list.slice(0, index),
-            this.list.slice(index + 1, this.list.length)
-        );
-        this._ref.markForCheck();
+    delTodo(todoIndex: number) {
+        this.list = this.list.filter(
+            (todo, index) => index !== todoIndex);
     }
 }