build: serve e2e-app in aot mode

* Starts building the e2e-app in AOT mode

Author: devversion

src/e2e-app/index.html

@@ -24,7 +24,7 @@
 
   <script>
     System.import('system-config.js').then(function () {
-      System.import('main');
+      System.import('main-aot');
     }).catch(console.error.bind(console));
   </script>
 </body>

src/e2e-app/main-aot.ts

@@ -0,0 +1,4 @@
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {E2eAppModuleNgFactory} from './e2e-app-module.ngfactory';
+
+platformBrowserDynamic().bootstrapModuleFactory(E2eAppModuleNgFactory);

src/e2e-app/main.ts

@@ -10,21 +10,26 @@
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noImplicitAny": true,
-    "outDir": "../../dist/packages/e2e-app",
+    "rootDir": ".",
+    "outDir": ".",
     "sourceMap": true,
     "target": "es5",
-    "stripInternal": false,
     "typeRoots": [
       "../../node_modules/@types/!(node)"
     ],
     "baseUrl": "",
     "paths": {
-      "@angular/material": ["../../dist/packages/material/public_api"]
+      "@angular/material": ["./material"],
+      "@angular/cdk": ["./cdk"]
     }
   },
+  "files": [
+    "./e2e-app-module.ts",
+    "./e2e-app-types.d.ts",
+    "./main-aot.ts",
+    "./system-config.ts"
+  ],
   "angularCompilerOptions": {
-    "genDir": "../../dist",
-    "skipTemplateCodegen": true,
-    "debug": true
+    "skipMetadataEmit": true
   }
 }

src/e2e-app/tsconfig-build.json

@@ -1,33 +1,49 @@
 import {task, watch} from 'gulp';
-import * as path from 'path';
-
-import {SOURCE_ROOT, DIST_E2EAPP, PROJECT_ROOT} from '../build-config';
-import {
-  tsBuildTask, copyTask, buildAppTask, execNodeTask, sequenceTask, serverTask
-} from '../util/task_helpers';
+import {join} from 'path';
+import {SOURCE_ROOT, DIST_E2EAPP, PROJECT_ROOT, DIST_RELEASES} from '../build-config';
+import {ngcBuildTask, copyTask, execNodeTask, sequenceTask, serverTask} from '../util/task_helpers';
+import {copySync} from 'fs-extra';
 
 // There are no type definitions available for these imports.
 const gulpConnect = require('gulp-connect');
 
-const appDir = path.join(SOURCE_ROOT, 'e2e-app');
+const appDir = join(SOURCE_ROOT, 'e2e-app');
 const outDir = DIST_E2EAPP;
 
-const PROTRACTOR_CONFIG_PATH = path.join(PROJECT_ROOT, 'test/protractor.conf.js');
-const tsconfigPath = path.join(appDir, 'tsconfig-build.json');
+const PROTRACTOR_CONFIG_PATH = join(PROJECT_ROOT, 'test/protractor.conf.js');
+const tsconfigPath = join(outDir, 'tsconfig-build.json');
 
-task(':watch:e2eapp', () => {
-  watch(path.join(appDir, '**/*.ts'), [':build:e2eapp:ts']);
-  watch(path.join(appDir, '**/*.html'), [':build:e2eapp:assets']);
-});
+/** Glob that matches all files that need to be copied to the output folder. */
+const assetsGlob = join(appDir, '**/*.+(html|css|json|ts)');
+
+/**
+ * Builds and serves the e2e-app and runs protractor once the e2e-app is ready.
+ */
+task('e2e', sequenceTask(
+  [':test:protractor:setup', 'serve:e2eapp'],
+  ':test:protractor',
+  ':serve:e2eapp:stop',
+  'screenshots',
+));
 
-/** Builds e2e app ts to js. */
-task(':build:e2eapp:ts', tsBuildTask(tsconfigPath));
+/** Task that builds the e2e-app in AOT mode. */
+task('e2e-app:build', sequenceTask(
+  'clean',
+  ['material:build-release', 'cdk:build-release'],
+  ['e2e-app:copy-release', 'e2e-app:copy-assets'],
+  'e2e-app:build-ts'
+));
 
-/** Copies e2e app assets (html, css) to build output. */
-task(':build:e2eapp:assets', copyTask(appDir, outDir));
+/** Task that copies all required assets to the output folder. */
+task('e2e-app:copy-assets', copyTask(assetsGlob, outDir));
 
-/** Builds the entire e2e app. */
-task('build:e2eapp', buildAppTask('e2eapp'));
+/** Task that builds the TypeScript sources. Those are compiled inside of the dist folder. */
+task('e2e-app:build-ts', ngcBuildTask(tsconfigPath));
+
+task(':watch:e2eapp', () => {
+  watch(join(appDir, '**/*.ts'), ['e2e-app:build']);
+  watch(join(appDir, '**/*.html'), ['e2e-app:copy-assets']);
+});
 
 /** Ensures that protractor and webdriver are set up to run. */
 task(':test:protractor:setup', execNodeTask('protractor', 'webdriver-manager', ['update']));
@@ -42,21 +58,18 @@ task(':serve:e2eapp', serverTask(outDir, false));
 task(':serve:e2eapp:stop', gulpConnect.serverClose);
 
 /** Builds and serves the e2e app. */
-task('serve:e2eapp', sequenceTask('build:e2eapp', ':serve:e2eapp'));
+task('serve:e2eapp', sequenceTask('e2e-app:build', ':serve:e2eapp'));
 
 /**
  * [Watch task] Builds and serves e2e app, rebuilding whenever the sources change.
  * This should only be used when running e2e tests locally.
  */
 task('serve:e2eapp:watch', ['serve:e2eapp', 'material:watch', ':watch:e2eapp']);
 
-/**
- * Builds and serves the e2e-app and runs protractor once the e2e-app is ready.
- */
-task('e2e', sequenceTask(
-  [':test:protractor:setup', 'serve:e2eapp'],
-  ':test:protractor',
-  ':serve:e2eapp:stop',
-  'screenshots',
-));
+// As a workaround for https://github.com/angular/angular/issues/12249, we need to
+// copy the Material and CDK ESM output inside of the demo-app output.
+task('e2e-app:copy-release', () => {
+  copySync(join(DIST_RELEASES, 'material'), join(outDir, 'material'));
+  copySync(join(DIST_RELEASES, 'cdk'), join(outDir, 'cdk'));
+});
 

tools/gulp/tasks/e2e.ts

@@ -37,7 +37,7 @@ export function tsBuildTask(tsConfigPath: string) {
   return execNodeTask('typescript', 'tsc', ['-p', tsConfigPath]);
 }
 
-/** Creates a task that runs the Angular compiler CLI. */
+/** Creates a task that runs the Angular Compiler CLI. */
 export function ngcBuildTask(tsConfigPath: string) {
   return execNodeTask('@angular/compiler-cli', 'ngc', ['-p', tsConfigPath]);
 }