build: ship esm bundle

* Now ships a Flat / ESM bundle (similar as for Angular 4+ releases)
* Links the pkg `module` to the new ESM bundle.
* For a consistent and clear project-structure there will be `tsconfig-es6` or `tsconfig-es5` files.

References #3316

Author: devversion

src/demo-app/tsconfig.json renamed to src/demo-app/tsconfig-es5.json

@@ -3,7 +3,7 @@
   "version": "2.0.0-beta.2",
   "description": "Angular Material",
   "main": "./bundles/material.umd.js",
-  "module": "./index.js",
+  "module": "./bundles/material.js",
   "typings": "./index.d.ts",
   "repository": {
     "type": "git",

src/e2e-app/tsconfig.json renamed to src/e2e-app/tsconfig-es5.json

@@ -11,7 +11,7 @@
     "outDir": "../../dist/@angular/material",
     "rootDir": ".",
     "sourceMap": true,
-    "target": "es5",
+    "target": "es6",
     "inlineSources": true,
     "stripInternal": false,
     "typeRoots": [

src/lib/package.json

@@ -0,0 +1,30 @@
+/**
+ * Source TSConfig file that is just used for IDE completion and linting.
+ * Each package inside of the sources includes their own tsconfig files.
+ **/
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "es2015", "dom"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noImplicitAny": true,
+    "outDir": "../../dist/all",
+    "rootDir": ".",
+    "target": "es5",
+    "paths": {
+      "@angular/material": [
+        "../dist/@angular/material"
+      ]
+    },
+    "typeRoots": [
+      "../node_modules/@types/!(node)"
+    ],
+    "types": [
+      "jasmine",
+      "rx/rx.all"
+    ]
+  }
+}

src/lib/tsconfig.json renamed to src/lib/tsconfig-es5.json

@@ -15,6 +15,7 @@ const gulpRollup = require('gulp-better-rollup');
 const gulpMinifyCss = require('gulp-clean-css');
 const gulpMinifyHtml = require('gulp-htmlmin');
 const gulpIf = require('gulp-if');
+const merge2 = require('merge2');
 
 
 // NOTE: there are two build "modes" in this file, based on which tsconfig is used.
@@ -24,9 +25,9 @@ const gulpIf = require('gulp-if');
 // When `tsconfig-spec.json` is used, we are outputting CommonJS modules. This is used
 // for unit tests (karma).
 
