build: create JS bundles for each component

.travis.yml

@@ -22,7 +22,9 @@ jobs:
     - env: "MODE=aot"
     - env: "MODE=payload"
     - env: "MODE=prerender"
-    - env: "MODE=closure-compiler"
+    # Closure Compiler CI check is temporarily disabled until a new version of
+    # the tool is released with https://github.com/google/closure-compiler/pull/2600
+    # - env: "MODE=closure-compiler"
     - env: "MODE=e2e"
     - env: "MODE=saucelabs_required"
     - env: "MODE=browserstack_required"

package.json

@@ -107,6 +107,7 @@
     "request": "^2.81.0",
     "resolve-bin": "^0.4.0",
     "rollup": "^0.41.6",
+    "rollup-plugin-alias": "^1.3.1",
     "rollup-plugin-node-resolve": "^3.0.0",
     "run-sequence": "^1.2.2",
     "scss-bundle": "^2.0.1-beta.7",
@@ -117,7 +118,7 @@
     "tsconfig-paths": "^2.2.0",
     "tslint": "^5.7.0",
     "tsutils": "^2.6.0",
-    "typescript": "~2.2.1",
+    "typescript": "~2.4.2",
     "uglify-js": "^2.8.14",
     "web-animations-js": "^2.2.5"
   }

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

@@ -58,9 +58,9 @@ OPTS=(
   "--debug"
 
   # Include the Material and CDK FESM bundles
-  dist/releases/material/@angular/material.js
-  dist/releases/cdk/@angular/cdk.js
-  dist/releases/material-moment-adapter/@angular/material-moment-adapter.js
+  dist/releases/material/esm2015/material.js
+  dist/releases/cdk/esm2015/cdk.js
+  dist/releases/material-moment-adapter/esm2015/material-moment-adapter.js
 
   # Include all Angular FESM bundles.
   node_modules/@angular/core/@angular/core.js
@@ -90,7 +90,7 @@ OPTS=(
 # Walk through every entry-point of the CDK and add it to closure options.
 for i in "${cdkEntryPoints[@]}"; do
   OPTS+=("--js_module_root=dist/releases/cdk/${i}")
-  OPTS+=("dist/releases/cdk/@angular/cdk/${i}.js")
+  OPTS+=("dist/releases/cdk/esm2015/${i}.js")
 done
 
 # Write closure flags to a closure flagfile.

src/cdk/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0-PLACEHOLDER",
   "description": "Angular Material Component Development Kit",
   "main": "./bundles/cdk.umd.js",
-  "module": "./@angular/cdk.es5.js",
-  "es2015": "./@angular/cdk.js",
+  "module": "./esm5/cdk.es5.js",
+  "es2015": "./esm2015/cdk.js",
   "typings": "./cdk.d.ts",
   "repository": {
     "type": "git",

src/cdk/tsconfig.json

@@ -0,0 +1,12 @@
+// Configuration for IDEs only.
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "baseUrl": ".",
+    "paths": {
+      "@angular/cdk/*": ["./*"]
+    }
+  },
+  "include": ["./**/*.ts"]
+}

src/demo-app/chips/chips-demo.ts

@@ -1,5 +1,6 @@
+import {ENTER} from '@angular/cdk/keycodes';
 import {Component} from '@angular/core';
-import {MdChipInputEvent, ENTER} from '@angular/material';
+import {MdChipInputEvent} from '@angular/material';
 
 const COMMA = 188;
 

src/demo-app/demo-app/demo-app.ts

@@ -4,7 +4,7 @@ import {
   ElementRef,
   Renderer2,
 } from '@angular/core';
-import {OverlayContainer} from '@angular/material';
+import {OverlayContainer} from '@angular/cdk/overlay';
 
 /**
  * The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,

src/demo-app/demo-app/demo-module.ts

@@ -45,7 +45,7 @@ import {DemoMaterialModule} from '../demo-material-module';
 import {
   FullscreenOverlayContainer,
   OverlayContainer,
-} from '@angular/material';
+} from '@angular/cdk/overlay';
 import {TableHeaderDemo} from '../table/table-header-demo';
 
 @NgModule({

src/demo-app/demo-material-module.ts

@@ -15,12 +15,10 @@ import {
   MdInputModule,
   MdListModule,
   MdMenuModule,
-  MdNativeDateModule,
   MdPaginatorModule,
   MdProgressBarModule,
   MdProgressSpinnerModule,
   MdRadioModule,
-  MdRippleModule,
   MdSelectModule,
   MdSidenavModule,
   MdSliderModule,
@@ -31,9 +29,9 @@ import {
   MdTabsModule,
   MdToolbarModule,
   MdTooltipModule,
-  StyleModule,
   MdStepperModule,
 } from '@angular/material';
+import {StyleModule, MdNativeDateModule, MdRippleModule} from '@angular/material';
 import {CdkTableModule} from '@angular/cdk/table';
 import {A11yModule} from '@angular/cdk/a11y';
 import {BidiModule} from '@angular/cdk/bidi';

src/demo-app/live-announcer/live-announcer-demo.ts

@@ -1,17 +1,16 @@
 import {Component} from '@angular/core';
-import {LiveAnnouncer} from '@angular/material';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
+
 
 @Component({
   moduleId: module.id,
   selector: 'toolbar-demo',
   templateUrl: 'live-announcer-demo.html',
 })
 export class LiveAnnouncerDemo {
-
   constructor(private live: LiveAnnouncer) {}
 
   announceText(message: string) {
     this.live.announce(message);
   }
-
 }

src/demo-app/overlay/overlay-demo.ts

@@ -1,22 +1,20 @@
+import {Overlay, OverlayOrigin, OverlayState} from '@angular/cdk/overlay';
 import {
-    Component,
-    ViewChildren,
-    QueryList,
-    ViewEncapsulation,
-    ViewChild,
-    ViewContainerRef,
-} from '@angular/core';
+  ComponentPortal,
+  // This import is only used to define a generic type. The current TypeScript version incorrectly
+  // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
+  // tslint:disable-next-line:no-unused-variable
+  Portal,
+  TemplatePortalDirective
+} from '@angular/cdk/portal';
 import {
-    Overlay,
-    OverlayState,
-    OverlayOrigin,
-    ComponentPortal,
-    // This import is only used to define a generic type. The current TypeScript version incorrectly
-    // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
-    // tslint:disable-next-line:no-unused-variable
-    Portal,
-    TemplatePortalDirective,
-} from '@angular/material';
+  Component,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+  ViewEncapsulation,
+} from '@angular/core';
 
 
 @Component({

src/demo-app/platform/platform-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Platform, getSupportedInputTypes} from '@angular/material';
+import {Platform, getSupportedInputTypes} from '@angular/cdk/platform';
 
 
 @Component({

src/demo-app/portal/portal-demo.ts

@@ -1,9 +1,5 @@
-import {Component, ViewChildren, QueryList} from '@angular/core';
-import {
-    Portal,
-    ComponentPortal,
-    TemplatePortalDirective,
-} from '@angular/material';
+import {ComponentPortal, Portal, TemplatePortalDirective} from '@angular/cdk/portal';
+import {Component, QueryList, ViewChildren} from '@angular/core';
 
 
 @Component({

src/demo-app/tsconfig-aot.json

@@ -10,8 +10,9 @@
     "strictNullChecks": true,
     "outDir": ".",
     "paths": {
-      "@angular/material": ["./material"],
       "@angular/cdk/*": ["./cdk/*"],
+      "@angular/material": ["./material"],
+      "@angular/material/*": ["./material/*"],
       "@angular/material-moment-adapter": ["./material-moment-adapter"]
     }
   },