fix: component based layout added for css, html templates (#20)

Author: patrickmichalina

package-lock.json

@@ -75,6 +75,7 @@
     "favicons": "^5.1.1",
     "fuse-box": "^3.3.0",
     "inquirer": "^6.0.0",
+    "ng2-fused": "^0.5.1",
     "npm": "^6.1.0",
     "rxjs": "^6.2.1",
     "ts-node": "^6.1.2",

package.json

@@ -1,12 +1,19 @@
 import { command } from 'yargs'
 import { take, tap } from 'rxjs/operators'
 import { logInfo } from '../utilities/log'
-import { FuseBox, JSONPlugin, QuantumPlugin } from 'fuse-box'
+import {
+  FuseBox,
+  JSONPlugin,
+  QuantumPlugin,
+  RawPlugin,
+  SassPlugin
+} from 'fuse-box'
 import { resolve } from 'path'
 import { NgProdPlugin } from '../fusebox/ng.prod.plugin'
 import { NgPolyfillPlugin } from '../fusebox/ng.polyfill.plugin'
 import { NgCompilerPlugin } from '../fusebox/ng.compiler.plugin'
 import readConfig_ from '../utilities/read-config'
+import { Ng2TemplatePlugin } from 'ng2-fused'
 
 command(
   'serve [port][prod][aot][sw]',
@@ -63,10 +70,22 @@ function serve(isProdBuild = false) {
         target: 'browser@es5',
         useTypescriptCompiler: true,
         plugins: [
+          Ng2TemplatePlugin(),
+          ['*.component.html', RawPlugin()],
           NgProdPlugin({ enabled: isProdBuild }),
           NgCompilerPlugin({ enabled: isAotBuild }),
           NgPolyfillPlugin(),
           // NgOptimizerPlugin({ enabled: opts.enableAngularBuildOptimizer }),
+          [
+            '*.component.css',
+            SassPlugin({
+              indentedSyntax: false,
+              importer: true,
+              sourceMap: false,
+              outputStyle: 'compressed'
+            } as any),
+            RawPlugin()
+          ],
           isProdBuild &&
             QuantumPlugin({
               warnings: false,
@@ -89,6 +108,18 @@ function serve(isProdBuild = false) {
         output: `${serverOutput}/$name.js`,
         plugins: [
           JSONPlugin(),
+          Ng2TemplatePlugin(),
+          ['*.component.html', RawPlugin()],
+          [
+            '*.component.css',
+            SassPlugin({
+              indentedSyntax: false,
+              importer: true,
+              sourceMap: false,
+              outputStyle: 'compressed'
+            } as any),
+            RawPlugin()
+          ],
           NgProdPlugin({
             enabled: true,
             fileTest: 'server.angular.module.ts'

src/commands/serve.ts

@@ -2,7 +2,9 @@ import {
   appModuleTemplate,
   appComponentTemplate,
   appRoutingModuleTemplate,
-  appSharedModuleTemplate
+  appSharedModuleTemplate,
+  appComponentCssTemplate,
+  appComponentHtmlTemplate
 } from '../templates/core/app'
 import { writeFile_, mkDirAndContinueIfExists_ } from '../utilities/rx-fs'
 import { forkJoin } from 'rxjs'
@@ -53,8 +55,22 @@ export function generateCoreAngularApp(projectDir: string, universal = true) {
           `${baseDir}/app.routing.module.ts`,
           appRoutingModuleTemplate
         ),
-        writeFile_(`${baseDir}/app.component.ts`, appComponentTemplate)
+        writeFile_(`${baseDir}/app.component.ts`, appComponentTemplate),
+        writeFile_(`${baseDir}/app.component.css`, appComponentCssTemplate), // TODO: write component generator function instead
+        writeFile_(`${baseDir}/app.component.html`, appComponentHtmlTemplate)
       ])
+    ),
+    flatMap(() =>
+      mkDirAndContinueIfExists_(resolve(baseDir, 'home')).pipe(
+        flatMap(() =>
+          forkJoin([
+            // writeFile_(
+            //   `${baseDir}/home/home.component.ts`,
+            //   homeComponentTemplate
+            // )
+          ])
+        )
+      )
     )
   )
 }

src/generators/angular-core.gen.ts

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/templates/component/component.ts.txt

@@ -0,0 +1,2 @@
+<h1>Your New Angular App</h1>
+<router-outlet></router-outlet>

src/templates/core/app/app.component.css.txt

@@ -2,7 +2,8 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'
 
 @Component({
   selector: 'app-root',
-  template: `<router-outlet></router-outlet>`,
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {

src/templates/core/app/app.component.html.txt

@@ -1,7 +1,12 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 
+//export function homeModule() {
+//  return import('./home/home.module').then(m => m.HomeModule)
+//}
+
 export const routes: Routes = [
+//  { path: '', loadChildren: homeModule },
 ]
 
 @NgModule({

src/templates/core/app/app.component.ts.txt

@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+
+@Component({
+  selector: 'ng-home',
+  template: `HOME COMPONENT`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HomeComponent {
+}