docs(toh-6-aot): add aot to toh-6 (#2496)

* docs(toh-6-aot): add aot to toh-6

s

s

s

s

s

* docs(toh-6-aot): add aot to toh-6

* docs(toh-6-aot): make aot e2e tests run in the same project
Updates tooling for this purpose and also the prose.

Author: thelgevold

gulpfile.js

@@ -296,7 +296,12 @@ function runE2eTsTests(appDir, outputFile) {
   var appBuildSpawnInfo = spawnExt('npm', ['run', config.build], { cwd: appDir });
   var appRunSpawnInfo = spawnExt('npm', ['run', config.run, '--', '-s'], { cwd: appDir });
 
-  return runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
+  var run = runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
+
+  if (fs.existsSync(appDir + '/aot/index.html')) {
+    run = run.then(() => runProtractorAoT(appDir, outputFile));
+  }
+  return run;
 }
 
 function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
@@ -341,6 +346,20 @@ function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
     }
 }
 
+function runProtractorAoT(appDir, outputFile) {
+  fs.appendFileSync(outputFile, '++ AoT version ++\n');
+  var aotBuildSpawnInfo = spawnExt('npm', ['run', 'build:aot'], { cwd: appDir });
+  var promise = aotBuildSpawnInfo.promise;
+
+  var copyFileCmd = 'copy-dist-files.js';
+  if (fs.existsSync(appDir + '/' + copyFileCmd)) {
+    promise = promise.then(() =>
+     spawnExt('node', [copyFileCmd], { cwd: appDir }).promise );
+  }
+  var aotRunSpawnInfo = spawnExt('npm', ['run', 'http-server:e2e', 'aot', '--', '-s'], { cwd: appDir });
+  return runProtractor(promise, appDir, aotRunSpawnInfo, outputFile);
+}
+
 // start the server in appDir/build/web; then run protractor with the specified
 // fileName; then shut down the example.  All protractor output is appended
 // to the outputFile.
@@ -883,7 +902,7 @@ function harpCompile() {
   gutil.log("NODE_ENV: " + process.env.NODE_ENV);
 
   if(argv.page) harpJsonSetJade2NgTo(true);
-  
+
   if(skipLangs && fs.existsSync(WWW) && backupApiHtmlFilesExist(WWW)) {
     gutil.log(`Harp site recompile: skipping recompilation of API docs for [${skipLangs}]`);
     gutil.log(`API docs will be copied from existing ${WWW} folder.`)

public/docs/_examples/_boilerplate/package.json

@@ -9,6 +9,7 @@
     "http-server:e2e": "http-server",
     "http-server:cli": "http-server dist/",
     "lite": "lite-server",
+    "lite:aot": "lite-server -c aot/bs-config.json",
     "postinstall": "typings install",
     "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
     "tsc": "tsc",
@@ -17,7 +18,8 @@
     "test:webpack": "karma start karma.webpack.conf.js",
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
     "build:cli": "ng build",
-    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup.js",
+    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "copy-dist-files": "node ./copy-dist-files.js",
     "i18n": "ng-xi18n"
   },
   "keywords": [],

public/docs/_examples/_boilerplate/tsconfig.json

@@ -10,5 +10,9 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "types": []
-  }
+  },
+  "exclude": [
+    "node_modules/*",
+    "**/*-aot.ts"
+  ]
 }

public/docs/_examples/cb-aot-compiler/ts/.gitignore

@@ -2,4 +2,4 @@
 **/*.metadata.json
 dist
 !app/tsconfig.json
-!rollup.js
+!rollup-config.js

public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts

@@ -13,5 +13,4 @@ export class AppComponent {
   toggleHeading() {
     this.showHeading = !this.showHeading;
   }
-
 }

public/docs/_examples/cb-aot-compiler/ts/index.html

@@ -9,7 +9,6 @@
 
     <script src="node_modules/core-js/client/shim.min.js"></script>
     <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
 
   </head>
 

public/docs/_examples/cb-aot-compiler/ts/rollup.js renamed to public/docs/_examples/cb-aot-compiler/ts/rollup-config.js

@@ -74,6 +74,7 @@
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.4",
     "rollup-plugin-commonjs": "^4.1.0",
+    "source-map-explorer": "^1.3.2",
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.2",
     "ts-node": "^1.3.0",

public/docs/_examples/package.json

@@ -1 +1,3 @@
 **/*.js
+aot/**/*.ts
+!rollup-config.js

public/docs/_examples/toh-6/ts/.gitignore

@@ -0,0 +1,5 @@
+{
+  "port": 8000,
+  "files": ["./aot/**/*.{html,htm,css,js}"],
+  "server": { "baseDir": "./aot" }
+}

public/docs/_examples/toh-6/ts/aot/bs-config.json

@@ -0,0 +1,20 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular Tour of Heroes</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <script src="shim.min.js"></script>
+    <script src="zone.min.js"></script>
+    <!-- #docregion moduleId -->
+    <script>window.module = 'aot';</script>
+    <!-- #enddocregion moduleId -->
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+  <script src="dist/build.js"></script>
+</html>

public/docs/_examples/toh-6/ts/aot/index.html

@@ -5,7 +5,6 @@ import { Component }          from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-
   template: `
     <h1>{{title}}</h1>
     <nav>

public/docs/_examples/toh-6/ts/app/app.component.ts

@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowser }    from '@angular/platform-browser';
+
+import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

public/docs/_examples/toh-6/ts/app/main-aot.ts

@@ -0,0 +1,11 @@
+// #docregion
+var fs = require('fs');
+var resources = [
+  'node_modules/core-js/client/shim.min.js',
+  'node_modules/zone.js/dist/zone.min.js'
+];
+resources.map(function(f) {
+  var path = f.split('/');
+  var t = 'aot/' + path[path.length-1];
+  fs.createReadStream(f).pipe(fs.createWriteStream(t));
+});

public/docs/_examples/toh-6/ts/copy-dist-files.js

@@ -1,3 +1,4 @@
+<!-- #docregion -->
 <!DOCTYPE html>
 <html>
   <head>

public/docs/_examples/toh-6/ts/index.html

@@ -0,0 +1,24 @@
+// #docregion
+import rollup      from 'rollup'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs    from 'rollup-plugin-commonjs';
+import uglify      from 'rollup-plugin-uglify'
+
+//paths are relative to the execution path
+export default {
+  entry: 'app/main-aot.js',
+  dest: 'aot/dist/build.js', // output a single application bundle
+  sourceMap: true,
+  sourceMapFile: 'aot/dist/build.js.map',
+  format: 'iife',
+  plugins: [
+      nodeResolve({jsnext: true, module: true}),
+      commonjs({
+        include: [
+          'node_modules/rxjs/**',
+          'node_modules/angular-in-memory-web-api/**'
+          ],
+      }),
+      uglify()
+  ]
+}

public/docs/_examples/toh-6/ts/rollup-config.js

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "types": []
+  },
+
+  "files": [
+    "app/app.module.ts",
+    "app/main-aot.ts",
+    "typings/index.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+   "genDir": "aot",
+   "skipMetadataEmit" : true
+ }
+}

public/docs/_examples/toh-6/ts/tsconfig-aot.json

@@ -21,4 +21,4 @@
   "include": [
     "*/e2e-spec.ts"
   ]
-}
+}