gulp inline ng2 template plugin added

Author: Tomabana

gulpfile.js

@@ -1,6 +1,7 @@
 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');
@@ -13,7 +14,7 @@ var tsProject = typescript.createProject('tsconfig.json');
 var paths = {
   src: {
     ts: './src/ts/**/*.ts',
-    scss: './src/scss/**/*.scss'
+    scss: './src/scss/app.scss'
   },
   dest: {
     js: './app/js',
@@ -29,12 +30,13 @@ gulp.task("tslint", function () {
         .pipe(tslint.report());
 });
 
-gulp.task('build-ts' , ["tslint"], function () {
-  return gulp.src(paths.src.ts)
-    .pipe(sourcemaps.init())
-    .pipe(typescript(tsProject))
-    .pipe(sourcemaps.write())
-    .pipe(gulp.dest(paths.dest.js));
+gulp.task('build-ts', ["tslint", "build-css"], function () {
+    return gulp.src(paths.src.ts)
+        .pipe(inlineNg2Template())
+        .pipe(sourcemaps.init())
+        .pipe(typescript(tsProject))
+        .pipe(sourcemaps.write())
+        .pipe(gulp.dest(paths.dest.js));
 });
 
 gulp.task('build-css', function () {

index.html

@@ -5,7 +5,7 @@
     <title>Angular BeyondScheme</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="app/css/app.component.css">
+    <link rel="stylesheet" href="app/css/app.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>

package.json

@@ -31,6 +31,7 @@
     "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-tslint": "6.1.2",

src/scss/dashboard.component.scss renamed to src/scss/_dashboard.scss

@@ -1,3 +1,6 @@
+@import "_dashboard.scss";
+@import "_post.scss";
+
 body {
   margin: 32px;
   font-family: "Roboto", Arial, sans-serif;
@@ -36,4 +39,4 @@ button {
 
 button:hover {
   background-color: #cfd8dc;
-}
+}

src/scss/post.component.scss renamed to src/scss/_post.scss

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

src/scss/app.component.scss renamed to src/scss/app.scss

@@ -7,8 +7,7 @@ import {AnonymousSubscription} from "rxjs/Subscription";
 
 @Component({
     selector: "dashboard",
-    styleUrls: ["app/css/dashboard.component.css"],
-    templateUrl: "../../../src/html/dashboard/dashboard.component.html",
+    templateUrl: "/src/html/dashboard/dashboard.component.html",
 })
 export class DashboardComponent implements OnInit, OnDestroy {
 

src/ts/app.component.ts

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