build: build cdk package (#4111)

* Introduces another package called `@angular/cdk`. This package is
currently empty but all the logic for SASS, HTML, TypeScript and tests
is ready.

src/cdk/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@angular/cdk",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular Material Component Development Kit",
+  "main": "./bundles/cdk.umd.js",
+  "module": "./@angular/cdk.es5.js",
+  "es2015": "./@angular/cdkjs",
+  "typings": "./cdk.d.ts",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/material2.git"
+  },
+  "keywords": [
+    "angular",
+    "cdk",
+    "component",
+    "development",
+    "kit"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/material2/issues"
+  },
+  "homepage": "https://github.com/angular/material2#readme",
+  "peerDependencies": {
+    "@angular/core": "^4.0.0",
+    "@angular/common": "^4.0.0"
+  }
+}

src/cdk/public_api.ts

@@ -0,0 +1 @@
+export const __TEMP__ = -1;

src/cdk/tsconfig-build.json

@@ -0,0 +1,31 @@
+// TypeScript config file that is used to compile the cdk package. Target environment needs to be
+// ES2015 since the build process will create FESM bundles using rollup.
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "stripInternal": false,
+    "experimentalDecorators": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "../../dist/packages/cdk",
+    "paths": {},
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "target": "es2015",
+    "lib": ["es2015", "dom"],
+    "skipLibCheck": true,
+    "types": []
+  },
+  "files": [
+    "public_api.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/cdk",
+    "skipTemplateCodegen": true
+  }
+}

src/cdk/tsconfig-tests.json

@@ -0,0 +1,16 @@
+// TypeScript config file that extends the default tsconfig file for the cdk. This config is
+// used to compile the tests for Karma. Since the code will run inside of the browser, the target
+// needs to be ES5. The format needs to be CommonJS since Karma only supports that module format.
+{
+  "extends": "./tsconfig-build",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "types": ["jasmine"],
+    "experimentalDecorators": true
+  },
+  "include": [
+    "**/*.spec.ts"
+  ],
+  "files": null
+}

src/demo-app/system-config.ts

