build: test cdk in aot and closure (#4142)

scripts/closure-compiler/build-devapp-bundle.sh

@@ -8,11 +8,13 @@ set -e -o pipefail
 # Go to the project root directory
 cd $(dirname $0)/../..
 
-# Build the demo-app and also create the release output.
-$(npm bin)/gulp build:devapp
-$(npm bin)/gulp :package:release
 
-# Rebuild demo-app with ES2015 modules. Closure compiler is then able to parse imports.
+# Build a release of the library and of the CDK package.
+$(npm bin)/gulp build:release
+$(npm bin)/gulp cdk:build-release
+
+# Build demo-app with ES2015 modules. Closure compiler is then able to parse imports.
+$(npm bin)/gulp :build:devapp:assets :build:devapp:scss
 $(npm bin)/tsc -p src/demo-app/tsconfig-build.json --target ES2015 --module ES2015
 
 # Re-compile RxJS sources into ES2015. Otherwise closure compiler can't parse it properly.
@@ -40,6 +42,7 @@ OPTS=(
   # List of path prefixes to be removed from ES6 & CommonJS modules.
   "--js_module_root=dist/packages"
   "--js_module_root=dist/releases/material"
+  "--js_module_root=dist/releases/cdk"
   "--js_module_root=node_modules/@angular/core"
   "--js_module_root=node_modules/@angular/common"
   "--js_module_root=node_modules/@angular/compiler"
@@ -56,8 +59,9 @@ OPTS=(
   "--formatting=PRETTY_PRINT"
   "--debug"
 
-  # Include the Material FESM bundle
+  # Include the Material and CDK FESM bundles
   dist/releases/material/@angular/material.js
+  dist/releases/cdk/@angular/cdk.js
 
   # Include all Angular FESM bundles.
   node_modules/@angular/core/@angular/core.js
@@ -90,4 +94,4 @@ echo ${OPTS[*]} > $closureFlags
 # Run the Google Closure compiler java runnable.
 java -jar node_modules/google-closure-compiler/compiler.jar --flagfile $closureFlags
 
-echo "Finished bundling the dev-app using google closure compiler.."
+echo "Finished bundling the dev-app using google closure compiler.."

scripts/release/publish-docs-content.sh

@@ -11,7 +11,7 @@ repoPath="/tmp/material2-docs-content"
 repoUrl="https://github.com/angular/material2-docs-content"
 examplesSource="./dist/docs/examples"
 
-$(npm bin)/gulp examples:release
+$(npm bin)/gulp examples:build-release:clean
 $(npm bin)/gulp docs
 
 # Get git meta info for commit

src/demo-app/system-config.ts

@@ -26,8 +26,7 @@ System.config({
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
 
     '@angular/material': 'dist/bundles/material.umd.js',
-    // NGC always adds the `index` suffix. As a temporary workaround just map it with that.
-    '@angular/cdk/index': 'dist/bundles/cdk.umd.js'
+    '@angular/cdk': 'dist/bundles/cdk.umd.js'
   },
   packages: {
     // Thirdparty barrels.

src/demo-app/tsconfig-aot.json

@@ -7,7 +7,8 @@
     "experimentalDecorators": true,
     "outDir": ".",
     "paths": {
-      "@angular/material": ["./material"]
+      "@angular/material": ["./material"],
+      "@angular/cdk": ["./cdk"]
     }
   },
   "files": [

src/demo-app/tsconfig-build.json

@@ -19,8 +19,8 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@angular/material": ["../../dist/packages/material"],
-      "@angular/cdk": ["../../dist/packages/cdk"]
+      "@angular/material": ["../../dist/packages/material/public_api"],
+      "@angular/cdk": ["../../dist/packages/cdk/public_api"]
     }
   },
   "files": [

src/e2e-app/system-config.ts

@@ -26,8 +26,7 @@ System.config({
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
 
     '@angular/material': 'dist/bundles/material.umd.js',
-    // NGC always adds the `index` suffix. As a temporary workaround just map it with that.
-    '@angular/cdk/index': 'dist/bundles/cdk.umd.js'
+    '@angular/cdk': 'dist/bundles/cdk.umd.js'
   },
   packages: {
     // Thirdparty barrels.

src/e2e-app/tsconfig-build.json

@@ -14,14 +14,12 @@
     "sourceMap": true,
     "target": "es5",
     "stripInternal": false,
-    "baseUrl": "",
     "typeRoots": [
       "../../node_modules/@types/!(node)"
     ],
+    "baseUrl": "",
     "paths": {
-      "@angular/material": [
-        "../../dist/packages/material"
-      ]
+      "@angular/material": ["../../dist/packages/material/public_api"]
     }
   },
   "angularCompilerOptions": {

src/lib/tsconfig-build.json

@@ -17,7 +17,7 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "@angular/cdk": ["../../dist/packages/cdk"]
+      "@angular/cdk": ["../../dist/packages/cdk/public_api"]
     }
   },
   "files": [

src/material-examples/tsconfig-build.json

@@ -17,7 +17,7 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "@angular/material": ["../../dist/packages/material"]
+      "@angular/material": ["../../dist/packages/material/public_api"]
     }
   },
   "files": [

tools/gulp/tasks/aot.ts

@@ -7,12 +7,17 @@ import {join} from 'path';
 const tsconfigFile = join(DIST_DEMOAPP, 'tsconfig-aot.json');
 
 /** Builds the demo-app and library. To be able to run NGC, apply the metadata workaround. */
-task('aot:deps', sequenceTask('build:devapp', ':package:release', 'aot:copy-release'));
+task('aot:deps', sequenceTask(
+  'build:devapp',
+  [':package:release', 'cdk:build-release'],
+  'aot:copy-release'
+));
 
 // As a workaround for https://github.com/angular/angular/issues/12249, we need to
-// copy the Material ESM output inside of the demo-app output.
+// copy the Material and CDK ESM output inside of the demo-app output.
 task('aot:copy-release', () => {
-  return copySync(join(DIST_RELEASES, 'material'), join(DIST_DEMOAPP, 'material'));
+  copySync(join(DIST_RELEASES, 'material'), join(DIST_DEMOAPP, 'material'));
+  copySync(join(DIST_RELEASES, 'cdk'), join(DIST_DEMOAPP, 'cdk'));
 });
 
 /** Build the demo-app and a release to confirm that the library is AOT-compatible. */

tools/gulp/tasks/cdk.ts

@@ -26,7 +26,8 @@ task('cdk:build', sequenceTask(
   'cdk:build:bundles',
 ));
 
-task('cdk:build-release', ['cdk:clean-build'], () => composeRelease('cdk'));
+task('cdk:build-release', ['cdk:build'], () => composeRelease('cdk'));
+task('cdk:build-release:clean', sequenceTask('clean', 'cdk:build-release'));
 
 /** [Watch task] Rebuilds the CDK whenever TS, SCSS, or HTML files change. */
 task('cdk:watch', () => {

tools/gulp/tasks/examples.ts

@@ -28,7 +28,8 @@ task('examples:build', sequenceTask(
   'examples:build:bundles',
 ));
 
-task('examples:release', ['examples:clean-build'], () => composeRelease('material-examples'));
+task('examples:build-release', ['examples:build'], () => composeRelease('material-examples'));
+task('examples:build-release:clean', sequenceTask('clean', 'examples:build-release'));
 
 /**
  * TypeScript compilation tasks. Tasks are creating ESM, FESM, UMD bundles for releases.

tools/gulp/util/rollup-helper.ts

@@ -14,9 +14,9 @@ const ROLLUP_GLOBALS = {
   '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
   '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
 
-  // NGC always adds the `index` suffix. As a temporary workaround just define that as a global.
-  '@angular/material/index': 'ng.material',
-  '@angular/cdk/index': 'ng.cdk',
+  // Local Angular packages inside of Material.
+  '@angular/material': 'ng.material',
+  '@angular/cdk': 'ng.cdk',
 
   // Rxjs dependencies
   'rxjs/Subject': 'Rx',