build: serve e2e-app in aot mode (#4833)

* build: serve e2e-app in aot mode

* Starts building the e2e-app in AOT mode

* Address comments

src/demo-app/main-aot.ts

@@ -2,7 +2,7 @@
  * 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 {platformBrowser} from '@angular/platform-browser';
 import {DemoAppModuleNgFactory} from './demo-app-module.ngfactory';
 
-platformBrowserDynamic().bootstrapModuleFactory(DemoAppModuleNgFactory);
+platformBrowser().bootstrapModuleFactory(DemoAppModuleNgFactory);

src/e2e-app/main.ts

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

src/e2e-app/tsconfig-build.json

@@ -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.ts",
+    "./system-config.ts"
+  ],
   "angularCompilerOptions": {
-    "genDir": "../../dist",
-    "skipTemplateCodegen": true,
-    "debug": true
+    "skipMetadataEmit": true
   }
 }

tools/gulp/tasks/e2e.ts

@@ -1,34 +1,50 @@
 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');
+
+/** 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',
+));
+
+/** 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'
+));
+
+/** Task that copies all required assets to the output folder. */
+task('e2e-app:copy-assets', copyTask(assetsGlob, outDir));
+
+/** 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(path.join(appDir, '**/*.ts'), [':build:e2eapp:ts']);
-  watch(path.join(appDir, '**/*.html'), [':build:e2eapp:assets']);
+  watch(join(appDir, '**/*.ts'), ['e2e-app:build']);
+  watch(join(appDir, '**/*.html'), ['e2e-app:copy-assets']);
 });
 
-/** Builds e2e app ts to js. */
-task(':build:e2eapp:ts', tsBuildTask(tsconfigPath));
-
-/** Copies e2e app assets (html, css) to build output. */
-task(':build:e2eapp:assets', copyTask(appDir, outDir));
-
-/** Builds the entire e2e app. */
-task('build:e2eapp', buildAppTask('e2eapp'));
-
 /** Ensures that protractor and webdriver are set up to run. */
 task(':test:protractor:setup', execNodeTask('protractor', 'webdriver-manager', ['update']));
 
@@ -42,7 +58,7 @@ 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.
@@ -50,13 +66,10 @@ task('serve:e2eapp', sequenceTask('build:e2eapp', ':serve:e2eapp'));
  */
 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/universal.ts

@@ -1,5 +1,5 @@
 import {task} from 'gulp';
-import {DIST_RELEASES, DIST_ROOT, SOURCE_ROOT} from '../constants';
+import {DIST_RELEASES, DIST_ROOT, SOURCE_ROOT} from '../build-config';
 import {ngcBuildTask, tsBuildTask, copyTask, sequenceTask, execTask} from '../util/task_helpers';
 import {join} from 'path';
 import {copySync} from 'fs-extra';

tools/gulp/util/task_helpers.ts

@@ -38,7 +38,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]);
 }