fix: initial work on aot compilation (#17)

Author: patrickmichalina

package-lock.json

@@ -69,6 +69,7 @@
     "zone.js": "^0.8.26"
   },
   "dependencies": {
+    "@angular/compiler-cli": "^6.1.0-beta.2",
     "ajv": "^6.5.1",
     "chalk": "^2.4.1",
     "favicons": "^5.1.1",
@@ -77,7 +78,7 @@
     "npm": "^6.1.0",
     "rxjs": "^6.2.1",
     "ts-node": "^6.1.2",
-    "typescript": "^2.9.2",
+    "typescript": "2.7.2",
     "uglify-js": "^3.4.1",
     "yargs": "^11.0.0"
   },

package.json

@@ -5,74 +5,31 @@ import { FuseBox, JSONPlugin, QuantumPlugin } 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'
 
-// function test() {
-//   // const fuseBrowser = FuseBox.init({
-//   //   homeDir: "src/browser",
-//   //   output: ".dist/public/js/$name.js",
-//   //   target: 'browser@es5',
-//   //   plugins: [
-//   //     // NgProdPlugin({ enabled: opts.productionBuild }),
-//   //     // NgPolyfillPlugin(),
-//   //     // NgCompilerPlugin({ enabled: opts.enableAotCompilaton }),
-//   //     // NgOptimizerPlugin({ enabled: opts.enableAngularBuildOptimizer }),
-//   //     // opts.productionBuild && QuantumPlugin({
-//   //     //   warnings: false,
-//   //     //   uglify: false,
-//   //     //   treeshake: false,
-//   //     //   bakeApiIntoBundle: 'vendor'
-//   //     //   // replaceProcessEnv: false,
-//   //     //   // processPolyfill: true,
-//   //     //   // ensureES5: true
-//   //     // })
-//   //   ] as any
-//   // })
-
-//   const fuseServer = FuseBox.init({
-//     target: 'server@es5',
-//     homeDir,
-//     output: `${outputDir}/$name.js`,
-//     plugins: [
-//       // NgProdPlugin({ enabled: opts.productionBuild, fileTest: 'server.angular.module' }),
-//       // NgPolyfillPlugin({ isServer: true, fileTest: 'server.angular.module' })
-//     ]
-//   })
-
-//   // const mainAppEntry = opts.enableAotCompilaton
-//   //   ? 'main.aot.ts'
-//   //   : 'main.ts'
-
-//   // fuseBrowser
-//   //   .bundle('vendor')
-//   //   .instructions(` ~ ${mainAppEntry}`)
-
-//   // fuseBrowser
-//   //   .bundle('app')
-//   //   .watch('src/**')
-//   //   .instructions(` !> [${mainAppEntry}]`)
-
-//   fuseServer
-//     .bundle("server")
-//     .watch("src/**")
-//     .instructions(" > [server/server.ts]")
-//     .completed(proc => proc.start())
-// }
-
 command(
-  'serve [port][prod]',
+  'serve [port][prod][aot][sw]',
   'serve your application',
   args => {
     return args
   },
   args => {
-    serve(args.prod)
+    serve(args.prod, args.aot)
   }
 )
   .option('prod', {
     default: false,
     description: 'Run with optimizations enabled'
   })