@@ -24,7 +24,10 @@ System.config({
       'node:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
     '@angular/platform-browser-dynamic':
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/material': 'dist/bundles/material.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'
   },
   packages: {
     // Thirdparty barrels.

src/demo-app/tsconfig-build.json

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

src/e2e-app/system-config.ts

@@ -24,7 +24,10 @@ System.config({
       'node:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
     '@angular/platform-browser-dynamic':
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/material': 'dist/bundles/material.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'
   },
   packages: {
     // Thirdparty barrels.

src/lib/system-config-spec.ts

@@ -1,46 +0,0 @@
-/** Type declaration for ambient System. */
-declare const System: any;
-
-// Apply the CLI SystemJS configuration.
-System.config({
-  paths: {
-    'node:*': 'node_modules/*'
-  },
-  map: {
-    'rxjs': 'node:rxjs',
-    'main': 'main.js',
-
-    // Angular specific mappings.
-    '@angular/core': 'node:@angular/core/bundles/core.umd.js',
-    '@angular/core/testing': 'node:@angular/core/bundles/core-testing.umd.js',
-    '@angular/common': 'node:@angular/common/bundles/common.umd.js',
-    '@angular/common/testing': 'node:@angular/common/bundles/common-testing.umd.js',
-    '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
-    '@angular/compiler/testing': 'node:@angular/compiler/bundles/compiler-testing.umd.js',
-    '@angular/http': 'node:@angular/http/bundles/http.umd.js',
-    '@angular/http/testing': 'node:@angular/http/bundles/http-testing.umd.js',
-    '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
-    '@angular/forms/testing': 'node:@angular/forms/bundles/forms-testing.umd.js',
-    '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',
-    '@angular/animations/browser': 'node:@angular/animations/bundles/animations-browser.umd.js',
-    '@angular/platform-browser/animations':
-      'node:@angular/platform-browser/bundles/platform-browser-animations.umd',
-    '@angular/platform-browser':
-      'node:@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser/testing':
-      'node:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-    '@angular/platform-browser-dynamic':
-      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/platform-browser-dynamic/testing':
-      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js'
-  },
-  packages: {
-    // Thirdparty barrels.
-    'rxjs': { main: 'index' },
-    // Set the default extension for the root package, because otherwise the demo-app can't
-    // be built within the production mode. Due to missing file extensions.
-    '.': {
-      defaultExtension: 'js'
-    }
-  }
-});

src/lib/tsconfig-build.json

@@ -2,21 +2,23 @@
 // ES2015 since the build process will create FESM bundles using rollup.
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "declaration": true,
     "stripInternal": false,
     "experimentalDecorators": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/material",
-    "paths": {},
     "rootDir": ".",
     "sourceMap": true,
     "inlineSources": true,
     "target": "es2015",
     "lib": ["es2015", "dom"],
     "skipLibCheck": true,
-    "types": []
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "@angular/cdk": ["../../dist/packages/cdk"]
+    }
   },
   "files": [
     "public_api.ts",

src/lib/tsconfig-tests.json

@@ -1,5 +1,5 @@
 // TypeScript config file that extends the default tsconfig file for the library. This config is 
-// used to compile the specs for Karma. Since the code will run inside of the browser, the target
+// used to compile the tests for Karma. Since the code will run inside of the browser, the target
 // needs to be ES5. The format needs to be CommonJS since Karma only supports that module format.
 {
   "extends": "./tsconfig-build",
@@ -10,7 +10,7 @@
     "experimentalDecorators": true
   },
   "include": [
-    "system-config-spec.ts",
     "**/*.spec.ts"
-  ]
+  ],
+  "files": null
 }

src/lib/typings.d.ts

@@ -1 +1 @@
-declare const module: {id: string};
+declare var module: {id: string};

src/material-examples/tsconfig-build.json

@@ -2,25 +2,23 @@
 // ES2015 since the build process will create FESM bundles using rollup.
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "declaration": true,
     "stripInternal": false,
     "experimentalDecorators": true,
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/examples",
-    "paths": {
-      "@angular/material": [
-        "../../dist/packages/material"
-      ]
-    },
     "rootDir": ".",
     "sourceMap": true,
     "inlineSources": true,
     "target": "es2015",
     "lib": ["es2015", "dom"],
     "skipLibCheck": true,
-    "types": []
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "@angular/material": ["../../dist/packages/material"]
+    }
   },
   "files": [
     "public_api.ts"

src/tsconfig.json

@@ -5,16 +5,16 @@
     "experimentalDecorators": true,
     "module": "es2015",
     "moduleResolution": "node",
-    "outDir": "../../dist/packages/all",
+    "outDir": "../dist/packages/all",
     "sourceMap": true,
     "inlineSources": true,
     "target": "es2015",
     "lib": ["es2015", "dom"],
     "types": ["jasmine"],
+    "baseUrl": ".",
     "paths": {
-      "@angular/material": [
-        "../../dist/packages/material"
-      ]
+      "@angular/material": ["./lib/public_api.ts"],
+      "@angular/cdk": ["./cdk/public_api.ts"]
     }
   }
 }

test/karma-test-shim.js

@@ -5,15 +5,60 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
 __karma__.loaded = function () {};
 
 var baseDir = '/base';
-var configFile = baseDir + '/dist/packages/material/system-config-spec.js';
 var specFiles = Object.keys(window.__karma__.files).filter(isMaterialSpecFile);
 
-// Configure the base path for dist/
-System.config({ baseURL: baseDir });
+// Configure the base path and map the different node packages.
+System.config({
+  baseURL: baseDir,
+  paths: {
+    'node:*': 'node_modules/*'
+  },
+  map: {
+    'rxjs': 'node:rxjs',
+    'main': 'main.js',
 
-// Load the spec SystemJS configuration file.
-System.import(configFile)
-  .then(configureTestBed)
+    // Angular specific mappings.
+    '@angular/core': 'node:@angular/core/bundles/core.umd.js',
+    '@angular/core/testing': 'node:@angular/core/bundles/core-testing.umd.js',
+    '@angular/common': 'node:@angular/common/bundles/common.umd.js',
+    '@angular/common/testing': 'node:@angular/common/bundles/common-testing.umd.js',
+    '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
+    '@angular/compiler/testing': 'node:@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/http': 'node:@angular/http/bundles/http.umd.js',
+    '@angular/http/testing': 'node:@angular/http/bundles/http-testing.umd.js',
+    '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
+    '@angular/forms/testing': 'node:@angular/forms/bundles/forms-testing.umd.js',
+    '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',
+    '@angular/animations/browser': 'node:@angular/animations/bundles/animations-browser.umd.js',
+    '@angular/platform-browser/animations':
+      'node:@angular/platform-browser/bundles/platform-browser-animations.umd',
+    '@angular/platform-browser':
+      'node:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser/testing':
+      'node:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic':
+      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/platform-browser-dynamic/testing':
+      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+
+    // Path mappings for local packages that can be imported inside of tests.
+    '@angular/material': 'dist/bundles/material.umd.js',
+    '@angular/cdk': 'dist/bundles/cdk.umd.js',
+  },
+  packages: {
+    // Thirdparty barrels.
+    'rxjs': {main: 'index'},
+
+    // Set the default extension for the root package, because otherwise the demo-app can't
+    // be built within the production mode. Due to missing file extensions.
+    '.': {
+      defaultExtension: 'js'
+    }
+  }
+});
+
+// Configure the Angular test bed and run all specs once configured.
+ configureTestBed()
   .then(runMaterialSpecs)
   .then(__karma__.start, __karma__.error);
 
