chore(build): verify aot compilation works for components (#2504)

.travis.yml

@@ -30,7 +30,7 @@ env:
   matrix:
     # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
     - MODE=lint
-    - MODE=extract_metadata
+    - MODE=aot
     - MODE=e2e
     - MODE=saucelabs_required
     - MODE=browserstack_required

scripts/ci/build-and-test.sh

@@ -17,8 +17,8 @@ if is_lint; then
   $(npm bin)/gulp ci:lint
 elif is_e2e; then
   $(npm bin)/gulp ci:e2e
-elif is_extract_metadata; then
-  $(npm bin)/gulp ci:extract-metadata
+elif is_aot; then
+  $(npm bin)/gulp ci:aot
 else
   $(npm bin)/gulp ci:test
 fi

scripts/ci/sources/mode.sh

@@ -9,6 +9,6 @@ is_lint() {
   [[ "$MODE" = lint ]]
 }
 
-is_extract_metadata() {
-  [[ "$MODE" = extract_metadata ]]
-}
+is_aot() {
+  [[ "$MODE" = aot ]]
+}

src/demo-app/main-aot.ts

@@ -0,0 +1,8 @@
+/**
+ * This is the main entry-point for the AOT compilation. File will be used to test AOT support.
+ */
+
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {DemoAppModuleNgFactory} from './demo-app-module.ngfactory';
+
+platformBrowserDynamic().bootstrapModuleFactory(DemoAppModuleNgFactory);

src/demo-app/tsconfig-aot.json

@@ -0,0 +1,30 @@
+/* Config file for the Angular Compiler. Paths need to be relative to the dist folder. */
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "es2015", "dom"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noImplicitAny": true,
+    "target": "es5",
+    "baseUrl": "",
+    "typeRoots": [
+      "../node_modules/@types"
+    ],
+    "paths": {
+      "@angular/material": [
+        "./@angular/material"
+      ]
+    }
+  },
+  "files": [
+    "./demo-app-module.ts",
+    "./main-aot.ts"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": false,
+    "debug": true
+  }
+}

tools/gulp/gulpfile.ts

@@ -10,3 +10,4 @@ import './tasks/release';
 import './tasks/serve';
 import './tasks/unit-test';
 import './tasks/docs';
+import './tasks/aot';

tools/gulp/tasks/aot.ts

@@ -0,0 +1,21 @@
+import {task} from 'gulp';
+import {join} from 'path';
+import {DIST_ROOT} from '../constants';
+import {execNodeTask, sequenceTask} from '../task_helpers';
+
+/** Copies the source files of the demo-app to the dist folder. */
+task('aot:copy', [':build:devapp:scss', ':build:devapp:assets']);
+
+/**
+ * Prepares the AOT compilation by copying the demo-app and building the components with their
+ * associated metadata files from the Angular compiler.
+ */
+task('aot:prepare', sequenceTask(
+  'clean',
+  ['aot:copy', 'build:components:release', ':build:components:ngc'])
+);
+
+/** Builds the demo-app with the Angular compiler to verify that all components work. */
+task('aot:build', ['aot:prepare'], execNodeTask(
+  '@angular/compiler-cli', 'ngc', ['-p', join(DIST_ROOT, 'tsconfig-aot.json')])
+);

tools/gulp/tasks/ci.ts

@@ -3,7 +3,6 @@ import {task} from 'gulp';
 
 task('ci:lint', ['ci:forbidden-identifiers', 'lint']);
 
-task('ci:extract-metadata', [':build:components:ngc']);
 task('ci:forbidden-identifiers', function() {
   require('../../../scripts/ci/forbidden-identifiers.js');
 });
@@ -12,3 +11,6 @@ task('ci:forbidden-identifiers', function() {
 task('ci:test', ['test:single-run'], () => process.exit(0));
 
 task('ci:e2e', ['e2e:single-run']);
+
+/** Task to verify that all components work with AOT compilation. */
+task('ci:aot', ['aot:build']);