+  .option('aot', {
+    default: false,
+    description: 'Pass through AOT Compiler'
+  })
+  .option('sw', {
+    default: false,
+    description: 'Enable service-worker'
+  })
   .option('port', {
     default: 5000,
     description: 'Http server port number'
@@ -82,7 +39,7 @@ function logServeCommandStart() {
   logInfo('Launching Serve Command')
 }
 
-function serve(isProdBuild = false) {
+function serve(isProdBuild = false, isAotBuild = false) {
   readConfig_()
     .pipe(
       tap(logServeCommandStart),
@@ -91,10 +48,14 @@ function serve(isProdBuild = false) {
     .subscribe(config => {
       const cache = !isProdBuild
       const log = config.fusebox.verbose || false
-      const homeDir = resolve(config.fusebox.server.homeDir)
+      const homeDir = resolve('.')
       const serverOutput = resolve(config.fusebox.server.outputDir)
       const browserOutput = resolve(config.fusebox.browser.outputDir)
       const modulesFolder = resolve(process.cwd(), 'node_modules')
+      const watchDir = `${homeDir}/src/**`
+      const browserModule = isAotBuild
+        ? config.fusebox.browser.aotBrowserModule
+        : config.fusebox.browser.browserModule
 
       const fuseBrowser = FuseBox.init({
         log,
@@ -103,10 +64,11 @@ function serve(isProdBuild = false) {
         cache,
         output: `${browserOutput}/$name.js`,
         target: 'browser@es5',
+        useTypescriptCompiler: true,
         plugins: [
           NgProdPlugin({ enabled: isProdBuild }),
+          NgCompilerPlugin({ enabled: isAotBuild }),
           NgPolyfillPlugin(),
-          // NgCompilerPlugin({ enabled: opts.enableAotCompilaton }),
           // NgOptimizerPlugin({ enabled: opts.enableAngularBuildOptimizer }),
           isProdBuild &&
             QuantumPlugin({
@@ -131,29 +93,29 @@ function serve(isProdBuild = false) {
         plugins: [
           JSONPlugin(),
           NgProdPlugin({
-            enabled: isProdBuild,
-            fileTest: 'server.angular.module'
+            enabled: true,
+            fileTest: 'server.angular.module.ts'
           }),
           NgPolyfillPlugin({
             isServer: true,
-            fileTest: 'server.angular.module'
+            fileTest: 'server.angular.module.ts'
           })
         ]
       })
 
       fuseBrowser
         .bundle('vendor')
-        .watch(`**`)
-        .instructions(` ~ ${config.fusebox.browser.browserModule}`)
+        .watch(watchDir)
+        .instructions(` ~ ${browserModule}`)
 
       fuseBrowser
         .bundle('app')
-        .watch(`**`)
-        .instructions(` !> [${config.fusebox.browser.browserModule}]`)
+        .watch(watchDir)
+        .instructions(` !> [${browserModule}]`)
 
       fuseServer
         .bundle('server')
-        .watch(`**`)
+        .watch(watchDir)
         .instructions(` > [${config.fusebox.server.serverModule}]`)
         .completed(proc => proc.start())
 

src/commands/serve.ts

@@ -0,0 +1,32 @@
+import { main as ngc } from '@angular/compiler-cli/src/main'
+import { Plugin, File } from 'fuse-box'
+import { resolve } from 'path'
+
+// tslint:disable:no-class
+// tslint:disable:no-this
+// tslint:disable:no-if-statement
+// tslint:disable:no-object-mutation
+// tslint:disable:readonly-keyword
+const defaults: NgcPluginOptions = {}
+
+export interface NgcPluginOptions {
+  enabled?: boolean
+}
+
+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) =>
+  new NgcPluginClass(options)

src/fusebox/ng.compiler.plugin.ts

@@ -55,7 +55,7 @@ export class NgPolyfillPluginClass implements Plugin {
   constructor(private opts: NgPolyfillPluginOptions = defaults) {}
   public test: RegExp =
     (this.opts.fileTest && new RegExp(this.opts.fileTest)) ||
-    /(app.browser.module.ts)/
+    /(app.browser.module.(ts|js))/
   public dependencies: ['zone.js', 'core-js']
 
   onTypescriptTransform(file: File) {

src/fusebox/ng.polyfill.plugin.ts

@@ -23,7 +23,7 @@ export class NgProdPluginClass implements Plugin {
   }
 
   public dependencies: ['@angular/core']
-  public test = this.regex || /(main.ts|main.aot.ts)/
+  public test = this.regex || /app.browser.module.(ts|js)/
 
   get regex() {
     return (
@@ -34,8 +34,10 @@ export class NgProdPluginClass implements Plugin {
 
   onTypescriptTransform(file: File) {
     if (!this.opts.enabled || !this.test.test(file.relativePath)) return
-    file.contents = `import { enableProdMode } from '@angular/core';
-    enableProdMode()
+    file.contents = `
+    import { enableProdMode } from '@angular/core';
+    enableProdMode();
+    
     ${file.contents}`
   }
 }

src/fusebox/ng.prod.plugin.ts

@@ -27,11 +27,13 @@ export const ANGULAR_UNIVERSAL_DEPS = {
 }
 
 export const ANGULAR_UNIVERSAL_DEV_DEPS = {
+  '@types/compression': '^0.0.36',
   '@types/cookie-parser': '^1.4.1',
   '@types/express': '^4.16.0'
 }
 
 export const ANGULAR_UNIVERSAL_EXPRESS_DEPS = {
+  compression: '^1.7.2',
   'cookie-parser': '^1.4.3',
   express: '^4.16.3',
   'express-minify-html': '^0.12.0'

src/generators/deps.const.ts

@@ -1,11 +1,20 @@
 import { writeFile_, writeFileSafely_ } from '../utilities/rx-fs'
 import { resolve } from 'path'
+import { forkJoin } from 'rxjs'
 import * as tsconfig from '../templates/tsconfig.json.txt'
+import * as aotTsconfig from '../templates/tsconfig.aot.json.txt'
 
 const configPath = 'tsconfig.json'
+const configPath2 = 'tsconfig.aot.json'
 
 export default function generateTsConfig(dir: string, overwrite = false) {
   return overwrite
-    ? writeFile_(resolve(dir, configPath), tsconfig)
-    : writeFileSafely_(resolve(dir, configPath), tsconfig)
+    ? forkJoin([
+        writeFile_(resolve(dir, configPath), tsconfig),
+        writeFile_(resolve(dir, configPath2), aotTsconfig)
+      ])
+    : forkJoin([
+        writeFileSafely_(resolve(dir, configPath), tsconfig),
+        writeFileSafely_(resolve(dir, configPath2), aotTsconfig)
+      ])
 }

src/generators/tsconfig.gen.ts

@@ -1,12 +1,12 @@
 import * as express from 'express'
 import * as cookieParser from 'cookie-parser'
+import * as compression from 'compression'
 import { resolve } from 'path'
 import { ngExpressEngine } from '@nguniversal/express-engine'
 import { AppServerModule } from './server.angular.module'
 import { stat, writeFile } from 'fs'
 import * as config from '../../fusing-angular.json'
 
-// const shrinkRay = require('shrink-rayed')
 // const minifyHTML = require('express-minify-html')
 // const xhr2 = require('xhr2')
 
@@ -32,7 +32,7 @@ const publicDir = `${dir}/public`
 // }
 
 expressApp.use(cookieParser())
-// expressApp.use(shrinkRay())
+expressApp.use(compression())
 
 expressApp.use('/favicon.ico', (req, res) => res.sendStatus(204)) // TODO: FAVICONS
 expressApp.use('/js', express.static(`${publicDir}/js`, { fallthrough: false }))

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

@@ -1,16 +1,15 @@
 export const FUSEBOX_DEFAULTS = {
   verbose: false,
   browser: {
-    homeDir: 'src',
     outputDir: '.dist/public/js',
-    browserModule: 'browser/app.browser.module.ts',
+    browserModule: 'src/browser/app.browser.jit.entry.ts',
+    aotBrowserModule: '.aot/src/browser/app.browser.aot.entry.js',
     prod: {
       uglify: true,
       treeshake: true
     }
   },
   server: {
-    homeDir: 'src',
     outputDir: '.dist',
     serverModule: 'server/server.ts'
   }