@@ -47,4 +92,4 @@ function configureTestBed() {
       testingBrowser.platformBrowserDynamicTesting()
     );
   });
-}
+}

test/karma.conf.js

@@ -33,20 +33,18 @@ module.exports = (config) => {
       {pattern: 'test/karma-test-shim.js', included: true, watched: false},
 
       // Include a Material theme in the test suite.
-      {pattern: 'dist/**/core/theming/prebuilt/indigo-pink.css', included: true, watched: true},
+      {pattern: 'dist/packages/**/core/theming/prebuilt/indigo-pink.css', included: true, watched: true},
 
-      // Includes Material spec and source files into karma. Those files will be watched.
-      {pattern: 'dist/packages/material/**/*.js', included: false, watched: true},
-
-      // Paths to support debugging with source maps in dev tools
-      {pattern: 'dist/**/*.ts', included: false, watched: false},
-      {pattern: 'dist/**/*.js.map', included: false, watched: false}
+      // Includes all package tests and source files into karma. Those files will be watched.
+      // This pattern also matches all all sourcemap files and TypeScript files for debugging.
+      {pattern: 'dist/packages/**/*', included: false, watched: true},
+      {pattern: 'dist/bundles/*.umd.js', included: false, watched: true},
     ],
 
     customLaunchers: customLaunchers,
 
     preprocessors: {
-      'dist/**/*.js': ['sourcemap']
+      'dist/packages/**/*.js': ['sourcemap']
     },
 
     reporters: ['dots'],
