fix: add lazy loading and aot base pipeline (#23)

Author: patrickmichalina

src/commands/serve.ts

@@ -12,10 +12,12 @@ import {
 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'
 import { FuseProcess } from 'fuse-box/FuseProcess'
+import { NgAotFactoryPlugin } from '../fusebox/ng.aot-factory.plugin'
+import clearTerminal from '../utilities/clear'
+import { main as ngc } from '@angular/compiler-cli/src/main'
 
 command(
   'serve [port][prod][aot][sw]',
@@ -63,6 +65,8 @@ function serve(isProdBuild = false) {
         ? config.fusebox.browser.aotBrowserModule
         : config.fusebox.browser.browserModule
 
+      isAotBuild && ngc(['-p', resolve('tsconfig.aot.json')])
+
       const fuseBrowser = FuseBox.init({
         log,
         modulesFolder,
@@ -72,12 +76,11 @@ function serve(isProdBuild = false) {
         target: 'browser@es5',
         useTypescriptCompiler: true,
         plugins: [
+          isAotBuild && NgAotFactoryPlugin(),
           Ng2TemplatePlugin(),
           ['*.component.html', RawPlugin()],
           NgProdPlugin({ enabled: isProdBuild }),
-          NgCompilerPlugin({ enabled: isAotBuild }),
           NgPolyfillPlugin(),
-          // NgOptimizerPlugin({ enabled: opts.enableAngularBuildOptimizer }),
           [
             '*.component.css',
             SassPlugin({
@@ -146,6 +149,7 @@ function serve(isProdBuild = false) {
             .instructions(` > [${config.fusebox.server.serverModule}]`)
             .completed(proc => {
               prevServerProcess && prevServerProcess.kill()
+              clearTerminal()
               proc.start()
               prevServerProcess = proc
             })
@@ -156,6 +160,7 @@ function serve(isProdBuild = false) {
         .bundle('app')
         .watch(watchDir)
         .instructions(` !> [${browserModule}]`)
+        .splitConfig({ dest: '../js/modules' })
 
       logInfo('Bundling your application, this may take some time...')
       fuseBrowser.run()

src/fusebox/ng.aot-factory.plugin.ts

@@ -0,0 +1,27 @@
+import { Plugin, File } from 'fuse-box'
+
+// tslint:disable:no-class
+// tslint:disable:no-this
+// tslint:disable:no-if-statement
+// tslint:disable:no-object-mutation
+// tslint:disable:readonly-keyword
+const defaults: NgAotFactoryPluginOptions = {}
+
+export interface NgAotFactoryPluginOptions {}
+
+export class NgAotFactoryPluginClass implements Plugin {
+  constructor(public opts: NgAotFactoryPluginOptions = defaults) {}
+
+  public test: RegExp = /-routing.module.js/
+
+  onTypescriptTransform?(file: File) {
+    if (!this.test.test(file.relativePath)) return
+    const regex1 = new RegExp(/.module'/, 'g')
+    const regex2 = new RegExp(/Module\);/, 'g')
+    file.contents = file.contents.replace(regex1, ".module.ngfactory'")
+    file.contents = file.contents.replace(regex2, 'ModuleNgFactory);')
+  }
+}
+
+export const NgAotFactoryPlugin = (options?: NgAotFactoryPluginOptions) =>
+  new NgAotFactoryPluginClass(options)

src/fusebox/ng.compiler.plugin.ts

@@ -1,5 +1,5 @@
 import { main as ngc } from '@angular/compiler-cli/src/main'
-import { Plugin, File } from 'fuse-box'
+import { Plugin } from 'fuse-box'
 import { resolve } from 'path'
 
 // tslint:disable:no-class
@@ -15,17 +15,10 @@ export interface NgcPluginOptions {
 
 export class NgcPluginClass implements Plugin {
   constructor(private opts: NgcPluginOptions = defaults) {}
-  public test: RegExp = /-routing.module.js/
+
   bundleStart() {
     this.opts.enabled && ngc(['-p', resolve('tsconfig.aot.json')])
   }
-
-  transform(file: File) {
-    const regex1 = new RegExp(/.module'/, 'g')
-    const regex2 = new RegExp(/Module\);/, 'g')
-    file.contents = file.contents.replace(regex1, ".module.ngfactory'")
-    file.contents = file.contents.replace(regex2, 'ModuleNgFactory);')
-  }
 }
 
 export const NgCompilerPlugin = (options?: NgcPluginOptions) =>

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

@@ -1,3 +1,5 @@
-:host {
-  display: block;
+// apply global styles here
+
+app-root {
+
 }

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

@@ -1,10 +1,11 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
 }

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

@@ -12,7 +12,7 @@ import { SharedModule } from './app.shared.module'
     AppRoutingModule,
     TransferHttpCacheModule,
     SharedModule.forRoot(),
-    BrowserModule.withServerTransition({ appId: 'my-app' }),
+    BrowserModule.withServerTransition({ appId: 'app-root' }),
   ]
 })
 export class AppModule { }

src/templates/core/browser/app.browser.module.ts.txt

@@ -5,7 +5,7 @@ import { AppComponent } from '../app/app.component'
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({ appId: 'pm-app' }),
+    BrowserModule.withServerTransition({ appId: 'app-root' }),
     BrowserTransferStateModule,
     AppModule
   ],