fix test and build

refactor component tasks

refactor watch file

.gitignore

@@ -1,5 +1,6 @@
 env.json
 .idea/
+.vscode
 /node_modules
 /bower_components
 /build

config/gulp/config.js

@@ -87,6 +87,7 @@ module.exports = function () {
         var browserSync = {
             dev: {
                 port: 3000,
+                injectChanges: false,
                 server: {
                     baseDir: './src/',
                     middleware: [historyApiFallback()],

config/gulp/tasks/build.js

@@ -9,6 +9,8 @@ var revReplace = require('gulp-rev-replace');
 var uglify = require('gulp-uglify');
 var cssnano = require('gulp-cssnano');
 var gulpTemplate = require('gulp-template');
+var flatten = require('gulp-flatten');
+
 var envVars = require('../utils/env-vars');
 
 require('@ngstarter/systemjs-extension')(config);
@@ -20,16 +22,25 @@ gulp.task('build', function (done) {
 /* Concat and minify/uglify all css, js, and copy fonts */
 gulp.task('build-assets', function (done) {
     runSequence('clean-build', ['sass', 'fonts'], function () {
-        gulp.src(config.app + '**/*.html', {
-            base: config.app
-        })
-        .pipe(gulp.dest(config.build.app));
+        gulp.src(config.app + '**/*.html')
+        .pipe(flatten())
+        .pipe(gulp.dest(config.build.path));
 
-        gulp.src(config.app + '**/*.css', {
-            base: config.app
-        })
+        gulp.src(config.app + '**/*.css')
         .pipe(cssnano({zindex: false}))
-        .pipe(gulp.dest(config.build.app));
+        .pipe(flatten())
+        .pipe(gulp.dest(config.build.path));
+
+        // gulp.src(config.app + '**/*.html', {
+        //     base: config.app
+        // })
+        // .pipe(gulp.dest(config.build.app));
+
+        // gulp.src(config.app + '**/*.css', {
+        //     base: config.app
+        // })
+        // .pipe(cssnano({zindex: false}))
+        // .pipe(gulp.dest(config.build.app));
 
         gulp.src(config.src + 'favicon.ico')
         .pipe(gulp.dest(config.build.path));

config/gulp/tasks/component.js

@@ -0,0 +1,36 @@
+var gulp = require('gulp');
+var path = require('path');
+
+var config = require('../config')();
+
+gulp.task('html', function () {
+    return gulp.src(config.app + '**/*.html')
+        .pipe(gulp.dest(config.tmpApp));
+});
+
+gulp.task('watch-html', function () {
+    gulp.watch(config.app + '**/*.html', function(file) {
+        var des = convertToTmpPath(file);
+
+        return gulp.src(file.path)
+        .pipe(gulp.dest(path.dirname(des)));
+    });
+});
+
+gulp.task('css', function () {
+    return gulp.src(config.app + '**/*.css')
+        .pipe(gulp.dest(config.tmpApp));
+});
+
+gulp.task('watch-css', function () {
+    gulp.watch(config.app + '**/*.css', function(file) {
+        var des = convertToTmpPath(file);
+
+        return gulp.src(file.path)
+        .pipe(gulp.dest(path.dirname(des)));
+    });
+});
+
+function convertToTmpPath(file) {
+    return file.path.replace(/src\/app\//, config.tmpApp);
+}

config/gulp/tasks/serve.js

@@ -1,3 +1,5 @@
+var runSequence = require('run-sequence');
+
 var envConfig = require('../utils/env');
 
 if (envConfig.ENV === envConfig.ENVS.DEV)
@@ -14,12 +16,15 @@ if (envConfig.ENV === envConfig.ENVS.DEV)
     }
 
     /* Start live server dev mode */
-    gulp.task('serve-dev',
-              ['sass', 'tsc-app', 'html', 'watch-sass', 'watch-ts', 'watch-html'],
-              function ()
-              {
-                  startBrowsersync(config.browserSync.dev);
-              });
+    gulp.task('serve-dev', function ()
+    {
+        runSequence(
+            ['sass', 'tsc-app'],
+            ['html', 'css'],
+            ['watch-sass', 'watch-ts', 'watch-html', 'watch-css'], function() {
+            startBrowsersync(config.browserSync.dev);
+        });
+    });
 
     /* Start live server production mode */
     gulp.task('serve-build', ['build'], function ()

config/gulp/tasks/test.js

@@ -14,18 +14,22 @@ gulp.task('test', ['clean-report', 'unit-test']);
 gulp.task('unit-test', ['tsc'], function (done) {
     var watch = argv.watch || false;
 
+    runSequence(['html', 'css'], copyComponentFilesDone);
+
     if (watch) {
-        runSequence('watch-ts');
+        runSequence(['watch-ts', 'watch-html', 'watch-css']);
         console.log('=== Unit Test Watch Mode ===');
         console.log('- It will autowatch the changed files and re-run the test');
         console.log('- Press Cmd/Ctrl + C to exit and get the coverage result');
         console.log('- Press Cmd/Ctrl + C again to close the TSC watch.');
     }
 
-    new Server({
-        configFile: __dirname + '/../../test/karma.conf.js',
-        singleRun: !watch
-    }, karmaDone).start();
+    function copyComponentFilesDone() {
+        new Server({
+            configFile: __dirname + '/../../test/karma.conf.js',
+            singleRun: !watch
+        }, karmaDone).start();
+    }
 
     function karmaDone (exitCode) {
     	remapCoverage(done, exitCode);

config/gulp/tasks/typescript.js

@@ -26,7 +26,7 @@ gulp.task('tsc', ['clean-ts', 'env'], function () {
     return compileTs(tsFiles);
 });
 
-gulp.task('tsc-app', ['clean-ts-app', 'env'], function () {
+gulp.task('tsc-app', ['env'], function () {
     return compileTs(config.tsFiles);
 });
 

config/test/karma.conf.js

@@ -44,6 +44,7 @@ module.exports = function(config) {
       // required for component assests fetched by Angular's compiler
       "/src/": "/base/src/",
       "/app/": "/base/src/app/",
+      "/tmp/": "/base/src/tmp/",
       "/node_modules/": "/base/node_modules/"
     },
 
@@ -64,6 +65,7 @@ module.exports = function(config) {
     createFilePattern(gulpConfig.tmpApp + '**/*.js', { included: false }),
     createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', { included: false }),
     createFilePattern(gulpConfig.app + '**/*.html', { included: false }),
+    createFilePattern(gulpConfig.tmpApp + '**/*.html', { included: false }),
     createFilePattern(gulpConfig.app + '**/*.css', { included: false }),
     createFilePattern(gulpConfig.app + '**/*.ts', { included: false, watched: false }),
     createFilePattern(gulpConfig.tmpApp + '**/*.js.map', { included: false, watched: false })

package.json

@@ -62,6 +62,7 @@
     "glob": "^7.0.6",
     "gulp": "^3.9.1",
     "gulp-cssnano": "^2.1.2",
+    "gulp-flatten": "^0.3.1",
     "gulp-if": "~2.0.1",
     "gulp-protractor": "^3.0.0",
     "gulp-rev": "^7.1.2",

src/app/app.component.ts

@@ -3,8 +3,9 @@ import { Component } from '@angular/core';
 import { CONSTANTS } from './shared';
 
 @Component({
+    moduleId: module.id,
     selector: 'as-main-app',
-    templateUrl: 'app/app.html'
+    templateUrl: 'app.html'
 })
 export class AppComponent {
     public appBrand: string;

src/app/home/home.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
+    moduleId: module.id,
     selector: 'as-home',
-    templateUrl: 'app/home/home.html',
+    templateUrl: 'home.html',
     styleUrls: [
-        'app/home/home.css'
+        'home.css'
     ]
 })
 export class HomeComponent {

src/app/home/home.css

@@ -1,3 +1,3 @@
 h4 {
-	color: gray;
+	color: lightseagreen;
 }

src/app/shared/navbar/navbar.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+    moduleId: module.id,
     selector: 'as-navbar',
-    templateUrl: 'app/shared/navbar/navbar.html',
+    templateUrl: 'navbar.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NavbarComponent {

yarn.lock

@@ -1882,6 +1882,13 @@ gulp-cssnano@^2.1.2:
     object-assign "^4.0.1"
     vinyl-sourcemaps-apply "^0.2.1"
 
+gulp-flatten:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/gulp-flatten/-/gulp-flatten-0.3.1.tgz#51e7fec13a33c404578d18c1589d1b5bc45fe1d6"
+  dependencies:
+    gulp-util "^3.0.7"
+    through2 "^2.0.0"
+
 gulp-if@^2.0.0, gulp-if@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/gulp-if/-/gulp-if-2.0.1.tgz#55f3edf82cecdfcf6035aa5d0686979aab0dac28"