@@ -103,7 +101,7 @@ module.exports = (config) => {
     if (process.env['TRAVIS_PULL_REQUEST'] === 'false' &&
         process.env['MODE'] === "browserstack_required") {
 
-      config.preprocessors['dist/@angular/material/**/!(*+(.|-)spec).js'] = ['coverage'];
+      config.preprocessors['dist/packages/**/!(*+(.|-)spec).js'] = ['coverage'];
       config.reporters.push('coverage');
     }
 

tools/gulp/constants.ts

@@ -13,6 +13,7 @@ export const DIST_BUNDLES = join(DIST_ROOT, 'bundles');
 
 /** Output subdirectory where all library artifacts will be written (compiled JS, CSS, etc.) */
 export const DIST_MATERIAL = join(DIST_ROOT, 'packages', 'material');
+export const DIST_CDK = join(DIST_ROOT, 'packages', 'cdk');
 export const DIST_DEMOAPP = join(DIST_ROOT, 'packages', 'demo-app');
 export const DIST_E2EAPP = join(DIST_ROOT, 'packages', 'e2e-app');
 export const DIST_EXAMPLES = join(DIST_ROOT, 'packages', 'examples');

tools/gulp/gulpfile.ts

@@ -13,3 +13,4 @@ import './tasks/payload';
 import './tasks/coverage';
 import './tasks/library';
 import './tasks/examples';
+import './tasks/cdk';

tools/gulp/tasks/cdk.ts

@@ -0,0 +1,55 @@
+import {task, watch} from 'gulp';
+import {join} from 'path';
+import {main as tsc} from '@angular/tsc-wrapped';
+import {SOURCE_ROOT, DIST_CDK} from '../constants';
+import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
+import {buildPackageBundles, composeRelease} from '../util/package-build';
+
+// There are no type definitions available for these imports.
+const inlineResources = require('../../../scripts/release/inline-resources');
+
+const cdkRoot = join(SOURCE_ROOT, 'cdk');
+
+const tsconfigBuild = join(cdkRoot, 'tsconfig-build.json');
+const tsconfigTests = join(cdkRoot, 'tsconfig-tests.json');
+
+// Paths to the different output files and directories.
+const esmMainFile = join(DIST_CDK, 'index.js');
+
+task('cdk:clean-build', sequenceTask('clean', 'cdk:build'));
+
+task('cdk:build', sequenceTask(
+  ['cdk:build:esm', 'cdk:assets'],
+  // Inline assets into ESM output.
+  'cdk:assets:inline',
+  // Build bundles on top of inlined ESM output.
+  'cdk:build:bundles',
+));
+
+task('cdk:build-release', ['cdk:clean-build'], () => composeRelease('cdk'));
+
+/** [Watch task] Rebuilds the CDK whenever TS, SCSS, or HTML files change. */
+task('cdk:watch', () => {
+  watch(join(cdkRoot, '**/*.ts'), ['cdk:build', triggerLivereload]);
+  watch(join(cdkRoot, '**/*.scss'), ['cdk:build', triggerLivereload]);
+  watch(join(cdkRoot, '**/*.html'), ['cdk:build', triggerLivereload]);
+});
+
+/**
+ * TypeScript compilation tasks. Tasks are creating ESM, FESM, UMD bundles for releases.
+ */
+
+task('cdk:build:esm', () => tsc(tsconfigBuild, {basePath: cdkRoot}));
+task('cdk:build:bundles', () => buildPackageBundles(esmMainFile, 'cdk'));
+
+task('cdk:build:esm:tests', () => tsc(tsconfigTests, {basePath: cdkRoot}));
+
+/**
+ * Asset tasks. Building SASS files and inlining CSS, HTML files into the ESM output.
+ */
+
+task('cdk:assets', ['cdk:assets:scss', 'cdk:assets:html']);
+
+task('cdk:assets:scss', sassBuildTask(DIST_CDK, cdkRoot, true));
+task('cdk:assets:html', copyTask(join(cdkRoot, '**/*.+(html|scss)'), DIST_CDK));
+task('cdk:assets:inline', () => inlineResources(DIST_CDK));

tools/gulp/tasks/examples.ts

@@ -3,7 +3,7 @@ import {join} from 'path';
 import {main as tsc} from '@angular/tsc-wrapped';
 import {SOURCE_ROOT, DIST_EXAMPLES} from '../constants';
 import {sequenceTask, copyTask} from '../util/task_helpers';
-import {buildModuleEntry, composeRelease} from '../util/package-build';
+import {buildPackageBundles, composeRelease} from '../util/package-build';
 
 // There are no type definitions available for these imports.
 const inlineResources = require('../../../scripts/release/inline-resources');
@@ -13,7 +13,7 @@ const tsconfigPath = join(examplesRoot, 'tsconfig-build.json');
 
 // Paths to the different output files and directories.
 const examplesOut = DIST_EXAMPLES;
-const examplesMain = join(examplesOut, 'public_api.js');
+const examplesMain = join(examplesOut, 'index.js');
 
 task('examples:clean-build', sequenceTask('clean', 'examples:build'));
 
@@ -35,7 +35,7 @@ task('examples:release', ['examples:clean-build'], () => composeRelease('materia
  */
 
 task('examples:build:esm', () => tsc(tsconfigPath, {basePath: examplesRoot}));
-task('examples:build:bundles', () => buildModuleEntry(examplesMain, 'material-examples'));
+task('examples:build:bundles', () => buildPackageBundles(examplesMain, 'material-examples'));
 
 /**
  * Asset tasks. Copying and inlining CSS, HTML files into the ESM output.

tools/gulp/tasks/library.ts

@@ -3,13 +3,14 @@ import {join} from 'path';
 import {main as tsc} from '@angular/tsc-wrapped';
 import {SOURCE_ROOT, DIST_MATERIAL} from '../constants';
 import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
-import {buildModuleEntry} from '../util/package-build';
+import {buildPackageBundles} from '../util/package-build';
 
 // There are no type definitions available for these imports.
 const inlineResources = require('../../../scripts/release/inline-resources');
 
 const libraryRoot = join(SOURCE_ROOT, 'lib');
-const tsconfigPath = join(libraryRoot, 'tsconfig-build.json');
+const tsconfigBuild = join(libraryRoot, 'tsconfig-build.json');
+const tsconfigTests = join(libraryRoot, 'tsconfig-tests.json');
 
 // Paths to the different output files and directories.
 const materialDir = DIST_MATERIAL;
@@ -18,6 +19,9 @@ const esmMainFile = join(materialDir, 'index.js');
 task('library:clean-build', sequenceTask('clean', 'library:build'));
 
 task('library:build', sequenceTask(
+  // Library depends on the CDK package. Build the CDK package first.
+  'cdk:build',
+  // Build assets and ESM output concurrently.
   ['library:build:esm', 'library:assets'],
   // Inline assets into ESM output.
   'library:assets:inline',
@@ -36,8 +40,10 @@ task('library:watch', () => {
  * TypeScript compilation tasks. Tasks are creating ESM, FESM, UMD bundles for releases.
  */
 
-task('library:build:esm', () => tsc(tsconfigPath, {basePath: libraryRoot}));
-task('library:build:bundles', () => buildModuleEntry(esmMainFile));
+task('library:build:esm', () => tsc(tsconfigBuild, {basePath: libraryRoot}));
+task('library:build:bundles', () => buildPackageBundles(esmMainFile, 'material'));
+
+task('library:build:esm:tests', () => tsc(tsconfigTests, {basePath: libraryRoot}));
 
 /**
  * Asset tasks. Building SaSS files and inlining CSS, HTML files into the ESM output.

tools/gulp/tasks/unit-test.ts

@@ -1,23 +1,18 @@
 import {join} from 'path';
 import {task, watch} from 'gulp';
-import {main as ngc} from '@angular/compiler-cli';
-import {PROJECT_ROOT, COMPONENTS_DIR} from '../constants';
+import {PROJECT_ROOT, SOURCE_ROOT} from '../constants';
 import {sequenceTask} from '../util/task_helpers';
 
 // There are no type definitions available for these imports.
 const runSequence = require('run-sequence');
 
-const tsconfigFile = join(COMPONENTS_DIR, 'tsconfig-specs.json');
-
-/** Builds the library with a tsconfig file that includes spec files. */
-task(':test:build:library-specs', () => ngc(tsconfigFile, {basePath: COMPONENTS_DIR}));
-
 /** Builds everything that is necessary for karma. */
 task(':test:build', sequenceTask(
   'clean',
-  ':test:build:library-specs',
-  'library:assets',
-  'library:assets:inline',
+  // Build the library bundles without any test files. (CDK will be also built)
+  'library:build',
+  // Additionally build the test files for the library and the CDK.
+  ['library:build:esm:tests', 'cdk:build:esm:tests']
 ));
 
 /**
@@ -50,7 +45,7 @@ task('test:single-run', [':test:build'], (done: () => void) => {
  * This task should be used when running unit tests locally.
  */
 task('test', [':test:build'], () => {
-  let patternRoot = join(COMPONENTS_DIR, '**/*');
+  let patternRoot = join(SOURCE_ROOT, '**/*');
   // Load karma not outside. Karma pollutes Promise with a different implementation.
   let karma = require('karma');
 

tools/gulp/util/package-build.ts

@@ -40,15 +40,15 @@ export function composeRelease(packageName: string) {
   createMetadataFile(releasePath, packageName);
 }
 
-/** Builds a module entry-point. If no entry name is specified it builds the whole library. */
-export async function buildModuleEntry(entryFile: string, entryName = 'material') {
-  let moduleName = entryName ? `ng.material.${entryName}` : 'ng.material';
+/** Builds the bundles for the specified package. */
+export async function buildPackageBundles(entryFile: string, packageName: string) {
+  let moduleName = `ng.material.${packageName}`;
 
-  // List of paths for the specified entrypoint.
-  let fesm2015File = join(DIST_BUNDLES, `${entryName}.js`);
-  let fesm2014File = join(DIST_BUNDLES, `${entryName}.es5.js`);
-  let umdFile = join(DIST_BUNDLES, `${entryName}.umd.js`);
-  let umdMinFile = join(DIST_BUNDLES, `${entryName}.umd.min.js`);
+  // List of paths to the package bundles.
+  let fesm2015File = join(DIST_BUNDLES, `${packageName}.js`);
+  let fesm2014File = join(DIST_BUNDLES, `${packageName}.es5.js`);
+  let umdFile = join(DIST_BUNDLES, `${packageName}.umd.js`);
+  let umdMinFile = join(DIST_BUNDLES, `${packageName}.umd.min.js`);
 
   // Build FESM-2015 bundle file.
   await createRollupBundle({

tools/gulp/util/rollup-helper.ts

@@ -13,8 +13,10 @@ const ROLLUP_GLOBALS = {
   '@angular/platform-browser': 'ng.platformBrowser',
   '@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',
 
   // Rxjs dependencies
   'rxjs/Subject': 'Rx',