-/** Path to the tsconfig used for ESM output. */
-const tsconfigPath = path.relative(PROJECT_ROOT, path.join(COMPONENTS_DIR, 'tsconfig-srcs.json'));
-
+/** Path to the different tsconfig files. */
+const tsconfigES6 = path.join(COMPONENTS_DIR, 'tsconfig-es6.json');
+const tsconfigES5 = path.join(COMPONENTS_DIR, 'tsconfig-es5.json');
 
 /** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */
 task(':watch:components', () => {
@@ -36,11 +37,11 @@ task(':watch:components', () => {
 });
 
 
-/** Builds component typescript only (ESM output). */
-task(':build:components:ts', tsBuildTask(path.join(COMPONENTS_DIR, 'tsconfig-srcs.json')));
+/** Builds component typescript only (ES6 output). */
+task(':build:components:ts', tsBuildTask(tsconfigES6));
 
-/** Builds components typescript for tests (CJS output). */
-task(':build:components:spec', tsBuildTask(COMPONENTS_DIR));
+/** Builds components typescript for tests (ES5 output). */
+task(':build:components:spec', tsBuildTask(tsconfigES5));
 
 /** Copies assets (html, markdown) to build output. */
 task(':build:components:assets', copyTask([
@@ -61,53 +62,13 @@ task(':build:components:scss', sassBuildTask(DIST_COMPONENTS_ROOT, COMPONENTS_DI
 
 /** Builds the UMD bundle for all of Angular Material. */
 task(':build:components:rollup', () => {
-  const globals: {[name: string]: string} = {
-    // Angular dependencies
-    '@angular/core': 'ng.core',
-    '@angular/common': 'ng.common',
-    '@angular/forms': 'ng.forms',
-    '@angular/http': 'ng.http',
-    '@angular/platform-browser': 'ng.platformBrowser',
-    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
-
-    // Rxjs dependencies
-    'rxjs/Subject': 'Rx',
-    'rxjs/add/observable/fromEvent': 'Rx.Observable',
-    'rxjs/add/observable/forkJoin': 'Rx.Observable',
-    'rxjs/add/observable/of': 'Rx.Observable',
-    'rxjs/add/observable/merge': 'Rx.Observable',
-    'rxjs/add/observable/throw': 'Rx.Observable',
-    'rxjs/add/operator/auditTime': 'Rx.Observable.prototype',
-    'rxjs/add/operator/toPromise': 'Rx.Observable.prototype',
-    'rxjs/add/operator/map': 'Rx.Observable.prototype',
-    'rxjs/add/operator/filter': 'Rx.Observable.prototype',
-    'rxjs/add/operator/do': 'Rx.Observable.prototype',
-    'rxjs/add/operator/share': 'Rx.Observable.prototype',
-    'rxjs/add/operator/finally': 'Rx.Observable.prototype',
-    'rxjs/add/operator/catch': 'Rx.Observable.prototype',
-    'rxjs/add/operator/first': 'Rx.Observable.prototype',
-    'rxjs/add/operator/startWith': 'Rx.Observable.prototype',
-    'rxjs/add/operator/switchMap': 'Rx.Observable.prototype',
-    'rxjs/Observable': 'Rx'
-  };
-
-  const rollupOptions = {
-    context: 'this',
-    external: Object.keys(globals)
-  };
+  let esBundle = src(path.join(DIST_COMPONENTS_ROOT, 'index.js'))
+    .pipe(createRollupBundle('es', 'material.js'));
 
-  const rollupGenerateOptions = {
-    // Keep the moduleId empty because we don't want to force developers to a specific moduleId.
-    moduleId: '',
-    moduleName: 'ng.material',
-    format: 'umd',
-    globals,
-    banner: LICENSE_BANNER,
-    dest: 'material.umd.js'
-  };
+  let umdBundle = src(path.join(DIST_COMPONENTS_ROOT, 'index.js'))
+    .pipe(createRollupBundle('umd', 'material.umd.js'));
 
-  return src(path.join(DIST_COMPONENTS_ROOT, 'index.js'))
-    .pipe(gulpRollup(rollupOptions, rollupGenerateOptions))
+  return merge2(esBundle, umdBundle)
     .pipe(dest(path.join(DIST_COMPONENTS_ROOT, 'bundles')));
 });
 
@@ -135,5 +96,55 @@ task('build:components:release', sequenceTask(
 
 /** Generates metadata.json files for all of the components. */
 task(':build:components:ngc', ['build:components:release'], execNodeTask(
-  '@angular/compiler-cli', 'ngc', ['-p', tsconfigPath]
+  '@angular/compiler-cli', 'ngc', ['-p', tsconfigES6]
 ));
+
+const ROLLUP_GLOBALS = {
+  // Angular dependencies
+  '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
+  '@angular/forms': 'ng.forms',
+  '@angular/http': 'ng.http',
+  '@angular/platform-browser': 'ng.platformBrowser',
+  '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+
+  // Rxjs dependencies
+  'rxjs/Subject': 'Rx',
+  'rxjs/add/observable/fromEvent': 'Rx.Observable',
+  'rxjs/add/observable/forkJoin': 'Rx.Observable',
+  'rxjs/add/observable/of': 'Rx.Observable',
+  'rxjs/add/observable/merge': 'Rx.Observable',
+  'rxjs/add/observable/throw': 'Rx.Observable',
+  'rxjs/add/operator/auditTime': 'Rx.Observable.prototype',
+  'rxjs/add/operator/toPromise': 'Rx.Observable.prototype',
+  'rxjs/add/operator/map': 'Rx.Observable.prototype',
+  'rxjs/add/operator/filter': 'Rx.Observable.prototype',
+  'rxjs/add/operator/do': 'Rx.Observable.prototype',
+  'rxjs/add/operator/share': 'Rx.Observable.prototype',
+  'rxjs/add/operator/finally': 'Rx.Observable.prototype',
+  'rxjs/add/operator/catch': 'Rx.Observable.prototype',
+  'rxjs/add/operator/first': 'Rx.Observable.prototype',
+  'rxjs/add/operator/startWith': 'Rx.Observable.prototype',
+  'rxjs/add/operator/switchMap': 'Rx.Observable.prototype',
+  'rxjs/Observable': 'Rx'
+};
+
+/** Creates a rollup bundles of the Material components.*/
+function createRollupBundle(format: string, outFile: string) {
+  let rollupOptions = {
+    context: 'this',
+    external: Object.keys(ROLLUP_GLOBALS)
+  };
+
+  let rollupGenerateOptions = {
+    // Keep the moduleId empty because we don't want to force developers to a specific moduleId.
+    moduleId: '',
+    moduleName: 'ng.material',
+    banner: LICENSE_BANNER,
+    format: format,
+    dest: outFile,
+    globals: ROLLUP_GLOBALS,
+  };
+
+  return gulpRollup(rollupOptions, rollupGenerateOptions);
+}

src/lib/tsconfig-srcs.json renamed to src/lib/tsconfig-es6.json

@@ -17,9 +17,11 @@ task(':watch:devapp', () => {
   watch(path.join(appDir, '**/*.html'), [':build:devapp:assets', triggerLivereload]);
 });
 
+/** Path to the demo-app tsconfig file. */
+const tsconfigES5 = path.join(appDir, 'tsconfig-es5.json');
 
 task(':build:devapp:vendor', vendorTask());
-task(':build:devapp:ts', tsBuildTask(appDir));
+task(':build:devapp:ts', tsBuildTask(tsconfigES5));
 task(':build:devapp:scss', sassBuildTask(outDir, appDir));
 task(':build:devapp:assets', copyTask(appDir, outDir));
 task('build:devapp', buildAppTask('devapp'));

src/tsconfig.json

@@ -14,6 +14,8 @@ const appDir = path.join(SOURCE_ROOT, 'e2e-app');
 const outDir = DIST_ROOT;
 const PROTRACTOR_CONFIG_PATH = path.join(PROJECT_ROOT, 'test/protractor.conf.js');
 
+const tsconfigES5 = path.join(appDir, 'tsconfig-es5.json');
+
 task(':watch:e2eapp', () => {
   watch(path.join(appDir, '**/*.ts'), [':build:e2eapp:ts']);
   watch(path.join(appDir, '**/*.html'), [':build:e2eapp:assets']);
@@ -23,7 +25,7 @@ task(':watch:e2eapp', () => {
 task(':build:e2eapp:vendor', vendorTask());
 
 /** Builds e2e app ts to js. */
-task(':build:e2eapp:ts', tsBuildTask(appDir));
+task(':build:e2eapp:ts', tsBuildTask(tsconfigES5));
 
 /** Copies e2e app assets (html, css) to build output. */
 task(':build:e2eapp:assets', copyTask(appDir, outDir));