docs(changelog): release notes for 4.0.0-beta.2

@angular/language-service now supports using TypeScript 2.1 as the
the TypeScript host. TypeScript 2.1 is now also partially supported
in `ngc` but is not recommended as Tsickle does not yet support 2.1.

.pullapprove.yml

@@ -1,32 +0,0 @@
-# Configuration for pullapprove.com
-# See ownership spreadsheet:
-# https://docs.google.com/spreadsheets/d/1-HIlzfbPYGsPr9KuYMe6bLfc4LXzPjpoALqtYRYTZB0/edit?pli=1#gid=0&vpid=A5
-
-version: 2
-
-group_defaults:
-  required: 1
-  reset_on_reopened:
-    enabled: true
-  approve_by_comment:
-    enabled: true
-    approve_regex: '^(Approved|:\+1:|LGTM)'
-
-groups:
-  config:
-    conditions:
-      files:
-        - "*.yml"
-        - "*.json"
-    teams:
-      - repoowners
-
-  compiler:
-    conditions:
-      files:
-        - "tools/@angular/tsc-wrapped/*"
-        - "modules/@angular/compiler/*"
-        - "modules/@angular/compiler-cli/*"
-    teams:
-      - compiler-owners
-      - repoowners

CHANGELOG.md

@@ -1,60 +1,54 @@
-<a name="2.4.4"></a>
-## [2.4.4](https://github.com/angular/angular/compare/2.4.3...2.4.4) (2017-01-19)
+<a name="4.0.0-beta.2"></a>
+# [4.0.0-beta.2](https://github.com/angular/angular/compare/4.0.0-beta.1...4.0.0-beta.2) (2017-01-06)
+
+
+### Features
+
+* **compiler:** generate less code for bindings to DOM elements ([db49d42](https://github.com/angular/angular/commit/db49d42))
+* **compiler:** generate proper reexports in `.ngfactory.ts` files to not need transitive deps for compiling `.ngfactory.ts` files. ([#13524](https://github.com/angular/angular/issues/13524)) ([9c69703](https://github.com/angular/angular/commit/9c69703)), closes [#12787](https://github.com/angular/angular/issues/12787)
+* **router:** add an extra argument to CanDeactivate interface ([#13560](https://github.com/angular/angular/issues/13560)) ([69fa3bb](https://github.com/angular/angular/commit/69fa3bb)), closes [#9853](https://github.com/angular/angular/issues/9853)
 
 
 ### Bug Fixes
 
-* **animations:** fix internal jscompiler issue and AOT quoting ([#13798](https://github.com/angular/angular/issues/13798)) ([261fd16](https://github.com/angular/angular/commit/261fd16))
-* **common:** support numeric value as discrete cases for NgPlural ([#13876](https://github.com/angular/angular/issues/13876)) ([3d0b1b8](https://github.com/angular/angular/commit/3d0b1b8))
-* **http:** don't create a blob out of ArrayBuffer when type is application/octet-stream ([#13992](https://github.com/angular/angular/issues/13992)) ([015878a](https://github.com/angular/angular/commit/015878a)), closes [#13973](https://github.com/angular/angular/issues/13973)
-* **router:** enable loadChildren with function in aot ([#13909](https://github.com/angular/angular/issues/13909)) ([2af5862](https://github.com/angular/angular/commit/2af5862)), closes [#11075](https://github.com/angular/angular/issues/11075)
-* **router:** routerLinkActive should not throw when not initialized ([#13273](https://github.com/angular/angular/issues/13273)) ([49c4b0f](https://github.com/angular/angular/commit/49c4b0f)), closes [#13270](https://github.com/angular/angular/issues/13270)
-* **security:** allow calc and gradient functions. ([#13943](https://github.com/angular/angular/issues/13943)) ([bd15110](https://github.com/angular/angular/commit/bd15110))
-* **upgrade:** detect async downgrade component changes ([#13812](https://github.com/angular/angular/issues/13812)) ([2250082](https://github.com/angular/angular/commit/2250082)), closes [#6385](https://github.com/angular/angular/issues/6385) [#6385](https://github.com/angular/angular/issues/6385) [#10660](https://github.com/angular/angular/issues/10660) [#12318](https://github.com/angular/angular/issues/12318) [#12034](https://github.com/angular/angular/issues/12034)
+* **common:** improve error message by adding a link to trackBy docs ([#13634](https://github.com/angular/angular/issues/13634)) ([6976903](https://github.com/angular/angular/commit/6976903))
+* **common:** do not override locale provided on bootstrap ([#13654](https://github.com/angular/angular/issues/13654)) ([2dd6280](https://github.com/angular/angular/commit/2dd6280)), closes [#13607](https://github.com/angular/angular/issues/13607)
+* **common:** allow null/undefined values for `NgForTrackBy` ([f88cd2f](https://github.com/angular/angular/commit/f88cd2f)), closes [#13641](https://github.com/angular/angular/issues/13641)
+* **compiler:** don’t throw when using `ANALYZE_FOR_ENTRY_COMPONENTS` with user classes ([#13679](https://github.com/angular/angular/issues/13679)) ([7690d02](https://github.com/angular/angular/commit/7690d02)), closes [#13565](https://github.com/angular/angular/issues/13565)
+* **compiler:** improve error message for undefined providers ([#13546](https://github.com/angular/angular/issues/13546)) ([6b02b80](https://github.com/angular/angular/commit/6b02b80)), closes [#10835](https://github.com/angular/angular/issues/10835)
+* **compiler:** improve the error when template is not a string ([2c0c86e](https://github.com/angular/angular/commit/2c0c86e)), closes [#8708](https://github.com/angular/angular/issues/8708) [#13377](https://github.com/angular/angular/issues/13377)
+* **compiler:** query `<template>` elements before their children. ([#13677](https://github.com/angular/angular/issues/13677)) ([7c21064](https://github.com/angular/angular/commit/7c21064)), closes [#13118](https://github.com/angular/angular/issues/13118) [#13167](https://github.com/angular/angular/issues/13167)
+* **compiler:** throw an error for invalid provider ([#13544](https://github.com/angular/angular/issues/13544)) ([445ed43](https://github.com/angular/angular/commit/445ed43)), closes [#8870](https://github.com/angular/angular/issues/8870)
+* **compiler:** allow "." in attribute selectors ([#13653](https://github.com/angular/angular/issues/13653)) ([881eb89](https://github.com/angular/angular/commit/881eb89)), closes [#13645](https://github.com/angular/angular/issues/13645)
+* **core:** animations no longer silently exits if the element is not apart of the DOM ([#13763](https://github.com/angular/angular/issues/13763)) ([21030e9](https://github.com/angular/angular/commit/21030e9))
+* **core:** animations should blend in all previously transitioned styles into next animation if interrupted ([#13148](https://github.com/angular/angular/issues/13148)) ([889b48d](https://github.com/angular/angular/commit/889b48d))
+* **core:** remove reference to "Angular 2" in dev mode warning ([#13751](https://github.com/angular/angular/issues/13751)) ([c5c53f3](https://github.com/angular/angular/commit/c5c53f3))
+* **forms:** Validators.required properly validate arrays ([#13362](https://github.com/angular/angular/issues/13362)) ([9898d8f](https://github.com/angular/angular/commit/9898d8f)), closes [#12274](https://github.com/angular/angular/issues/12274)
+* **i18n:** parse ICU messages while normalizing templates ([e74d8aa](https://github.com/angular/angular/commit/e74d8aa))
+* **language-service:** support TypeScript 2.1 ([#13655](https://github.com/angular/angular/issues/13655)) ([8063b0d](https://github.com/angular/angular/commit/8063b0d))
+* **router:** fix lazy loaded module with wildcard route ([#13649](https://github.com/angular/angular/issues/13649)) ([0eca960](https://github.com/angular/angular/commit/0eca960)), closes [#12955](https://github.com/angular/angular/issues/12955)
+* **router:** routerLink support of null ([#13380](https://github.com/angular/angular/issues/13380)) ([174334d](https://github.com/angular/angular/commit/174334d)), closes [#6971](https://github.com/angular/angular/issues/6971)
+* **router:** update route snapshot before emit new values ([#13558](https://github.com/angular/angular/issues/13558)) ([07e0fce](https://github.com/angular/angular/commit/07e0fce)), closes [#12912](https://github.com/angular/angular/issues/12912)
+* **testing:** improve misleading error message when don't call compileComponents ([#13543](https://github.com/angular/angular/issues/13543)) ([67380d4](https://github.com/angular/angular/commit/67380d4)), closes [#11301](https://github.com/angular/angular/issues/11301)
+* **upgrade:** fix/improve support for lifecycle hooks ([#13020](https://github.com/angular/angular/issues/13020)) ([e5c4e58](https://github.com/angular/angular/commit/e5c4e58))
+
+
+### BREAKING CHANGES
+
+* **core**: `SimpleChange` now takes an additional argument that defines whether this is the first
+change or not. This is a low profile API and we don't expect anyone to be affected by this change.
+If you are impacted by this change please file an issue. ([465516b](https://github.com/angular/angular/commit/465516b))
 
 
 
-<a name="2.4.3"></a>
-## [2.4.3](https://github.com/angular/angular/compare/2.4.2...2.4.3) (2017-01-11)
+<a name="4.0.0-beta.1"></a>
+# [4.0.0-beta.1](https://github.com/angular/angular/compare/2.4.0-marker...4.0.0-beta.1) (2016-12-22)
 
+### Features
 
-### Bug Fixes
-
-* **compiler:** avoid evaluating arguments to unknown decorators ([5e9d3db](https://github.com/angular/angular/commit/5e9d3db)), closes [#13605](https://github.com/angular/angular/issues/13605)
-* **compiler:** fix template binding parsing (`*directive="-..."`) ([7dc12b9](https://github.com/angular/angular/commit/7dc12b9)), closes [#13800](https://github.com/angular/angular/issues/13800)
-* **compiler-cli:** add support for more than 2 levels of nested lazy routes ([6164eb2](https://github.com/angular/angular/commit/6164eb2)), closes [angular/angular-cli#3663](https://github.com/angular/angular-cli/issues/3663)
-* **compiler-cli:** avoid handling functions in loadChildren as lazy load routes paths ([313683f](https://github.com/angular/angular/commit/313683f)), closes [angular/angular-cli#3204](https://github.com/angular/angular-cli/issues/3204)
-* **i18n:** translate attributes inside elements marked for translation ([d7f2a3c](https://github.com/angular/angular/commit/d7f2a3c))
-* **router:** RouterLink mirrors input `target` as attribute ([1c82b58](https://github.com/angular/angular/commit/1c82b58)), closes [#13837](https://github.com/angular/angular/issues/13837)
-* **router:** throw an error when navigate to null/undefined path ([61ba223](https://github.com/angular/angular/commit/61ba223)), closes [#10560](https://github.com/angular/angular/issues/10560) [#13384](https://github.com/angular/angular/issues/13384)
-* **router:** fix checking for object intersection ([1692265](https://github.com/angular/angular/commit/1692265))
-
-
-
-<a name="2.4.2"></a>
-## [2.4.2](https://github.com/angular/angular/compare/2.4.1...2.4.2) (2017-01-06)
-
-
-### Bug Fixes
-
-* **common:** add link to trackBy docs from the error message ([#13634](https://github.com/angular/angular/issues/13634)) ([f723437](https://github.com/angular/angular/commit/f723437))
-* **common:** do not override locale provided on bootstrap ([#13654](https://github.com/angular/angular/issues/13654)) ([5f49c3e](https://github.com/angular/angular/commit/5f49c3e)), closes [#13607](https://github.com/angular/angular/issues/13607)
-* **common:** allow null/undefined values for `NgForTrackBy` ([6be55cc](https://github.com/angular/angular/commit/6be55cc)), closes [#13641](https://github.com/angular/angular/issues/13641)
-* **compiler:** don’t throw when using `ANALYZE_FOR_ENTRY_COMPONENTS` with user classes ([#13679](https://github.com/angular/angular/issues/13679)) ([230e33f](https://github.com/angular/angular/commit/230e33f)), closes [#13565](https://github.com/angular/angular/issues/13565)
-* **compiler:** query `<template>` elements before their children. ([#13677](https://github.com/angular/angular/issues/13677)) ([1cd73c7](https://github.com/angular/angular/commit/1cd73c7)), closes [#13118](https://github.com/angular/angular/issues/13118) [#13167](https://github.com/angular/angular/issues/13167)
-* **compiler:** allow "." in attribute selectors ([#13653](https://github.com/angular/angular/issues/13653)) ([29ffdfd](https://github.com/angular/angular/commit/29ffdfd)), closes [#13645](https://github.com/angular/angular/issues/13645) [#13982](https://github.com/angular/angular/issues/13982)
-* **core:** animations no longer silently exits if the element is not apart of the DOM ([#13763](https://github.com/angular/angular/issues/13763)) ([f1cde43](https://github.com/angular/angular/commit/f1cde43))
-* **core:** animations should blend in all previously transitioned styles into next animation if interrupted ([#13148](https://github.com/angular/angular/issues/13148)) ([b245b92](https://github.com/angular/angular/commit/b245b92))
-* **core:** remove reference to "Angular 2" in dev mode warning ([#13751](https://github.com/angular/angular/issues/13751)) ([21f5f05](https://github.com/angular/angular/commit/21f5f05))
-* **core/testing:** improve misleading error message when don't call compileComponents ([#13543](https://github.com/angular/angular/issues/13543)) ([0e7f9f0](https://github.com/angular/angular/commit/0e7f9f0)), closes [#11301](https://github.com/angular/angular/issues/11301)
-* **forms:** Validators.required properly validate arrays ([#13362](https://github.com/angular/angular/issues/13362)) ([17c5fa9](https://github.com/angular/angular/commit/17c5fa9)), closes [#12274](https://github.com/angular/angular/issues/12274)
-* **language-service:** support TypeScript 2.1 ([#13655](https://github.com/angular/angular/issues/13655)) ([56b4296](https://github.com/angular/angular/commit/56b4296))
-* **router:** fix lazy loaded module with wildcard route ([#13649](https://github.com/angular/angular/issues/13649)) ([5754ecc](https://github.com/angular/angular/commit/5754ecc)), closes [#12955](https://github.com/angular/angular/issues/12955)
-* **router:** routerLink support of null ([#13380](https://github.com/angular/angular/issues/13380)) ([018865e](https://github.com/angular/angular/commit/018865e)), closes [#6971](https://github.com/angular/angular/issues/6971)
-* **router:** update route snapshot before emit new values ([#13558](https://github.com/angular/angular/issues/13558)) ([9f6a647](https://github.com/angular/angular/commit/9f6a647)), closes [#12912](https://github.com/angular/angular/issues/12912)
-* **upgrade:** fix/improve support for lifecycle hooks ([#13020](https://github.com/angular/angular/issues/13020)) ([21942a8](https://github.com/angular/angular/commit/21942a8))
-
+* **upgrade:** support the `$doCheck()` lifecycle hook in `UpgradeComponent` ([#13015](https://github.com/angular/angular/issues/13015)) ([9da4c25](https://github.com/angular/angular/commit/9da4c25))
 
+Note: 4.0.0-beta.1 release also contains all the changes present in the 2.4.0 and the 2.4.1 releases.
 
 <a name="2.4.1"></a>
 ## [2.4.1](https://github.com/angular/angular/compare/2.4.0...2.4.1) (2016-12-21)
@@ -88,6 +82,25 @@
 * update to `rxjs@5.0.1` and unpin the rxjs peerDeps via `^5.0.1` ([#13572](https://github.com/angular/angular/issues/13572)) ([8d5da1e](https://github.com/angular/angular/commit/8d5da1e)), closes [#13561](https://github.com/angular/angular/issues/13561) [#13478](https://github.com/angular/angular/issues/13478)
 
 
+<a name="4.0.0-beta.0"></a>
+# [4.0.0-beta.0](https://github.com/angular/angular/compare/2.3.0...4.0.0-beta.0) (2016-12-15)
+
+
+### Features
+
+* **common:** add a `titlecase` pipe ([#13324](https://github.com/angular/angular/issues/13324)) ([61d7c1e](https://github.com/angular/angular/commit/61d7c1e)), closes [#11436](https://github.com/angular/angular/issues/11436)
+* **common:** export NgLocaleLocalization ([#13367](https://github.com/angular/angular/issues/13367)) ([56dce0e](https://github.com/angular/angular/commit/56dce0e)), closes [#11921](https://github.com/angular/angular/issues/11921)
+* **compiler:** add id property to i18nMessage ([6dd5201](https://github.com/angular/angular/commit/6dd5201))
+* **compiler:** digest methods return i18nMessage id if sets ([562f7a2](https://github.com/angular/angular/commit/562f7a2))
+* **forms:** add novalidate by default ([#13092](https://github.com/angular/angular/issues/13092)) ([4c35be3](https://github.com/angular/angular/commit/4c35be3))
+* **http:** simplify URLSearchParams creation ([#13338](https://github.com/angular/angular/issues/13338)) ([90c2235](https://github.com/angular/angular/commit/90c2235)), closes [#8858](https://github.com/angular/angular/issues/8858)
+* **language-service:** warn when a method isn't called in an event ([#13437](https://github.com/angular/angular/issues/13437)) ([9ec0a4e](https://github.com/angular/angular/commit/9ec0a4e))
+* **platform browser:** introduce Meta service ([#12322](https://github.com/angular/angular/issues/12322)) ([72361fb](https://github.com/angular/angular/commit/72361fb))
+* **router:** routerLink add tabindex attribute ([#13094](https://github.com/angular/angular/issues/13094)) ([a006c14](https://github.com/angular/angular/commit/a006c14)), closes [#10895](https://github.com/angular/angular/issues/10895)
+* **testing:** add overrideTemplate method ([#13372](https://github.com/angular/angular/issues/13372)) ([169ed82](https://github.com/angular/angular/commit/169ed82)), closes [#10685](https://github.com/angular/angular/issues/10685)
+* **common** ngIf now supports else; saves condition to local var ([b4db73d](https://github.com/angular/angular/commit/b4db73d)), closes [#13061](https://github.com/angular/angular/issues/13061) [#13297](https://github.com/angular/angular/issues/13297)
+
+Note: 4.0.0-beta.0 release also contains all the changes present in the 2.3.1 release.
 
 <a name="2.3.1"></a>
 ## [2.3.1](https://github.com/angular/angular/compare/2.3.0...2.3.1) (2016-12-15)
@@ -134,15 +147,14 @@
 
 ### Note ###
 
-Due to regression in the 2.3.0 release that was fixed by [#13464](https://github.com/angular/angular/pull/13464), 
+Due to regression in the 2.3.0 release that was fixed by [#13464](https://github.com/angular/angular/pull/13464),
 components that have been compiled using 2.3.0 and published to npm will need to be recompiled and republished.
 
-The >=2.3.1 compiler will issue is the following error if it encounters components compiled with 2.3.0:  
+The >=2.3.1 compiler will issue is the following error if it encounters components compiled with 2.3.0:
 `Unsupported metadata version 2 for module ${module}. This module should be compiled with a newer version of ngc`.
 
 We are adding more tests to our test suite to catch these kinds of problems before we cut a release.
 
-
 <a name="2.3.0"></a>
 # [2.3.0](https://github.com/angular/angular/compare/2.3.0-rc.0...2.3.0) (2016-12-07)
 

modules/@angular/common/src/common.ts

@@ -12,9 +12,9 @@
  * Entry point for all public APIs of the common package.
  */
 export * from './location/index';
-export {NgLocalization} from './localization';
+export {NgLocaleLocalization, NgLocalization} from './localization';
 export {CommonModule} from './common_module';
 export {NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet} from './directives/index';
-export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe} from './pipes/index';
+export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe} from './pipes/index';
 export {VERSION} from './version';
 export {Version} from '@angular/core';

modules/@angular/common/src/directives/ng_class.ts

@@ -9,7 +9,7 @@
 import {CollectionChangeRecord, Directive, DoCheck, ElementRef, Input, IterableDiffer, IterableDiffers, KeyValueChangeRecord, KeyValueDiffer, KeyValueDiffers, Renderer} from '@angular/core';
 
 import {isListLikeIterable} from '../facade/collection';
-import {stringify} from '../facade/lang';
+import {isPresent, stringify} from '../facade/lang';
 
 /**
  * @ngModule CommonModule
@@ -134,7 +134,7 @@ export class NgClass implements DoCheck {
         (<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, !isCleanup));
       } else {
         Object.keys(rawClassVal).forEach(klass => {
-          if (rawClassVal[klass] != null) this._toggleClass(klass, !isCleanup);
+          if (isPresent(rawClassVal[klass])) this._toggleClass(klass, !isCleanup);
         });
       }
     }

modules/@angular/common/src/directives/ng_if.ts

@@ -6,46 +6,152 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+
 
 /**
- * Removes or recreates a portion of the DOM tree based on an {expression}.
+ * Conditionally includes a template based on the value of an `expression`.
  *
- * If the expression assigned to `ngIf` evaluates to a falsy value then the element
- * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
+ * `ngIf` evaluates the `expression` and then renders the `then` or `else` template in its place
+ * when expression is truthy or falsy respectively. Typically the:
+ *  - `then` template is the inline template of `ngIf` unless bound to a different value.
+ *  - `else` template is blank unless it is bound.
  *
- * ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
+ * # Most common usage
+ *
+ * The most common usage of the `ngIf` directive is to conditionally show the inline template as
+ * seen in this example:
+ * {@example common/ngIf/ts/module.ts region='NgIfSimple'}
+ *
+ * # Showing an alternative template using `else`
+ *
+ * If it is necessary to display a template when the `expression` is falsy use the `else` template
+ * binding as shown. Note that the `else` binding points to a `<template>` labeled `#elseBlock`.
+ * The template can be defined anywhere in the component view but is typically placed right after
+ * `ngIf` for readability.
+ *
+ * {@example common/ngIf/ts/module.ts region='NgIfElse'}
+ *
+ * # Using non-inlined `then` template
+ *
+ * Usually the `then` template is the inlined template of the `ngIf`, but it can be changed using
+ * a binding (just like `else`). Because `then` and `else` are bindings, the template references can
+ * change at runtime as shown in this example.
+ *
+ * {@example common/ngIf/ts/module.ts region='NgIfThenElse'}
+ *
+ * # Storing conditional result in a variable
+ *
+ * A common pattern is that we need to show a set of properties from the same object. If the
+ * object is undefined, then we have to use the safe-traversal-operator `?.` to guard against
+ * dereferencing a `null` value. This is especially the case when waiting on async data such as
+ * when using the `async` pipe as shown in folowing example:
  *
  * ```
- * <div *ngIf="errorCount > 0" class="error">
- *   <!-- Error message displayed when the errorCount property in the current context is greater
- * than 0. -->
- *   {{errorCount}} errors detected
- * </div>
+ * Hello {{ (userStream|async)?.last }}, {{ (userStream|async)?.first }}!
  * ```
  *
+ * There are several inefficiencies in the above example:
+ *  - We create multiple subscriptions on `userStream`. One for each `async` pipe, or two in the
+ *    example above.
+ *  - We cannot display an alternative screen while waiting for the data to arrive asynchronously.
+ *  - We have to use the safe-traversal-operator `?.` to access properties, which is cumbersome.
+ *  - We have to place the `async` pipe in parenthesis.
+ *
+ * A better way to do this is to use `ngIf` and store the result of the condition in a local
+ * variable as shown in the the example below:
+ *
+ * {@example common/ngIf/ts/module.ts region='NgIfLet'}
+ *
+ * Notice that:
+ *  - We use only one `async` pipe and hence only one subscription gets created.
+ *  - `ngIf` stores the result of the `userStream|async` in the local variable `user`.
+ *  - The local `user` can then be bound repeatedly in a more efficient way.
+ *  - No need to use the safe-traversal-operator `?.` to access properties as `ngIf` will only
+ *    display the data if `userStream` returns a value.
+ *  - We can display an alternative template while waiting for the data.
+ *
  * ### Syntax
  *
+ * Simple form:
  * - `<div *ngIf="condition">...</div>`
  * - `<div template="ngIf condition">...</div>`
  * - `<template [ngIf]="condition"><div>...</div></template>`
  *
+ * Form with an else block:
+ * ```
+ * <div *ngIf="condition; else elseBlock">...</div>
+ * <template #elseBlock>...</template>
+ * ```
+ *
+ * Form with a `then` and `else` block:
+ * ```
+ * <div *ngIf="condition; then thenBlock else elseBlock"></div>
+ * <template #thenBlock>...</template>
+ * <template #elseBlock>...</template>
+ * ```
+ *
+ * Form with storing the value locally:
+ * ```
+ * <div *ngIf="condition; else elseBlock; let value">{{value}}</div>
+ * <template #elseBlock>...</template>
+ * ```
+ *
  * @stable
  */
 @Directive({selector: '[ngIf]'})
 export class NgIf {
-  private _hasView = false;
+  private _context: NgIfContext = new NgIfContext();
+  private _thenTemplateRef: TemplateRef<NgIfContext> = null;
+  private _elseTemplateRef: TemplateRef<NgIfContext> = null;
+  private _thenViewRef: EmbeddedViewRef<NgIfContext> = null;
+  private _elseViewRef: EmbeddedViewRef<NgIfContext> = null;
 
-  constructor(private _viewContainer: ViewContainerRef, private _template: TemplateRef<Object>) {}
+  constructor(private _viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>) {
+    this._thenTemplateRef = templateRef;
+  }
 
   @Input()
   set ngIf(condition: any) {
-    if (condition && !this._hasView) {
-      this._hasView = true;
-      this._viewContainer.createEmbeddedView(this._template);
-    } else if (!condition && this._hasView) {
-      this._hasView = false;
-      this._viewContainer.clear();
+    this._context.$implicit = condition;
+    this._updateView();
+  }
+
+  @Input()
+  set ngIfThen(templateRef: TemplateRef<NgIfContext>) {
+    this._thenTemplateRef = templateRef;
+    this._thenViewRef = null;  // clear previous view if any.
+    this._updateView();
+  }
+
+  @Input()
+  set ngIfElse(templateRef: TemplateRef<NgIfContext>) {
+    this._elseTemplateRef = templateRef;
+    this._elseViewRef = null;  // clear previous view if any.
+    this._updateView();
+  }
+
+  private _updateView() {
+    if (this._context.$implicit) {
+      if (!this._thenViewRef) {
+        this._viewContainer.clear();
+        this._elseViewRef = null;
+        if (this._thenTemplateRef) {
+          this._thenViewRef =
+              this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);
+        }
+      }
+    } else {
+      if (!this._elseViewRef) {
+        this._viewContainer.clear();
+        this._thenViewRef = null;
+        if (this._elseTemplateRef) {
+          this._elseViewRef =
+              this._viewContainer.createEmbeddedView(this._elseTemplateRef, this._context);
+        }
+      }
     }
   }
 }
+
+export class NgIfContext { public $implicit: any = null; }

modules/@angular/common/src/directives/ng_plural.ts

@@ -21,9 +21,10 @@ import {SwitchView} from './ng_switch';
  * @howToUse
  * ```
  * <some-element [ngPlural]="value">
- *   <template ngPluralCase="=0">there is nothing</template>
- *   <template ngPluralCase="=1">there is one</template>
- *   <template ngPluralCase="few">there are a few</template>
+ *   <ng-container *ngPluralCase="'=0'">there is nothing</ng-container>
+ *   <ng-container *ngPluralCase="'=1'">there is one</ng-container>
+ *   <ng-container *ngPluralCase="'few'">there are a few</ng-container>
+ *   <ng-container *ngPluralCase="'other'">there are exactly #</ng-container>
  * </some-element>
  * ```
  *
@@ -89,8 +90,8 @@ export class NgPlural {
  * @howToUse
  * ```
  * <some-element [ngPlural]="value">
- *   <template ngPluralCase="=0">...</template>
- *   <template ngPluralCase="other">...</template>
+ *   <ng-container *ngPluralCase="'=0'">...</ng-container>
+ *   <ng-container *ngPluralCase="'other'">...</ng-container>
  * </some-element>
  *```
  *
@@ -103,7 +104,6 @@ export class NgPluralCase {
   constructor(
       @Attribute('ngPluralCase') public value: string, template: TemplateRef<Object>,
       viewContainer: ViewContainerRef, @Host() ngPlural: NgPlural) {
-    const isANumber: boolean = !isNaN(Number(value));
-    ngPlural.addCase(isANumber ? `=${value}` : value, new SwitchView(viewContainer, template));
+    ngPlural.addCase(value, new SwitchView(viewContainer, template));
   }
 }

modules/@angular/common/src/localization.ts

@@ -49,10 +49,10 @@ export function getPluralCategory(
  */
 @Injectable()
 export class NgLocaleLocalization extends NgLocalization {
-  constructor(@Inject(LOCALE_ID) private _locale: string) { super(); }
+  constructor(@Inject(LOCALE_ID) protected locale: string) { super(); }
 
   getPluralCategory(value: any): string {
-    const plural = getPluralCase(this._locale, value);
+    const plural = getPluralCase(this.locale, value);
 
     switch (plural) {
       case Plural.Zero:
@@ -431,4 +431,4 @@ export function getPluralCase(locale: string, nLike: number | string): Plural {
     default:
       return Plural.Other;
   }
-}
+}

modules/@angular/common/src/pipes/case_conversion_pipes.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Pipe, PipeTransform} from '@angular/core';
+import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
+
+/**
+ * Transforms text to lowercase.
+ *
+ * {@example  common/pipes/ts/lowerupper_pipe.ts region='LowerUpperPipe' }
+ *
+ * @stable
+ */
+@Pipe({name: 'lowercase'})
+export class LowerCasePipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) return value;
+    if (typeof value !== 'string') {
+      throw new InvalidPipeArgumentError(LowerCasePipe, value);
+    }
+    return value.toLowerCase();
+  }
+}
+
+
+/**
+ * Helper method to transform a single word to titlecase.
+ *
+ * @stable
+ */
+function titleCaseWord(word: string) {
+  if (!word) return word;
+  return word[0].toUpperCase() + word.substr(1).toLowerCase();
+}
+
+/**
+ * Transforms text to titlecase.
+ *
+ * @stable
+ */
+@Pipe({name: 'titlecase'})
+export class TitleCasePipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) return value;
+    if (typeof value !== 'string') {
+      throw new InvalidPipeArgumentError(TitleCasePipe, value);
+    }
+
+    return value.split(/\b/g).map(word => titleCaseWord(word)).join('');
+  }
+}
+
+/**
+ * Transforms text to uppercase.
+ *
+ * @stable
+ */
+@Pipe({name: 'uppercase'})
+export class UpperCasePipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) return value;
+    if (typeof value !== 'string') {
+      throw new InvalidPipeArgumentError(UpperCasePipe, value);
+    }
+    return value.toUpperCase();
+  }
+}

modules/@angular/common/src/pipes/i18n_plural_pipe.ts

@@ -7,6 +7,7 @@
  */
 
 import {Pipe, PipeTransform} from '@angular/core';
+import {isBlank} from '../facade/lang';
 import {NgLocalization, getPluralCategory} from '../localization';
 import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 
@@ -34,7 +35,7 @@ export class I18nPluralPipe implements PipeTransform {
   constructor(private _localization: NgLocalization) {}
 
   transform(value: number, pluralMap: {[count: string]: string}): string {
-    if (value == null) return '';
+    if (isBlank(value)) return '';
 
     if (typeof pluralMap !== 'object' || pluralMap === null) {
       throw new InvalidPipeArgumentError(I18nPluralPipe, pluralMap);

modules/@angular/common/src/pipes/index.ts

@@ -12,14 +12,13 @@
  * This module provides a set of common Pipes.
  */
 import {AsyncPipe} from './async_pipe';
+import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from './case_conversion_pipes';
 import {DatePipe} from './date_pipe';
 import {I18nPluralPipe} from './i18n_plural_pipe';
 import {I18nSelectPipe} from './i18n_select_pipe';
 import {JsonPipe} from './json_pipe';
-import {LowerCasePipe} from './lowercase_pipe';
 import {CurrencyPipe, DecimalPipe, PercentPipe} from './number_pipe';
 import {SlicePipe} from './slice_pipe';
-import {UpperCasePipe} from './uppercase_pipe';
 
 export {
   AsyncPipe,
@@ -32,9 +31,11 @@ export {
   LowerCasePipe,
   PercentPipe,
   SlicePipe,
+  TitleCasePipe,
   UpperCasePipe
 };
 
+
 /**
  * A collection of Angular pipes that are likely to be used in each and every application.
  */
@@ -46,6 +47,7 @@ export const COMMON_PIPES = [
   SlicePipe,
   DecimalPipe,
   PercentPipe,
+  TitleCasePipe,
   CurrencyPipe,
   DatePipe,
   I18nPluralPipe,

modules/@angular/common/src/pipes/lowercase_pipe.ts

@@ -1,37 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Pipe, PipeTransform} from '@angular/core';
-import {isBlank} from '../facade/lang';
-import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
-
-
-/**
- * @ngModule CommonModule
- * @whatItDoes Transforms string to lowercase.
- * @howToUse `expression | lowercase`
- * @description
- *
- * Converts value into a lowercase string using `String.prototype.toLowerCase()`.
- *
- * ### Example
- *
- * {@example common/pipes/ts/lowerupper_pipe.ts region='LowerUpperPipe'}
- *
- * @stable
- */
-@Pipe({name: 'lowercase'})
-export class LowerCasePipe implements PipeTransform {
-  transform(value: string): string {
-    if (isBlank(value)) return value;
-    if (typeof value !== 'string') {
-      throw new InvalidPipeArgumentError(LowerCasePipe, value);
-    }
-    return value.toLowerCase();
-  }
-}

modules/@angular/common/src/pipes/number_pipe.ts

@@ -8,7 +8,7 @@
 
 import {Inject, LOCALE_ID, Pipe, PipeTransform, Type} from '@angular/core';
 
-import {NumberWrapper} from '../facade/lang';
+import {NumberWrapper, isBlank, isPresent} from '../facade/lang';
 
 import {NumberFormatStyle, NumberFormatter} from './intl';
 import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
@@ -18,7 +18,7 @@ const _NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
 function formatNumber(
     pipe: Type<any>, locale: string, value: number | string, style: NumberFormatStyle,
     digits: string, currency: string = null, currencyAsSymbol: boolean = false): string {
-  if (value == null) return null;
+  if (isBlank(value)) return null;
 
   // Convert strings to numbers
   value = typeof value === 'string' && NumberWrapper.isNumeric(value) ? +value : value;
@@ -41,13 +41,13 @@ function formatNumber(
     if (parts === null) {
       throw new Error(`${digits} is not a valid digit info for number pipes`);
     }
-    if (parts[1] != null) {  // min integer digits
+    if (isPresent(parts[1])) {  // min integer digits
       minInt = NumberWrapper.parseIntAutoRadix(parts[1]);
     }
-    if (parts[3] != null) {  // min fraction digits
+    if (isPresent(parts[3])) {  // min fraction digits
       minFraction = NumberWrapper.parseIntAutoRadix(parts[3]);
     }
-    if (parts[5] != null) {  // max fraction digits
+    if (isPresent(parts[5])) {  // max fraction digits
       maxFraction = NumberWrapper.parseIntAutoRadix(parts[5]);
     }
   }

modules/@angular/common/src/pipes/slice_pipe.ts

@@ -7,6 +7,7 @@
  */
 
 import {Pipe, PipeTransform} from '@angular/core';
+import {isBlank} from '../facade/lang';
 import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 
 /**
@@ -57,7 +58,7 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
 @Pipe({name: 'slice', pure: false})
 export class SlicePipe implements PipeTransform {
   transform(value: any, start: number, end?: number): any {
-    if (value == null) return value;
+    if (isBlank(value)) return value;
 
     if (!this.supports(value)) {
       throw new InvalidPipeArgumentError(SlicePipe, value);

modules/@angular/common/src/pipes/uppercase_pipe.ts

@@ -1,36 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Pipe, PipeTransform} from '@angular/core';
-import {isBlank} from '../facade/lang';
-import {InvalidPipeArgumentError} from './invalid_pipe_argument_error';
-
-/**
- * @ngModule CommonModule
- * @whatItDoes Transforms string to uppercase.
- * @howToUse `expression | uppercase`
- * @description
- *
- * Converts value into an uppercase string using `String.prototype.toUpperCase()`.
- *
- * ### Example
- *
- * {@example common/pipes/ts/lowerupper_pipe.ts region='LowerUpperPipe'}
- *
- * @stable
- */
-@Pipe({name: 'uppercase'})
-export class UpperCasePipe implements PipeTransform {
-  transform(value: string): string {
-    if (isBlank(value)) return value;
-    if (typeof value !== 'string') {
-      throw new InvalidPipeArgumentError(UpperCasePipe, value);
-    }
-    return value.toUpperCase();
-  }
-}

modules/@angular/common/test/directives/ng_for_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component} from '@angular/core';
+import {Component, ContentChild, TemplateRef} from '@angular/core';
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {expect} from '@angular/platform-browser/testing/matchers';
@@ -29,7 +29,10 @@ export function main() {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [TestComponent],
+        declarations: [
+          TestComponent,
+          ComponentUsingTestComponent,
+        ],
         imports: [CommonModule],
       });
     });
@@ -74,7 +77,7 @@ export function main() {
        }));
 
     it('should iterate over an array of objects', async(() => {
-         const template = '<ul><li *ngFor="let item of items">{{item["name"]}};</li></ul>';
+         const template = '<ul><li template="ngFor let item of items">{{item["name"]}};</li></ul>';
          fixture = createTestComponent(template);
 
          // INIT
@@ -92,7 +95,7 @@ export function main() {
        }));
 
     it('should gracefully handle nulls', async(() => {
-         const template = '<ul><li *ngFor="let item of null">{{item}};</li></ul>';
+         const template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>';
          fixture = createTestComponent(template);
 
          detectChangesAndExpectText('');
@@ -137,8 +140,12 @@ export function main() {
        }));
 
     it('should repeat over nested arrays', async(() => {
-         const template = '<div *ngFor="let item of items">' +
-             '<div *ngFor="let subitem of item">{{subitem}}-{{item.length}};</div>|' +
+         const template = '<div>' +
+             '<div template="ngFor let item of items">' +
+             '<div template="ngFor let subitem of item">' +
+             '{{subitem}}-{{item.length}};' +
+             '</div>|' +
+             '</div>' +
              '</div>';
          fixture = createTestComponent(template);
 
@@ -150,9 +157,10 @@ export function main() {
        }));
 
     it('should repeat over nested arrays with no intermediate element', async(() => {
-         const template = '<div *ngFor="let item of items">' +
-             '<div *ngFor="let subitem of item">{{subitem}}-{{item.length}};</div>' +
-             '</div>';
+         const template = '<div><template ngFor let-item [ngForOf]="items">' +
+             '<div template="ngFor let subitem of item">' +
+             '{{subitem}}-{{item.length}};' +
+             '</div></template></div>';
          fixture = createTestComponent(template);
 
          getComponent().items = [['a', 'b'], ['c']];
@@ -162,11 +170,10 @@ export function main() {
          detectChangesAndExpectText('e-1;f-2;g-2;');
        }));
 
-    it('should repeat over nested ngIf that are the last node in the ngFor template', async(() => {
-         const template = `<div *ngFor="let item of items; let i=index">` +
-             `<div>{{i}}|</div>` +
-             `<div *ngIf="i % 2 == 0">even|</div>` +
-             `</div>`;
+    it('should repeat over nested ngIf that are the last node in the ngFor temlate', async(() => {
+         const template =
+             `<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` +
+             `<div *ngIf="i % 2 == 0">even|</div></template></div>`;
 
          fixture = createTestComponent(template);
 
@@ -182,7 +189,8 @@ export function main() {
        }));
 
     it('should display indices correctly', async(() => {
-         const template = '<span *ngFor ="let item of items; let i=index">{{i.toString()}}</span>';
+         const template =
+             '<div><span template="ngFor: let item of items; let i=index">{{i.toString()}}</span></div>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@@ -194,7 +202,7 @@ export function main() {
 
     it('should display first item correctly', async(() => {
          const template =
-             '<span *ngFor="let item of items; let isFirst=first">{{isFirst.toString()}}</span>';
+             '<div><span template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</span></div>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2];
@@ -206,7 +214,7 @@ export function main() {
 
     it('should display last item correctly', async(() => {
          const template =
-             '<span *ngFor="let item of items; let isLast=last">{{isLast.toString()}}</span>';
+             '<div><span template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</span></div>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2];
@@ -218,7 +226,7 @@ export function main() {
 
     it('should display even items correctly', async(() => {
          const template =
-             '<span *ngFor="let item of items; let isEven=even">{{isEven.toString()}}</span>';
+             '<div><span template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</span></div>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2];
@@ -230,7 +238,7 @@ export function main() {
 
     it('should display odd items correctly', async(() => {
          const template =
-             '<span *ngFor="let item of items; let isOdd=odd">{{isOdd.toString()}}</span>';
+             '<div><span template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</span></div>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2, 3];
@@ -241,38 +249,55 @@ export function main() {
        }));
 
     it('should allow to use a custom template', async(() => {
-         const template =
-             '<ng-container *ngFor="let item of items; template: tpl"></ng-container>' +
-             '<template let-item let-i="index" #tpl><p>{{i}}: {{item}};</p></template>';
-         fixture = createTestComponent(template);
-         getComponent().items = ['a', 'b', 'c'];
+         const tcTemplate =
+             '<ul><template ngFor [ngForOf]="items" [ngForTemplate]="contentTpl"></template></ul>';
+         TestBed.overrideComponent(TestComponent, {set: {template: tcTemplate}});
+         const cutTemplate =
+             '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
+         TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
+         fixture = TestBed.createComponent(ComponentUsingTestComponent);
+
+         const testComponent = fixture.debugElement.children[0];
+         testComponent.componentInstance.items = ['a', 'b', 'c'];
          fixture.detectChanges();
-         detectChangesAndExpectText('0: a;1: b;2: c;');
+         expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
        }));
 
     it('should use a default template if a custom one is null', async(() => {
-         const template =
-             `<ul><ng-container *ngFor="let item of items; template: null; let i=index">{{i}}: {{item}};</ng-container></ul>`;
-         fixture = createTestComponent(template);
-         getComponent().items = ['a', 'b', 'c'];
+         const testTemplate = `<ul><template ngFor let-item [ngForOf]="items"
+            [ngForTemplate]="contentTpl" let-i="index">{{i}}: {{item}};</template></ul>`;
+         TestBed.overrideComponent(TestComponent, {set: {template: testTemplate}});
+         const cutTemplate =
+             '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
+         TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
+         fixture = TestBed.createComponent(ComponentUsingTestComponent);
+
+         const testComponent = fixture.debugElement.children[0];
+         testComponent.componentInstance.items = ['a', 'b', 'c'];
          fixture.detectChanges();
-         detectChangesAndExpectText('0: a;1: b;2: c;');
+         expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
        }));
 
     it('should use a custom template when both default and a custom one are present', async(() => {
-         const template =
-             '<ng-container *ngFor="let item of items; template: tpl">{{i}};</ng-container>' +
-             '<template let-item let-i="index" #tpl>{{i}}: {{item}};</template>';
-         fixture = createTestComponent(template);
-         getComponent().items = ['a', 'b', 'c'];
+         const testTemplate = `<ul><template ngFor let-item [ngForOf]="items"
+         [ngForTemplate]="contentTpl" let-i="index">{{i}}=> {{item}};</template></ul>`;
+         TestBed.overrideComponent(TestComponent, {set: {template: testTemplate}});
+         const cutTemplate =
+             '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
+         TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
+         fixture = TestBed.createComponent(ComponentUsingTestComponent);
+
+         const testComponent = fixture.debugElement.children[0];
+         testComponent.componentInstance.items = ['a', 'b', 'c'];
          fixture.detectChanges();
-         detectChangesAndExpectText('0: a;1: b;2: c;');
+         expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
        }));
 
     describe('track by', () => {
       it('should console.warn if trackBy is not a function', async(() => {
            // TODO(vicb): expect a warning message when we have a proper log service
-           const template = `<p *ngFor="let item of items; trackBy: value"></p>`;
+           const template =
+               `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="value"></template>`;
            fixture = createTestComponent(template);
            fixture.componentInstance.value = 0;
            fixture.detectChanges();
@@ -280,7 +305,8 @@ export function main() {
 
       it('should track by identity when trackBy is to `null` or `undefined`', async(() => {
            // TODO(vicb): expect no warning message when we have a proper log service
-           const template = `<p *ngFor="let item of items; trackBy: value">{{ item }}</p>`;
+           const template =
+               `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="value">{{ item }}</template>`;
            fixture = createTestComponent(template);
            fixture.componentInstance.items = ['a', 'b', 'c'];
            fixture.componentInstance.value = null;
@@ -291,7 +317,7 @@ export function main() {
 
       it('should set the context to the component instance', async(() => {
            const template =
-               `<p *ngFor="let item of items; trackBy: trackByContext.bind(this)"></p>`;
+               `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByContext.bind(this)"></template>`;
            fixture = createTestComponent(template);
 
            thisArg = null;
@@ -301,7 +327,9 @@ export function main() {
 
       it('should not replace tracked items', async(() => {
            const template =
-               `<p *ngFor="let item of items; trackBy: trackById; let i=index">{{items[i]}}</p>`;
+               `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById" let-i="index">
+               <p>{{items[i]}}</p>
+              </template>`;
            fixture = createTestComponent(template);
 
            const buildItemList = () => {
@@ -317,7 +345,7 @@ export function main() {
 
       it('should update implicit local variable on view', async(() => {
            const template =
-               `<div *ngFor="let item of items; trackBy: trackById">{{item['color']}}</div>`;
+               `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
            fixture = createTestComponent(template);
 
            getComponent().items = [{'id': 'a', 'color': 'blue'}];
@@ -329,7 +357,7 @@ export function main() {
 
       it('should move items around and keep them updated ', async(() => {
            const template =
-               `<div *ngFor="let item of items; trackBy: trackById">{{item['color']}}</div>`;
+               `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
            fixture = createTestComponent(template);
 
            getComponent().items = [{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}];
@@ -340,7 +368,8 @@ export function main() {
          }));
 
       it('should handle added and removed items properly when tracking by index', async(() => {
-           const template = `<div *ngFor="let item of items; trackBy: trackByIndex">{{item}}</div>`;
+           const template =
+               `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByIndex">{{item}}</template></div>`;
            fixture = createTestComponent(template);
 
            getComponent().items = ['a', 'b', 'c', 'd'];
@@ -360,6 +389,7 @@ class Foo {
 
 @Component({selector: 'test-cmp', template: ''})
 class TestComponent {
+  @ContentChild(TemplateRef) contentTpl: TemplateRef<Object>;
   value: any;
   items: any[] = [1, 2];
   trackById(index: number, item: any): string { return item['id']; }
@@ -367,7 +397,12 @@ class TestComponent {
   trackByContext(): void { thisArg = this; }
 }
 
-const TEMPLATE = '<div><span *ngFor="let item of items">{{item.toString()}};</span></div>';
+@Component({selector: 'outer-cmp', template: ''})
+class ComponentUsingTestComponent {
+  items: any = [1, 2];
+}
+
+const TEMPLATE = '<div><span template="ngFor let item of items">{{item.toString()}};</span></div>';
 
 function createTestComponent(template: string = TEMPLATE): ComponentFixture<TestComponent> {
   return TestBed.overrideComponent(TestComponent, {set: {template: template}})

modules/@angular/common/test/directives/ng_if_spec.ts

@@ -9,7 +9,6 @@
 import {CommonModule} from '@angular/common';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
-import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {expect} from '@angular/platform-browser/testing/matchers';
 
@@ -29,114 +28,203 @@ export function main() {
     });
 
     it('should work in a template attribute', async(() => {
-         const template = '<span *ngIf="booleanCondition">hello</span>';
+         const template = '<div><span template="ngIf booleanCondition">hello</span></div>';
          fixture = createTestComponent(template);
+
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello');
        }));
 
-    it('should work on a template element', async(() => {
-         const template = '<template [ngIf]="booleanCondition">hello2</template>';
+    it('should work in a template element', async(() => {
+         const template =
+             '<div><template [ngIf]="booleanCondition"><span>hello2</span></template></div>';
+
          fixture = createTestComponent(template);
          fixture.detectChanges();
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello2');
        }));
 
     it('should toggle node when condition changes', async(() => {
-         const template = '<span *ngIf="booleanCondition">hello</span>';
+         const template = '<div><span template="ngIf booleanCondition">hello</span></div>';
+
          fixture = createTestComponent(template);
          getComponent().booleanCondition = false;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
 
          getComponent().booleanCondition = true;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello');
 
          getComponent().booleanCondition = false;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
        }));
 
     it('should handle nested if correctly', async(() => {
          const template =
-             '<div *ngIf="booleanCondition"><span *ngIf="nestedBooleanCondition">hello</span></div>';
+             '<div><template [ngIf]="booleanCondition"><span *ngIf="nestedBooleanCondition">hello</span></template></div>';
 
          fixture = createTestComponent(template);
 
          getComponent().booleanCondition = false;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
 
          getComponent().booleanCondition = true;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello');
 
          getComponent().nestedBooleanCondition = false;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
 
          getComponent().nestedBooleanCondition = true;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello');
 
          getComponent().booleanCondition = false;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
        }));
 
     it('should update several nodes with if', async(() => {
-         const template = '<span *ngIf="numberCondition + 1 >= 2">helloNumber</span>' +
-             '<span *ngIf="stringCondition == \'foo\'">helloString</span>' +
-             '<span *ngIf="functionCondition(stringCondition, numberCondition)">helloFunction</span>';
+         const template = '<div>' +
+             '<span template="ngIf numberCondition + 1 >= 2">helloNumber</span>' +
+             '<span template="ngIf stringCondition == \'foo\'">helloString</span>' +
+             '<span template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</span>' +
+             '</div>';
 
          fixture = createTestComponent(template);
 
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(3);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(3);
          expect(getDOM().getText(fixture.nativeElement))
              .toEqual('helloNumberhelloStringhelloFunction');
 
          getComponent().numberCondition = 0;
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('helloString');
 
          getComponent().numberCondition = 1;
          getComponent().stringCondition = 'bar';
          fixture.detectChanges();
-         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('helloNumber');
        }));
 
-    it('should not add the element twice if the condition goes from truthy to truthy', async(() => {
-         const template = '<span *ngIf="numberCondition">hello</span>';
+    it('should not add the element twice if the condition goes from true to true (JS)',
+       async(() => {
+         const template = '<div><span template="ngIf numberCondition">hello</span></div>';
 
          fixture = createTestComponent(template);
 
          fixture.detectChanges();
-         let els = fixture.debugElement.queryAll(By.css('span'));
-         expect(els.length).toEqual(1);
-         getDOM().addClass(els[0].nativeElement, 'marker');
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello');
 
          getComponent().numberCondition = 2;
          fixture.detectChanges();
-         els = fixture.debugElement.queryAll(By.css('span'));
-         expect(els.length).toEqual(1);
-         expect(getDOM().hasClass(els[0].nativeElement, 'marker')).toBe(true);
-
+         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello');
        }));
+
+    it('should not recreate the element if the condition goes from true to true (JS)', async(() => {
+         const template = '<div><span template="ngIf numberCondition">hello</span></div>';
+
+         fixture = createTestComponent(template);
+
+         fixture.detectChanges();
+         getDOM().addClass(getDOM().querySelector(fixture.nativeElement, 'span'), 'foo');
+
+         getComponent().numberCondition = 2;
+         fixture.detectChanges();
+         expect(getDOM().hasClass(getDOM().querySelector(fixture.nativeElement, 'span'), 'foo'))
+             .toBe(true);
+       }));
+
+    describe('else', () => {
+      it('should support else', async(() => {
+           const template = '<div>' +
+               '<span *ngIf="booleanCondition; else elseBlock">TRUE</span>' +
+               '<template #elseBlock>FALSE</template>' +
+               '</div>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('TRUE');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('FALSE');
+         }));
+
+      it('should support then and else', async(() => {
+           const template = '<div>' +
+               '<span *ngIf="booleanCondition; then thenBlock; else elseBlock">IGNORE</span>' +
+               '<template #thenBlock>THEN</template>' +
+               '<template #elseBlock>ELSE</template>' +
+               '</div>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('THEN');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('ELSE');
+         }));
+
+      it('should support dynamic else', async(() => {
+           const template = '<div>' +
+               '<span *ngIf="booleanCondition; else nestedBooleanCondition ? b1 : b2">TRUE</span>' +
+               '<template #b1>FALSE1</template>' +
+               '<template #b2>FALSE2</template>' +
+               '</div>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('TRUE');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('FALSE1');
+
+           getComponent().nestedBooleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('FALSE2');
+         }));
+
+      it('should support binding to variable', async(() => {
+           const template = '<div>' +
+               '<span *ngIf="booleanCondition; else elseBlock; let v">{{v}}</span>' +
+               '<template #elseBlock let-v>{{v}}</template>' +
+               '</div>';
+
+           fixture = createTestComponent(template);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('true');
+
+           getComponent().booleanCondition = false;
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('false');
+         }));
+    });
   });
 }
 

modules/@angular/common/test/directives/ng_plural_spec.ts

@@ -12,7 +12,7 @@ import {ComponentFixture, TestBed, async} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/matchers';
 
 export function main() {
-  describe('ngPlural', () => {
+  describe('switch', () => {
     let fixture: ComponentFixture<any>;
 
     function getComponent(): TestComponent { return fixture.componentInstance; }
@@ -33,25 +33,10 @@ export function main() {
     });
 
     it('should display the template according to the exact value', async(() => {
-         const template = '<ul [ngPlural]="switchValue">' +
-             '<template ngPluralCase="=0"><li>you have no messages.</li></template>' +
-             '<template ngPluralCase="=1"><li>you have one message.</li></template>' +
-             '</ul>';
-
-         fixture = createTestComponent(template);
-
-         getComponent().switchValue = 0;
-         detectChangesAndExpectText('you have no messages.');
-
-         getComponent().switchValue = 1;
-         detectChangesAndExpectText('you have one message.');
-       }));
-
-    it('should display the template according to the exact numeric value', async(() => {
          const template = '<div>' +
              '<ul [ngPlural]="switchValue">' +
-             '<template ngPluralCase="0"><li>you have no messages.</li></template>' +
-             '<template ngPluralCase="1"><li>you have one message.</li></template>' +
+             '<template ngPluralCase="=0"><li>you have no messages.</li></template>' +
+             '<template ngPluralCase="=1"><li>you have one message.</li></template>' +
              '</ul></div>';
 
          fixture = createTestComponent(template);
@@ -66,9 +51,10 @@ export function main() {
     // https://github.com/angular/angular/issues/9868
     // https://github.com/angular/angular/issues/9882
     it('should not throw when ngPluralCase contains expressions', async(() => {
-         const template = '<ul [ngPlural]="switchValue">' +
+         const template = '<div>' +
+             '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="=0"><li>{{ switchValue }}</li></template>' +
-             '</ul>';
+             '</ul></div>';
 
          fixture = createTestComponent(template);
 
@@ -78,10 +64,11 @@ export function main() {
 
 
     it('should be applicable to <ng-container> elements', async(() => {
-         const template = '<ng-container [ngPlural]="switchValue">' +
+         const template = '<div>' +
+             '<ng-container [ngPlural]="switchValue">' +
              '<template ngPluralCase="=0">you have no messages.</template>' +
              '<template ngPluralCase="=1">you have one message.</template>' +
-             '</ng-container>';
+             '</ng-container></div>';
 
          fixture = createTestComponent(template);
 
@@ -93,10 +80,11 @@ export function main() {
        }));
 
     it('should display the template according to the category', async(() => {
-         const template = '<ul [ngPlural]="switchValue">' +
+         const template = '<div>' +
+             '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
              '<template ngPluralCase="many"><li>you have many messages.</li></template>' +
-             '</ul>';
+             '</ul></div>';
 
          fixture = createTestComponent(template);
 
@@ -108,10 +96,11 @@ export function main() {
        }));
 
     it('should default to other when no matches are found', async(() => {
-         const template = '<ul [ngPlural]="switchValue">' +
+         const template = '<div>' +
+             '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
              '<template ngPluralCase="other"><li>default message.</li></template>' +
-             '</ul>';
+             '</ul></div>';
 
          fixture = createTestComponent(template);
 
@@ -120,10 +109,11 @@ export function main() {
        }));
 
     it('should prioritize value matches over category matches', async(() => {
-         const template = '<ul [ngPlural]="switchValue">' +
+         const template = '<div>' +
+             '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
              '<template ngPluralCase="=2">you have two messages.</template>' +
-             '</ul>';
+             '</ul></div>';
 
          fixture = createTestComponent(template);
 

modules/@angular/common/test/directives/ng_style_spec.ts

@@ -29,19 +29,22 @@ export function main() {
     it('should add styles specified in an object literal', async(() => {
          const template = `<div [ngStyle]="{'max-width': '40px'}"></div>`;
          fixture = createTestComponent(template);
+
          fixture.detectChanges();
          expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
        }));
 
     it('should add and change styles specified in an object expression', async(() => {
          const template = `<div [ngStyle]="expr"></div>`;
+
          fixture = createTestComponent(template);
+         let expr: {[k: string]: string};
 
          getComponent().expr = {'max-width': '40px'};
          fixture.detectChanges();
          expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
 
-         let expr = getComponent().expr;
+         expr = getComponent().expr;
          expr['max-width'] = '30%';
          fixture.detectChanges();
          expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'});

modules/@angular/common/test/directives/ng_switch_spec.ts

@@ -33,10 +33,11 @@ export function main() {
 
     describe('switch value changes', () => {
       it('should switch amongst when values', () => {
-        const template = '<ul [ngSwitch]="switchValue">' +
-            '<li *ngSwitchCase="\'a\'">when a</li>' +
-            '<li *ngSwitchCase="\'b\'">when b</li>' +
-            '</ul>';
+        const template = '<div>' +
+            '<ul [ngSwitch]="switchValue">' +
+            '<template ngSwitchCase="a"><li>when a</li></template>' +
+            '<template ngSwitchCase="b"><li>when b</li></template>' +
+            '</ul></div>';
 
         fixture = createTestComponent(template);
 
@@ -50,10 +51,11 @@ export function main() {
       });
 
       it('should switch amongst when values with fallback to default', () => {
-        const template = '<ul [ngSwitch]="switchValue">' +
-            '<li *ngSwitchCase="\'a\'">when a</li>' +
-            '<li *ngSwitchDefault>when default</li>' +
-            '</ul>';
+        const template = '<div>' +
+            '<ul [ngSwitch]="switchValue">' +
+            '<li template="ngSwitchCase \'a\'">when a</li>' +
+            '<li template="ngSwitchDefault">when default</li>' +
+            '</ul></div>';
 
         fixture = createTestComponent(template);
         detectChangesAndExpectText('when default');
@@ -69,14 +71,15 @@ export function main() {
       });
 
       it('should support multiple whens with the same value', () => {
-        const template = '<ul [ngSwitch]="switchValue">' +
-            '<li *ngSwitchCase="\'a\'">when a1;</li>' +
-            '<li *ngSwitchCase="\'b\'">when b1;</li>' +
-            '<li *ngSwitchCase="\'a\'">when a2;</li>' +
-            '<li *ngSwitchCase="\'b\'">when b2;</li>' +
-            '<li *ngSwitchDefault>when default1;</li>' +
-            '<li *ngSwitchDefault>when default2;</li>' +
-            '</ul>';
+        const template = '<div>' +
+            '<ul [ngSwitch]="switchValue">' +
+            '<template ngSwitchCase="a"><li>when a1;</li></template>' +
+            '<template ngSwitchCase="b"><li>when b1;</li></template>' +
+            '<template ngSwitchCase="a"><li>when a2;</li></template>' +
+            '<template ngSwitchCase="b"><li>when b2;</li></template>' +
+            '<template ngSwitchDefault><li>when default1;</li></template>' +
+            '<template ngSwitchDefault><li>when default2;</li></template>' +
+            '</ul></div>';
 
         fixture = createTestComponent(template);
         detectChangesAndExpectText('when default1;when default2;');
@@ -91,11 +94,12 @@ export function main() {
 
     describe('when values changes', () => {
       it('should switch amongst when values', () => {
-        const template = '<ul [ngSwitch]="switchValue">' +
-            '<li *ngSwitchCase="when1">when 1;</li>' +
-            '<li *ngSwitchCase="when2">when 2;</li>' +
-            '<li *ngSwitchDefault>when default;</li>' +
-            '</ul>';
+        const template = '<div>' +
+            '<ul [ngSwitch]="switchValue">' +
+            '<template [ngSwitchCase]="when1"><li>when 1;</li></template>' +
+            '<template [ngSwitchCase]="when2"><li>when 2;</li></template>' +
+            '<template ngSwitchDefault><li>when default;</li></template>' +
+            '</ul></div>';
 
         fixture = createTestComponent(template);
         getComponent().when1 = 'a';
@@ -144,10 +148,11 @@ export function main() {
       });
 
       it('should create the default case if there is no other case', () => {
-        const template = '<ul [ngSwitch]="switchValue">' +
-            '<li *ngSwitchDefault>when default1;</li>' +
-            '<li *ngSwitchDefault>when default2;</li>' +
-            '</ul>';
+        const template = '<div>' +
+            '<ul [ngSwitch]="switchValue">' +
+            '<template ngSwitchDefault><li>when default1;</li></template>' +
+            '<template ngSwitchDefault><li>when default2;</li></template>' +
+            '</ul></div>';
 
         fixture = createTestComponent(template);
         detectChangesAndExpectText('when default1;when default2;');
@@ -155,14 +160,15 @@ export function main() {
       });
 
       it('should allow defaults before cases', () => {
-        const template = '<ul [ngSwitch]="switchValue">' +
-            '<li *ngSwitchDefault>when default1;</li>' +
-            '<li *ngSwitchDefault>when default2;</li>' +
-            '<li *ngSwitchCase="\'a\'">when a1;</li>' +
-            '<li *ngSwitchCase="\'b\'">when b1;</li>' +
-            '<li *ngSwitchCase="\'a\'">when a2;</li>' +
-            '<li *ngSwitchCase="\'b\'">when b2;</li>' +
-            '</ul>';
+        const template = '<div>' +
+            '<ul [ngSwitch]="switchValue">' +
+            '<template ngSwitchDefault><li>when default1;</li></template>' +
+            '<template ngSwitchDefault><li>when default2;</li></template>' +
+            '<template ngSwitchCase="a"><li>when a1;</li></template>' +
+            '<template ngSwitchCase="b"><li>when b1;</li></template>' +
+            '<template ngSwitchCase="a"><li>when a2;</li></template>' +
+            '<template ngSwitchCase="b"><li>when b2;</li></template>' +
+            '</ul></div>';
 
         fixture = createTestComponent(template);
         detectChangesAndExpectText('when default1;when default2;');

modules/@angular/common/test/directives/ng_template_outlet_spec.ts

@@ -34,22 +34,29 @@ export function main() {
       });
     });
 
-    it('should do nothing if templateRef is `null`', async(() => {
-         const template = `<ng-container [ngTemplateOutlet]="null"></ng-container>`;
+    it('should do nothing if templateRef is null', async(() => {
+         const template = `<template [ngTemplateOutlet]="null"></template>`;
          fixture = createTestComponent(template);
+
          detectChangesAndExpectText('');
        }));
 
     it('should insert content specified by TemplateRef', async(() => {
-         const template = `<template #tpl>foo</template>` +
-             `<ng-container [ngTemplateOutlet]="tpl"></ng-container>`;
+         const template =
+             `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
          fixture = createTestComponent(template);
+
+         detectChangesAndExpectText('');
+
+         const refs = fixture.debugElement.children[0].references['refs'];
+
+         setTplRef(refs.tplRefs.first);
          detectChangesAndExpectText('foo');
        }));
 
-    it('should clear content if TemplateRef becomes `null`', async(() => {
-         const template = `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs>` +
-             `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
+    it('should clear content if TemplateRef becomes null', async(() => {
+         const template =
+             `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
          fixture = createTestComponent(template);
          fixture.detectChanges();
          const refs = fixture.debugElement.children[0].references['refs'];
@@ -63,8 +70,7 @@ export function main() {
 
     it('should swap content if TemplateRef changes', async(() => {
          const template =
-             `<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs>` +
-             `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
+             `<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
          fixture = createTestComponent(template);
 
          fixture.detectChanges();
@@ -77,47 +83,70 @@ export function main() {
          detectChangesAndExpectText('bar');
        }));
 
-    it('should display template if context is `null`', async(() => {
-         const template = `<template #tpl>foo</template>` +
-             `<ng-container [ngTemplateOutlet]="tpl" [ngOutletContext]="null"></ng-container>`;
+    it('should display template if context is null', async(() => {
+         const template =
+             `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="null"></template>`;
          fixture = createTestComponent(template);
+         detectChangesAndExpectText('');
+
+         const refs = fixture.debugElement.children[0].references['refs'];
+
+         setTplRef(refs.tplRefs.first);
          detectChangesAndExpectText('foo');
        }));
 
     it('should reflect initial context and changes', async(() => {
-         const template = `<template let-foo="foo" #tpl>{{foo}}</template>` +
-             `<ng-container [ngTemplateOutlet]="tpl" [ngOutletContext]="context"></ng-container>`;
+         const template =
+             `<tpl-refs #refs="tplRefs"><template let-foo="foo"><span>{{foo}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
          fixture = createTestComponent(template);
 
          fixture.detectChanges();
+
+         const refs = fixture.debugElement.children[0].references['refs'];
+         setTplRef(refs.tplRefs.first);
+
          detectChangesAndExpectText('bar');
 
          fixture.componentInstance.context.foo = 'alter-bar';
+
          detectChangesAndExpectText('alter-bar');
        }));
 
-    it('should reflect user defined `$implicit` property in the context', async(() => {
-         const template = `<template let-ctx #tpl>{{ctx.foo}}</template>` +
-             `<ng-container [ngTemplateOutlet]="tpl" [ngOutletContext]="context"></ng-container>`;
+    it('should reflect user defined $implicit property in the context', async(() => {
+         const template =
+             `<tpl-refs #refs="tplRefs"><template let-ctx><span>{{ctx.foo}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
          fixture = createTestComponent(template);
-         fixture.componentInstance.context = {$implicit: {foo: 'bra'}};
-         detectChangesAndExpectText('bra');
+
+         fixture.detectChanges();
+
+         const refs = fixture.debugElement.children[0].references['refs'];
+         setTplRef(refs.tplRefs.first);
+
+         fixture.componentInstance.context = {$implicit: fixture.componentInstance.context};
+         detectChangesAndExpectText('bar');
        }));
 
     it('should reflect context re-binding', async(() => {
-         const template = `<template let-shawshank="shawshank" #tpl>{{shawshank}}</template>` +
-             `<ng-container [ngTemplateOutlet]="tpl" [ngOutletContext]="context"></ng-container>`;
+         const template =
+             `<tpl-refs #refs="tplRefs"><template let-shawshank="shawshank"><span>{{shawshank}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
          fixture = createTestComponent(template);
 
+         fixture.detectChanges();
+
+         const refs = fixture.debugElement.children[0].references['refs'];
+         setTplRef(refs.tplRefs.first);
          fixture.componentInstance.context = {shawshank: 'brooks'};
+
          detectChangesAndExpectText('brooks');
 
          fixture.componentInstance.context = {shawshank: 'was here'};
+
          detectChangesAndExpectText('was here');
        }));
   });
 }
 
+
 @Directive({selector: 'tpl-refs', exportAs: 'tplRefs'})
 class CaptureTplRefs {
   @ContentChildren(TemplateRef) tplRefs: QueryList<TemplateRef<any>>;
@@ -133,4 +162,4 @@ function createTestComponent(template: string): ComponentFixture<TestComponent>
   return TestBed.overrideComponent(TestComponent, {set: {template: template}})
       .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
       .createComponent(TestComponent);
-}
+}

modules/@angular/common/test/pipes/case_conversion_pipes_spec.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
+
+export function main() {
+  describe('LowerCasePipe', () => {
+    let pipe: LowerCasePipe;
+
+    beforeEach(() => { pipe = new LowerCasePipe(); });
+
+    it('should return lowercase', () => { expect(pipe.transform('FOO')).toEqual('foo'); });
+
+    it('should lowercase when there is a new value', () => {
+      expect(pipe.transform('FOO')).toEqual('foo');
+      expect(pipe.transform('BAr')).toEqual('bar');
+    });
+
+    it('should not support other objects',
+       () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
+  });
+
+  describe('TitleCasePipe', () => {
+    let pipe: TitleCasePipe;
+
+    beforeEach(() => { pipe = new TitleCasePipe(); });
+
+    it('should return titlecase', () => { expect(pipe.transform('foo')).toEqual('Foo'); });
+
+    it('should return titlecase for subsequent words',
+       () => { expect(pipe.transform('one TWO Three fouR')).toEqual('One Two Three Four'); });
+
+    it('should support empty strings', () => { expect(pipe.transform('')).toEqual(''); });
+
+    it('should persist whitespace',
+       () => { expect(pipe.transform('one   two')).toEqual('One   Two'); });
+
+    it('should titlecase when there is a new value', () => {
+      expect(pipe.transform('bar')).toEqual('Bar');
+      expect(pipe.transform('foo')).toEqual('Foo');
+    });
+
+    it('should not support other objects',
+       () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
+  });
+
+  describe('UpperCasePipe', () => {
+    let pipe: UpperCasePipe;
+
+    beforeEach(() => { pipe = new UpperCasePipe(); });
+
+    it('should return uppercase', () => { expect(pipe.transform('foo')).toEqual('FOO'); });
+
+    it('should uppercase when there is a new value', () => {
+      expect(pipe.transform('foo')).toEqual('FOO');
+      expect(pipe.transform('bar')).toEqual('BAR');
+    });
+
+    it('should not support other objects',
+       () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
+  });
+}

modules/@angular/common/test/pipes/lowercase_pipe_spec.ts

@@ -1,42 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {LowerCasePipe} from '@angular/common';
-import {beforeEach, describe, expect, it} from '@angular/core/testing/testing_internal';
-
-export function main() {
-  describe('LowerCasePipe', () => {
-    let upper: string;
-    let lower: string;
-    let pipe: LowerCasePipe;
-
-    beforeEach(() => {
-      lower = 'something';
-      upper = 'SOMETHING';
-      pipe = new LowerCasePipe();
-    });
-
-    describe('transform', () => {
-      it('should return lowercase', () => {
-        const val = pipe.transform(upper);
-        expect(val).toEqual(lower);
-      });
-
-      it('should lowercase when there is a new value', () => {
-        const val = pipe.transform(upper);
-        expect(val).toEqual(lower);
-        const val2 = pipe.transform('WAT');
-        expect(val2).toEqual('wat');
-      });
-
-      it('should not support other objects',
-         () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
-    });
-
-  });
-}

modules/@angular/common/test/pipes/uppercase_pipe_spec.ts

@@ -1,43 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {UpperCasePipe} from '@angular/common';
-import {beforeEach, describe, expect, it} from '@angular/core/testing/testing_internal';
-
-export function main() {
-  describe('UpperCasePipe', () => {
-    let upper: string;
-    let lower: string;
-    let pipe: UpperCasePipe;
-
-    beforeEach(() => {
-      lower = 'something';
-      upper = 'SOMETHING';
-      pipe = new UpperCasePipe();
-    });
-
-    describe('transform', () => {
-
-      it('should return uppercase', () => {
-        const val = pipe.transform(lower);
-        expect(val).toEqual(upper);
-      });
-
-      it('should uppercase when there is a new value', () => {
-        const val = pipe.transform(lower);
-        expect(val).toEqual(upper);
-        const val2 = pipe.transform('wat');
-        expect(val2).toEqual('WAT');
-      });
-
-      it('should not support other objects',
-         () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
-    });
-
-  });
-}

modules/@angular/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature-nested.module.ts

@@ -1,23 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Component, NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-
-@Component({selector: 'lazy-feature-comp', template: 'lazy feature, nested!'})
-export class LazyFeatureNestedComponent {
-}
-
-@NgModule({
-  imports: [RouterModule.forChild([
-    {path: '', component: LazyFeatureNestedComponent, pathMatch: 'full'},
-  ])],
-  declarations: [LazyFeatureNestedComponent]
-})
-export class LazyFeatureNestedModule {
-}

modules/@angular/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature.module.ts

@@ -16,10 +16,7 @@ export class LazyFeatureComponent {
 @NgModule({
   imports: [RouterModule.forChild([
     {path: '', component: LazyFeatureComponent, pathMatch: 'full'},
-    {path: 'feature', loadChildren: './feature.module#FeatureModule'}, {
-      path: 'nested-feature',
-      loadChildren: './lazy-feature-nested.module#LazyFeatureNestedModule'
-    }
+    {path: 'feature', loadChildren: './feature.module#FeatureModule'}
   ])],
   declarations: [LazyFeatureComponent]
 })

modules/@angular/compiler-cli/integrationtest/test/test_ngtools_api.ts

@@ -191,8 +191,6 @@ function lazyRoutesTest() {
     './lazy.module#LazyModule': 'lazy.module.ts',
     './feature/feature.module#FeatureModule': 'feature/feature.module.ts',
     './feature/lazy-feature.module#LazyFeatureModule': 'feature/lazy-feature.module.ts',
-    './feature.module#FeatureModule': 'feature/feature.module.ts',
-    './lazy-feature-nested.module#LazyFeatureNestedModule': 'feature/lazy-feature-nested.module.ts',
     'feature2/feature2.module#Feature2Module': 'feature2/feature2.module.ts',
     './default.module': 'feature2/default.module.ts',
     'feature/feature.module#FeatureModule': 'feature/feature.module.ts'

modules/@angular/compiler-cli/package.json

@@ -9,7 +9,7 @@
     "ng-xi18n": "./src/extract_i18n.js"
   },
   "dependencies": {
-    "@angular/tsc-wrapped": "0.5.1",
+    "@angular/tsc-wrapped": "0.5.0",
     "reflect-metadata": "^0.1.2",
     "minimist": "^1.2.0"
   },

modules/@angular/compiler-cli/src/codegen.ts

@@ -36,6 +36,29 @@ export class CodeGenerator {
       public host: ts.CompilerHost, private compiler: compiler.AotCompiler,
       private ngCompilerHost: CompilerHost) {}
 
+  // Write codegen in a directory structure matching the sources.
+  private calculateEmitPath(filePath: string): string {
+    let root = this.options.basePath;
+    for (const eachRootDir of this.options.rootDirs || []) {
+      if (this.options.trace) {
+        console.error(`Check if ${filePath} is under rootDirs element ${eachRootDir}`);
+      }
+      if (path.relative(eachRootDir, filePath).indexOf('.') !== 0) {
+        root = eachRootDir;
+      }
+    }
+
+    // transplant the codegen path to be inside the `genDir`
+    let relativePath: string = path.relative(root, filePath);
+    while (relativePath.startsWith('..' + path.sep)) {
+      // Strip out any `..` path such as: `../node_modules/@foo` as we want to put everything
+      // into `genDir`.
+      relativePath = relativePath.substr(3);
+    }
+
+    return path.join(this.options.genDir, relativePath);
+  }
+
   codegen(): Promise<any> {
     return this.compiler
         .compileAll(this.program.getSourceFiles().map(
@@ -43,7 +66,7 @@ export class CodeGenerator {
         .then(generatedModules => {
           generatedModules.forEach(generatedModule => {
             const sourceFile = this.program.getSourceFile(generatedModule.srcFileUrl);
-            const emitPath = this.ngCompilerHost.calculateEmitPath(generatedModule.genFileUrl);
+            const emitPath = this.calculateEmitPath(generatedModule.genFileUrl);
             const source = GENERATED_META_FILES.test(emitPath) ? generatedModule.source :
                                                                  PREAMBLE + generatedModule.source;
             this.host.writeFile(emitPath, source, false, () => {}, [sourceFile]);

modules/@angular/compiler-cli/src/compiler_host.ts

@@ -261,29 +261,6 @@ export class CompilerHost implements AotCompilerHost {
         this.options.generateCodeForLibraries === false ? GENERATED_OR_DTS_FILES : GENERATED_FILES;
     return !excludeRegex.test(filePath);
   }
-
-  calculateEmitPath(filePath: string): string {
-    // Write codegen in a directory structure matching the sources.
-    let root = this.options.basePath;
-    for (const eachRootDir of this.options.rootDirs || []) {
-      if (this.options.trace) {
-        console.error(`Check if ${filePath} is under rootDirs element ${eachRootDir}`);
-      }
-      if (path.relative(eachRootDir, filePath).indexOf('.') !== 0) {
-        root = eachRootDir;
-      }
-    }
-
-    // transplant the codegen path to be inside the `genDir`
-    let relativePath: string = path.relative(root, filePath);
-    while (relativePath.startsWith('..' + path.sep)) {
-      // Strip out any `..` path such as: `../node_modules/@foo` as we want to put everything
-      // into `genDir`.
-      relativePath = relativePath.substr(3);
-    }
-
-    return path.join(this.options.genDir, relativePath);
-  }
 }
 
 export class CompilerHostContextAdapter {

modules/@angular/compiler-cli/src/ngtools_impl.ts

@@ -15,6 +15,8 @@
 import {AotCompilerHost, StaticReflector, StaticSymbol} from '@angular/compiler';
 import {NgModule} from '@angular/core';
 
+
+
 // We cannot depend directly to @angular/router.
 type Route = any;
 const ROUTER_MODULE_PATH = '@angular/router/src/router_config_loader';
@@ -61,37 +63,29 @@ export function listLazyRoutesOfModule(
   const className = entryRouteDef.className;
 
   // List loadChildren of this single module.
-  const appStaticSymbol = reflector.findDeclaration(modulePath, className, containingFile);
+  const staticSymbol = reflector.findDeclaration(modulePath, className, containingFile);
   const ROUTES = reflector.findDeclaration(ROUTER_MODULE_PATH, ROUTER_ROUTES_SYMBOL_NAME);
   const lazyRoutes: LazyRoute[] =
-      _extractLazyRoutesFromStaticModule(appStaticSymbol, reflector, host, ROUTES);
+      _extractLazyRoutesFromStaticModule(staticSymbol, reflector, host, ROUTES);
+  const routes: LazyRouteMap = {};
 
-  const allLazyRoutes = lazyRoutes.reduce(
-      function includeLazyRouteAndSubRoutes(allRoutes: LazyRouteMap, lazyRoute: LazyRoute):
-          LazyRouteMap {
-            const route: string = lazyRoute.routeDef.toString();
-            _assertRoute(allRoutes, lazyRoute);
-            allRoutes[route] = lazyRoute;
+  lazyRoutes.forEach((lazyRoute: LazyRoute) => {
+    const route: string = lazyRoute.routeDef.toString();
+    _assertRoute(routes, lazyRoute);
+    routes[route] = lazyRoute;
 
-            // StaticReflector does not support discovering annotations like `NgModule` on default
-            // exports
-            // Which means: if a default export NgModule was lazy-loaded, we can discover it, but,
-            //  we cannot parse its routes to see if they have loadChildren or not.
-            if (!lazyRoute.routeDef.className) {
-              return allRoutes;
-            }
+    const lazyModuleSymbol = reflector.findDeclaration(
+        lazyRoute.absoluteFilePath, lazyRoute.routeDef.className || 'default');
+    const subRoutes = _extractLazyRoutesFromStaticModule(lazyModuleSymbol, reflector, host, ROUTES);
 
-            const lazyModuleSymbol = reflector.findDeclaration(
-                lazyRoute.absoluteFilePath, lazyRoute.routeDef.className || 'default');
+    // Populate the map using the routes we just found.
+    subRoutes.forEach(subRoute => {
+      _assertRoute(routes, subRoute);
+      routes[subRoute.routeDef.toString()] = subRoute;
+    });
+  });
 
-            const subRoutes =
-                _extractLazyRoutesFromStaticModule(lazyModuleSymbol, reflector, host, ROUTES);
-
-            return subRoutes.reduce(includeLazyRouteAndSubRoutes, allRoutes);
-          },
-      {});
-
-  return allLazyRoutes;
+  return routes;
 }
 
 
@@ -198,7 +192,7 @@ function _collectRoutes(
  */
 function _collectLoadChildren(routes: Route[]): string[] {
   return routes.reduce((m, r) => {
-    if (r.loadChildren && typeof r.loadChildren === 'string') {
+    if (r.loadChildren) {
       return m.concat(r.loadChildren);
     } else if (Array.isArray(r)) {
       return m.concat(_collectLoadChildren(r));

modules/@angular/compiler/src/aot/compiler.ts

@@ -6,9 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {SchemaMetadata} from '@angular/core';
+
 import {AnimationCompiler} from '../animation/animation_compiler';
 import {AnimationParser} from '../animation/animation_parser';
-import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompilePipeMetadata, CompileProviderMetadata, CompileTypeSummary, createHostComponentMeta, identifierModuleUrl, identifierName} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompilePipeMetadata, CompileProviderMetadata, CompileTypeSummary, componentFactoryName, createHostComponentMeta, identifierModuleUrl, identifierName} from '../compile_metadata';
 import {DirectiveNormalizer} from '../directive_normalizer';
 import {DirectiveWrapperCompileResult, DirectiveWrapperCompiler} from '../directive_wrapper_compiler';
 import {ListWrapper} from '../facade/collection';
@@ -20,13 +22,14 @@ import * as o from '../output/output_ast';
 import {CompiledStylesheet, StyleCompiler} from '../style_compiler';
 import {SummaryResolver} from '../summary_resolver';
 import {TemplateParser} from '../template_parser/template_parser';
-import {ComponentFactoryDependency, DirectiveWrapperDependency, ViewClassDependency, ViewCompileResult, ViewCompiler} from '../view_compiler/view_compiler';
+import {ComponentFactoryDependency, ComponentViewDependency, DirectiveWrapperDependency, ViewCompileResult, ViewCompiler} from '../view_compiler/view_compiler';
 
 import {AotCompilerHost} from './compiler_host';
 import {GeneratedFile} from './generated_file';
 import {StaticSymbol} from './static_symbol';
 import {ResolvedStaticSymbol, StaticSymbolResolver} from './static_symbol_resolver';
-import {serializeSummaries, summaryFileName} from './summary_serializer';
+import {serializeSummaries} from './summary_serializer';
+import {ngfactoryFilePath, splitTypescriptSuffix, summaryFileName} from './util';
 
 export class AotCompiler {
   private _animationCompiler = new AnimationCompiler();
@@ -63,12 +66,13 @@ export class AotCompiler {
       srcFileUrl: string, ngModuleByPipeOrDirective: Map<StaticSymbol, CompileNgModuleMetadata>,
       directives: StaticSymbol[], pipes: StaticSymbol[], ngModules: StaticSymbol[],
       injectables: StaticSymbol[]): GeneratedFile[] {
-    const fileSuffix = _splitTypescriptSuffix(srcFileUrl)[1];
+    const fileSuffix = splitTypescriptSuffix(srcFileUrl)[1];
     const statements: o.Statement[] = [];
     const exportedVars: string[] = [];
     const generatedFiles: GeneratedFile[] = [];
 
-    generatedFiles.push(this._createSummary(srcFileUrl, directives, pipes, ngModules, injectables));
+    generatedFiles.push(this._createSummary(
+        srcFileUrl, directives, pipes, ngModules, injectables, statements, exportedVars));
 
     // compile all ng modules
     exportedVars.push(
@@ -107,7 +111,7 @@ export class AotCompiler {
     });
     if (statements.length > 0) {
       const srcModule = this._codegenSourceModule(
-          srcFileUrl, _ngfactoryModuleUrl(srcFileUrl), statements, exportedVars);
+          srcFileUrl, ngfactoryFilePath(srcFileUrl), statements, exportedVars);
       generatedFiles.unshift(srcModule);
     }
     return generatedFiles;
@@ -115,7 +119,8 @@ export class AotCompiler {
 
   private _createSummary(
       srcFileUrl: string, directives: StaticSymbol[], pipes: StaticSymbol[],
-      ngModules: StaticSymbol[], injectables: StaticSymbol[]): GeneratedFile {
+      ngModules: StaticSymbol[], injectables: StaticSymbol[], targetStatements: o.Statement[],
+      targetExportedVars: string[]): GeneratedFile {
     const symbolSummaries = this._symbolResolver.getSymbolsOf(srcFileUrl)
                                 .map(symbol => this._symbolResolver.resolveSymbol(symbol));
     const typeSummaries = [
@@ -124,8 +129,13 @@ export class AotCompiler {
       ...pipes.map(ref => this._metadataResolver.getPipeSummary(ref)),
       ...injectables.map(ref => this._metadataResolver.getInjectableSummary(ref))
     ];
-    const json = serializeSummaries(
-        this._host, this._summaryResolver, this._symbolResolver, symbolSummaries, typeSummaries);
+    const {json, exportAs} = serializeSummaries(
+        this._summaryResolver, this._symbolResolver, symbolSummaries, typeSummaries);
+    exportAs.forEach((entry) => {
+      targetStatements.push(
+          o.variable(entry.exportAs).set(o.importExpr({reference: entry.symbol})).toDeclStmt());
+      targetExportedVars.push(entry.exportAs);
+    });
     return new GeneratedFile(srcFileUrl, summaryFileName(srcFileUrl), json);
   }
 
@@ -148,12 +158,6 @@ export class AotCompiler {
     }
 
     const appCompileResult = this._ngModuleCompiler.compile(ngModule, providers);
-
-    appCompileResult.dependencies.forEach((dep) => {
-      dep.placeholder.reference = this._symbolResolver.getStaticSymbol(
-          _ngfactoryModuleUrl(identifierModuleUrl(dep.comp)), _componentFactoryName(dep.comp));
-    });
-
     targetStatements.push(...appCompileResult.statements);
     return appCompileResult.ngModuleFactoryVar;
   }
@@ -170,13 +174,12 @@ export class AotCompiler {
   private _compileComponentFactory(
       compMeta: CompileDirectiveMetadata, ngModule: CompileNgModuleMetadata, fileSuffix: string,
       targetStatements: o.Statement[]): string {
+    const hostType = this._metadataResolver.getHostComponentType(compMeta.type.reference);
     const hostMeta = createHostComponentMeta(
-        this._symbolResolver.getStaticSymbol(
-            identifierModuleUrl(compMeta.type), `${identifierName(compMeta.type)}_Host`),
-        compMeta);
+        hostType, compMeta, this._metadataResolver.getHostComponentViewClass(hostType));
     const hostViewFactoryVar = this._compileComponent(
         hostMeta, ngModule, [compMeta.type], null, fileSuffix, targetStatements);
-    const compFactoryVar = _componentFactoryName(compMeta.type);
+    const compFactoryVar = componentFactoryName(compMeta.type.reference);
     targetStatements.push(
         o.variable(compFactoryVar)
             .set(o.importExpr(
@@ -217,7 +220,7 @@ export class AotCompiler {
           ..._resolveStyleStatements(this._symbolResolver, componentStyles, fileSuffix));
     }
     compiledAnimations.forEach(entry => targetStatements.push(...entry.statements));
-    targetStatements.push(..._resolveViewStatements(this._symbolResolver, viewResult));
+    targetStatements.push(...viewResult.statements);
     return viewResult.viewClassVar;
   }
 
@@ -239,27 +242,6 @@ export class AotCompiler {
   }
 }
 
-function _resolveViewStatements(
-    reflector: StaticSymbolResolver, compileResult: ViewCompileResult): o.Statement[] {
-  compileResult.dependencies.forEach((dep) => {
-    if (dep instanceof ViewClassDependency) {
-      const vfd = <ViewClassDependency>dep;
-      vfd.placeholder.reference =
-          reflector.getStaticSymbol(_ngfactoryModuleUrl(identifierModuleUrl(vfd.comp)), dep.name);
-    } else if (dep instanceof ComponentFactoryDependency) {
-      const cfd = <ComponentFactoryDependency>dep;
-      cfd.placeholder.reference = reflector.getStaticSymbol(
-          _ngfactoryModuleUrl(identifierModuleUrl(cfd.comp)), _componentFactoryName(cfd.comp));
-    } else if (dep instanceof DirectiveWrapperDependency) {
-      const dwd = <DirectiveWrapperDependency>dep;
-      dwd.placeholder.reference =
-          reflector.getStaticSymbol(_ngfactoryModuleUrl(identifierModuleUrl(dwd.dir)), dwd.name);
-    }
-  });
-  return compileResult.statements;
-}
-
-
 function _resolveStyleStatements(
     reflector: StaticSymbolResolver, compileResult: CompiledStylesheet,
     fileSuffix: string): o.Statement[] {
@@ -270,15 +252,6 @@ function _resolveStyleStatements(
   return compileResult.statements;
 }
 
-function _ngfactoryModuleUrl(dirUrl: string): string {
-  const urlWithSuffix = _splitTypescriptSuffix(dirUrl);
-  return `${urlWithSuffix[0]}.ngfactory${urlWithSuffix[1]}`;
-}
-
-function _componentFactoryName(comp: CompileIdentifierMetadata): string {
-  return `${identifierName(comp)}NgFactory`;
-}
-
 function _stylesModuleUrl(stylesheetUrl: string, shim: boolean, suffix: string): string {
   return `${stylesheetUrl}${shim ? '.shim' : ''}.ngstyle${suffix}`;
 }
@@ -290,20 +263,6 @@ function _assertComponent(meta: CompileDirectiveMetadata) {
   }
 }
 
-function _splitTypescriptSuffix(path: string): string[] {
-  if (path.endsWith('.d.ts')) {
-    return [path.slice(0, -5), '.ts'];
-  }
-
-  const lastDot = path.lastIndexOf('.');
-
-  if (lastDot !== -1) {
-    return [path.substring(0, lastDot), path.substring(lastDot)];
-  }
-
-  return [path, ''];
-}
-
 export interface NgAnalyzedModules {
   ngModules: CompileNgModuleMetadata[];
   ngModuleByPipeOrDirective: Map<StaticSymbol, CompileNgModuleMetadata>;

modules/@angular/compiler/src/aot/compiler_factory.ts

@@ -34,11 +34,12 @@ import {AotCompilerHost} from './compiler_host';
 import {AotCompilerOptions} from './compiler_options';
 import {StaticAndDynamicReflectionCapabilities} from './static_reflection_capabilities';
 import {StaticReflector} from './static_reflector';
-import {StaticSymbolCache} from './static_symbol';
+import {StaticSymbol, StaticSymbolCache} from './static_symbol';
 import {StaticSymbolResolver} from './static_symbol_resolver';
 import {AotSummaryResolver} from './summary_resolver';
 
 
+
 /**
  * Creates a new AotCompiler based on options and a host.
  */
@@ -69,13 +70,19 @@ export function createAotCompiler(compilerHost: AotCompilerHost, options: AotCom
   const resolver = new CompileMetadataResolver(
       new NgModuleResolver(staticReflector), new DirectiveResolver(staticReflector),
       new PipeResolver(staticReflector), summaryResolver, elementSchemaRegistry, normalizer,
-      staticReflector);
+      symbolCache, staticReflector);
   // TODO(vicb): do not pass options.i18nFormat here
+  const importResolver = {
+    getImportAs: (symbol: StaticSymbol) => symbolResolver.getImportAs(symbol),
+    fileNameToModuleName: (fileName: string, containingFilePath: string) =>
+                              compilerHost.fileNameToModuleName(fileName, containingFilePath)
+  };
   const compiler = new AotCompiler(
       compilerHost, resolver, tmplParser, new StyleCompiler(urlResolver),
       new ViewCompiler(config, elementSchemaRegistry),
       new DirectiveWrapperCompiler(config, expressionParser, elementSchemaRegistry, console),
-      new NgModuleCompiler(), new TypeScriptEmitter(compilerHost), summaryResolver, options.locale,
-      options.i18nFormat, new AnimationParser(elementSchemaRegistry), symbolResolver);
+      new NgModuleCompiler(), new TypeScriptEmitter(importResolver), summaryResolver,
+      options.locale, options.i18nFormat, new AnimationParser(elementSchemaRegistry),
+      symbolResolver);
   return {compiler, reflector: staticReflector};
 }

modules/@angular/compiler/src/aot/compiler_host.ts

@@ -6,19 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ImportResolver} from '../output/path_util';
-
 import {StaticSymbol} from './static_symbol';
 import {StaticSymbolResolverHost} from './static_symbol_resolver';
 import {AotSummaryResolverHost} from './summary_resolver';
-import {AotSummarySerializerHost} from './summary_serializer';
 
 /**
  * The host of the AotCompiler disconnects the implementation from TypeScript / other language
  * services and from underlying file systems.
  */
-export interface AotCompilerHost extends StaticSymbolResolverHost, ImportResolver,
-    AotSummaryResolverHost, AotSummarySerializerHost {
+export interface AotCompilerHost extends StaticSymbolResolverHost, AotSummaryResolverHost {
+  /**
+   * Converts a file path to a module name that can be used as an `import.
+   * I.e. `path/to/importedFile.ts` should be imported by `path/to/containingFile.ts`.
+   *
+   * See ImportResolver.
+   */
+  fileNameToModuleName(importedFilePath: string, containingFilePath: string): string
+      /*|null*/;
+
   /**
    * Loads a resource (e.g. html / css)
    */

modules/@angular/compiler/src/aot/static_reflector.ts

@@ -10,8 +10,8 @@ import {Attribute, Component, ContentChild, ContentChildren, Directive, Host, Ho
 
 import {ReflectorReader} from '../private_import_core';
 
-import {StaticSymbol} from './static_symbol';
-import {StaticSymbolResolver} from './static_symbol_resolver';
+import {StaticSymbol, StaticSymbolCache} from './static_symbol';
+import {ResolvedStaticSymbol, StaticSymbolResolver} from './static_symbol_resolver';
 
 const ANGULAR_IMPORT_LOCATIONS = {
   coreDecorators: '@angular/core/src/metadata',
@@ -83,8 +83,11 @@ export class StaticReflector implements ReflectorReader {
       annotations = [];
       const classMetadata = this.getTypeMetadata(type);
       if (classMetadata['extends']) {
-        const parentAnnotations = this.annotations(this.simplify(type, classMetadata['extends']));
-        annotations.push(...parentAnnotations);
+        const parentType = this.simplify(type, classMetadata['extends']);
+        if (parentType instanceof StaticSymbol) {
+          const parentAnnotations = this.annotations(parentType);
+          annotations.push(...parentAnnotations);
+        }
       }
       if (classMetadata['decorators']) {
         const ownAnnotations: any[] = this.simplify(type, classMetadata['decorators']);
@@ -101,10 +104,13 @@ export class StaticReflector implements ReflectorReader {
       const classMetadata = this.getTypeMetadata(type);
       propMetadata = {};
       if (classMetadata['extends']) {
-        const parentPropMetadata = this.propMetadata(this.simplify(type, classMetadata['extends']));
-        Object.keys(parentPropMetadata).forEach((parentProp) => {
-          propMetadata[parentProp] = parentPropMetadata[parentProp];
-        });
+        const parentType = this.simplify(type, classMetadata['extends']);
+        if (parentType instanceof StaticSymbol) {
+          const parentPropMetadata = this.propMetadata(parentType);
+          Object.keys(parentPropMetadata).forEach((parentProp) => {
+            propMetadata[parentProp] = parentPropMetadata[parentProp];
+          });
+        }
       }
 
       const members = classMetadata['members'] || {};
@@ -156,7 +162,10 @@ export class StaticReflector implements ReflectorReader {
             parameters.push(nestedResult);
           });
         } else if (classMetadata['extends']) {
-          parameters = this.parameters(this.simplify(type, classMetadata['extends']));
+          const parentType = this.simplify(type, classMetadata['extends']);
+          if (parentType instanceof StaticSymbol) {
+            parameters = this.parameters(parentType);
+          }
         }
         if (!parameters) {
           parameters = [];
@@ -176,10 +185,13 @@ export class StaticReflector implements ReflectorReader {
       const classMetadata = this.getTypeMetadata(type);
       methodNames = {};
       if (classMetadata['extends']) {
-        const parentMethodNames = this._methodNames(this.simplify(type, classMetadata['extends']));
-        Object.keys(parentMethodNames).forEach((parentProp) => {
-          methodNames[parentProp] = parentMethodNames[parentProp];
-        });
+        const parentType = this.simplify(type, classMetadata['extends']);
+        if (parentType instanceof StaticSymbol) {
+          const parentMethodNames = this._methodNames(parentType);
+          Object.keys(parentMethodNames).forEach((parentProp) => {
+            methodNames[parentProp] = parentMethodNames[parentProp];
+          });
+        }
       }
 
       const members = classMetadata['members'] || {};
@@ -310,7 +322,6 @@ export class StaticReflector implements ReflectorReader {
             if (value && (depth != 0 || value.__symbolic != 'error')) {
               const parameters: string[] = targetFunction['parameters'];
               const defaults: any[] = targetFunction.defaults;
-              args = args.map(arg => simplifyInContext(context, arg, depth + 1));
               if (defaults && defaults.length > args.length) {
                 args.push(...defaults.slice(args.length).map((value: any) => simplify(value)));
               }
@@ -500,15 +511,15 @@ export class StaticReflector implements ReflectorReader {
                     return context;
                   }
                   const argExpressions: any[] = expression['arguments'] || [];
+                  const args =
+                      argExpressions.map(arg => simplifyInContext(context, arg, depth + 1));
                   let converter = self.conversionMap.get(staticSymbol);
                   if (converter) {
-                    const args =
-                        argExpressions.map(arg => simplifyInContext(context, arg, depth + 1));
                     return converter(context, args);
                   } else {
                     // Determine if the function is one we can simplify.
                     const targetFunction = resolveReferenceValue(staticSymbol);
-                    return simplifyCall(staticSymbol, targetFunction, argExpressions);
+                    return simplifyCall(staticSymbol, targetFunction, args);
                   }
                 }
                 break;
@@ -652,6 +663,10 @@ class PopulatedScope extends BindingScope {
   }
 }
 
+function sameSymbol(a: StaticSymbol, b: StaticSymbol): boolean {
+  return a === b;
+}
+
 function shouldIgnore(value: any): boolean {
   return value && value.__symbolic == 'ignore';
 }

modules/@angular/compiler/src/aot/static_symbol.ts

@@ -12,7 +12,14 @@
  * This token is unique for a filePath and name and can be used as a hash table key.
  */
 export class StaticSymbol {
-  constructor(public filePath: string, public name: string, public members?: string[]) {}
+  constructor(public filePath: string, public name: string, public members: string[]) {}
+
+  assertNoMembers() {
+    if (this.members.length) {
+      throw new Error(
+          `Illegal state: symbol without members expected, but got ${JSON.stringify(this)}.`);
+    }
+  }
 }
 
 /**

modules/@angular/compiler/src/aot/static_symbol_resolver.ts

@@ -45,11 +45,18 @@ const SUPPORTED_SCHEMA_VERSION = 3;
 /**
  * This class is responsible for loading metadata per symbol,
  * and normalizing references between symbols.
+ *
+ * Internally, it only uses symbols without members,
+ * and deduces the values for symbols with members based
+ * on these symbols.
  */
 export class StaticSymbolResolver {
   private metadataCache = new Map<string, {[key: string]: any}>();
+  // Note: this will only contain StaticSymbols without members!
   private resolvedSymbols = new Map<StaticSymbol, ResolvedStaticSymbol>();
   private resolvedFilePaths = new Set<string>();
+  // Note: this will only contain StaticSymbols without members!
+  private importAs = new Map<StaticSymbol, StaticSymbol>();
 
   constructor(
       private host: StaticSymbolResolverHost, private staticSymbolCache: StaticSymbolCache,
@@ -60,13 +67,33 @@ export class StaticSymbolResolver {
     if (staticSymbol.members.length > 0) {
       return this._resolveSymbolMembers(staticSymbol);
     }
-    let result = this._resolveSymbolFromSummary(staticSymbol);
+    let result = this.resolvedSymbols.get(staticSymbol);
+    if (result) {
+      return result;
+    }
+    result = this._resolveSymbolFromSummary(staticSymbol);
+    if (result) {
+      return result;
+    }
+    // Note: Some users use libraries that were not compiled with ngc, i.e. they don't
+    // have summaries, only .d.ts files. So we always need to check both, the summary
+    // and metadata.
+    this._createSymbolsOf(staticSymbol.filePath);
+    result = this.resolvedSymbols.get(staticSymbol);
+    return result;
+  }
+
+  getImportAs(staticSymbol: StaticSymbol): StaticSymbol {
+    if (staticSymbol.members.length) {
+      const baseSymbol = this.getStaticSymbol(staticSymbol.filePath, staticSymbol.name);
+      const baseImportAs = this.getImportAs(baseSymbol);
+      return baseImportAs ?
+          this.getStaticSymbol(baseImportAs.filePath, baseImportAs.name, staticSymbol.members) :
+          null;
+    }
+    let result = this.summaryResolver.getImportAs(staticSymbol);
     if (!result) {
-      // Note: Some users use libraries that were not compiled with ngc, i.e. they don't
-      // have summaries, only .d.ts files. So we always need to check both, the summary
-      // and metadata.
-      this._createSymbolsOf(staticSymbol.filePath);
-      result = this.resolvedSymbols.get(staticSymbol);
+      result = this.importAs.get(staticSymbol);
     }
     return result;
   }
@@ -135,10 +162,13 @@ export class StaticSymbolResolver {
     const metadata = this.getModuleMetadata(filePath);
     if (metadata['metadata']) {
       // handle direct declarations of the symbol
-      Object.keys(metadata['metadata']).forEach((symbolName) => {
-        const symbolMeta = metadata['metadata'][symbolName];
-        resolvedSymbols.push(
-            this.createResolvedSymbol(this.getStaticSymbol(filePath, symbolName), symbolMeta));
+      const topLevelSymbolNames =
+          new Set<string>(Object.keys(metadata['metadata']).map(unescapeIdentifier));
+      Object.keys(metadata['metadata']).forEach((metadataKey) => {
+        const symbolMeta = metadata['metadata'][metadataKey];
+        resolvedSymbols.push(this.createResolvedSymbol(
+            this.getStaticSymbol(filePath, unescapeIdentifier(metadataKey)), topLevelSymbolNames,
+            symbolMeta));
       });
     }
 
@@ -154,15 +184,16 @@ export class StaticSymbolResolver {
             } else {
               symbolName = exportSymbol.as;
             }
+            symbolName = unescapeIdentifier(symbolName);
             let symName = symbolName;
             if (typeof exportSymbol !== 'string') {
-              symName = exportSymbol.name;
+              symName = unescapeIdentifier(exportSymbol.name);
             }
             const resolvedModule = this.resolveModule(moduleExport.from, filePath);
             if (resolvedModule) {
               const targetSymbol = this.getStaticSymbol(resolvedModule, symName);
               const sourceSymbol = this.getStaticSymbol(filePath, symbolName);
-              resolvedSymbols.push(new ResolvedStaticSymbol(sourceSymbol, targetSymbol));
+              resolvedSymbols.push(this.createExport(sourceSymbol, targetSymbol));
             }
           });
         } else {
@@ -172,7 +203,7 @@ export class StaticSymbolResolver {
             const nestedExports = this.getSymbolsOf(resolvedModule);
             nestedExports.forEach((targetSymbol) => {
               const sourceSymbol = this.getStaticSymbol(filePath, targetSymbol.name);
-              resolvedSymbols.push(new ResolvedStaticSymbol(sourceSymbol, targetSymbol));
+              resolvedSymbols.push(this.createExport(sourceSymbol, targetSymbol));
             });
           }
         }
@@ -182,7 +213,9 @@ export class StaticSymbolResolver {
         (resolvedSymbol) => this.resolvedSymbols.set(resolvedSymbol.symbol, resolvedSymbol));
   }
 
-  private createResolvedSymbol(sourceSymbol: StaticSymbol, metadata: any): ResolvedStaticSymbol {
+  private createResolvedSymbol(
+      sourceSymbol: StaticSymbol, topLevelSymbolNames: Set<string>,
+      metadata: any): ResolvedStaticSymbol {
     const self = this;
 
     class ReferenceTransformer extends ValueTransformer {
@@ -196,7 +229,7 @@ export class StaticSymbolResolver {
           return result;
         } else if (symbolic === 'reference') {
           const module = map['module'];
-          const name = map['name'];
+          const name = map['name'] ? unescapeIdentifier(map['name']) : map['name'];
           if (!name) {
             return null;
           }
@@ -209,28 +242,43 @@ export class StaticSymbolResolver {
                 message: `Could not resolve ${module} relative to ${sourceSymbol.filePath}.`
               };
             }
-          } else {
-            const isFunctionParam = functionParams.indexOf(name) >= 0;
-            if (!isFunctionParam) {
-              filePath = sourceSymbol.filePath;
-            }
-          }
-          if (filePath) {
             return self.getStaticSymbol(filePath, name);
-          } else {
+          } else if (functionParams.indexOf(name) >= 0) {
             // reference to a function parameter
             return {__symbolic: 'reference', name: name};
+          } else {
+            if (topLevelSymbolNames.has(name)) {
+              return self.getStaticSymbol(sourceSymbol.filePath, name);
+            }
+            // ambient value
+            null;
           }
         } else {
           return super.visitStringMap(map, functionParams);
         }
       }
     }
-
     const transformedMeta = visitValue(metadata, new ReferenceTransformer(), []);
+    if (transformedMeta instanceof StaticSymbol) {
+      return this.createExport(sourceSymbol, transformedMeta);
+    }
     return new ResolvedStaticSymbol(sourceSymbol, transformedMeta);
   }
 
+  private createExport(sourceSymbol: StaticSymbol, targetSymbol: StaticSymbol):
+      ResolvedStaticSymbol {
+    sourceSymbol.assertNoMembers();
+    targetSymbol.assertNoMembers();
+    if (this.summaryResolver.isLibraryFile(sourceSymbol.filePath)) {
+      // This case is for an ng library importing symbols from a plain ts library
+      // transitively.
+      // Note: We rely on the fact that we discover symbols in the direction
+      // from source files to library files
+      this.importAs.set(targetSymbol, this.getImportAs(sourceSymbol) || sourceSymbol);
+    }
+    return new ResolvedStaticSymbol(sourceSymbol, targetSymbol);
+  }
+
   private reportError(error: Error, context: StaticSymbol, path?: string) {
     if (this.errorRecorder) {
       this.errorRecorder(error, (context && context.filePath) || path);
@@ -287,3 +335,11 @@ export class StaticSymbolResolver {
     }
   }
 }
+
+const UNDERSCORE_CHAR_CODE = 95;
+
+// Remove extra underscore from escaped identifier.
+// See https://github.com/Microsoft/TypeScript/blob/master/src/compiler/utilities.ts
+export function unescapeIdentifier(identifier: string): string {
+  return identifier.startsWith('___') ? identifier.substr(1) : identifier;
+}

modules/@angular/compiler/src/aot/summary_resolver.ts

@@ -5,14 +5,13 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
+import {CompileSummaryKind, CompileTypeSummary} from '../compile_metadata';
 import {Summary, SummaryResolver} from '../summary_resolver';
 
 import {StaticSymbol, StaticSymbolCache} from './static_symbol';
 import {ResolvedStaticSymbol} from './static_symbol_resolver';
-import {deserializeSummaries, summaryFileName} from './summary_serializer';
-
-const STRIP_SRC_FILE_SUFFIXES = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+import {deserializeSummaries} from './summary_serializer';
+import {ngfactoryFilePath, stripNgFactory, summaryFileName} from './util';
 
 export interface AotSummaryResolverHost {
   /**
@@ -24,23 +23,34 @@ export interface AotSummaryResolverHost {
    * Returns whether a file is a source file or not.
    */
   isSourceFile(sourceFilePath: string): boolean;
+  /**
+   * Returns the output file path of a source file.
+   * E.g.
+   * `some_file.ts` -> `some_file.d.ts`
+   */
+  getOutputFileName(sourceFilePath: string): string;
 }
 
 export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
+  // Note: this will only contain StaticSymbols without members!
   private summaryCache = new Map<StaticSymbol, Summary<StaticSymbol>>();
   private loadedFilePaths = new Set<string>();
+  // Note: this will only contain StaticSymbols without members!
+  private importAs = new Map<StaticSymbol, StaticSymbol>();
 
   constructor(private host: AotSummaryResolverHost, private staticSymbolCache: StaticSymbolCache) {}
 
-  private _assertNoMembers(symbol: StaticSymbol) {
-    if (symbol.members.length) {
-      throw new Error(
-          `Internal state: StaticSymbols in summaries can't have members! ${JSON.stringify(symbol)}`);
-    }
+  isLibraryFile(filePath: string): boolean {
+    // Note: We need to strip the .ngfactory. file path,
+    // so this method also works for generated files
+    // (for which host.isSourceFile will always return false).
+    return !this.host.isSourceFile(stripNgFactory(filePath));
   }
 
+  getLibraryFileName(filePath: string) { return this.host.getOutputFileName(filePath); }
+
   resolveSummary(staticSymbol: StaticSymbol): Summary<StaticSymbol> {
-    this._assertNoMembers(staticSymbol);
+    staticSymbol.assertNoMembers();
     let summary = this.summaryCache.get(staticSymbol);
     if (!summary) {
       this._loadSummaryFile(staticSymbol.filePath);
@@ -54,12 +64,17 @@ export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
     return Array.from(this.summaryCache.keys()).filter((symbol) => symbol.filePath === filePath);
   }
 
+  getImportAs(staticSymbol: StaticSymbol): StaticSymbol {
+    staticSymbol.assertNoMembers();
+    return this.importAs.get(staticSymbol);
+  }
+
   private _loadSummaryFile(filePath: string) {
     if (this.loadedFilePaths.has(filePath)) {
       return;
     }
     this.loadedFilePaths.add(filePath);
-    if (!this.host.isSourceFile(filePath)) {
+    if (this.isLibraryFile(filePath)) {
       const summaryFilePath = summaryFileName(filePath);
       let json: string;
       try {
@@ -69,8 +84,13 @@ export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
         throw e;
       }
       if (json) {
-        const readSummaries = deserializeSummaries(this.staticSymbolCache, json);
-        readSummaries.forEach((summary) => { this.summaryCache.set(summary.symbol, summary); });
+        const {summaries, importAs} = deserializeSummaries(this.staticSymbolCache, json);
+        summaries.forEach((summary) => this.summaryCache.set(summary.symbol, summary));
+        importAs.forEach((importAs) => {
+          this.importAs.set(
+              importAs.symbol,
+              this.staticSymbolCache.get(ngfactoryFilePath(filePath), importAs.importAs));
+        });
       }
     }
   }

modules/@angular/compiler/src/aot/summary_serializer.ts

@@ -5,35 +5,21 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {CompileNgModuleSummary, CompileSummaryKind, CompileTypeSummary} from '../compile_metadata';
+import {CompileDirectiveSummary, CompileIdentifierMetadata, CompileNgModuleSummary, CompilePipeSummary, CompileSummaryKind, CompileTypeMetadata, CompileTypeSummary, identifierModuleUrl, identifierName} from '../compile_metadata';
 import {Summary, SummaryResolver} from '../summary_resolver';
 import {ValueTransformer, visitValue} from '../util';
 
+import {GeneratedFile} from './generated_file';
 import {StaticSymbol, StaticSymbolCache} from './static_symbol';
 import {ResolvedStaticSymbol, StaticSymbolResolver} from './static_symbol_resolver';
 
 const STRIP_SRC_FILE_SUFFIXES = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
 
-
-export interface AotSummarySerializerHost {
-  /**
-   * Returns the output file path of a source file.
-   * E.g.
-   * `some_file.ts` -> `some_file.d.ts`
-   */
-  getOutputFileName(sourceFilePath: string): string;
-  /**
-   * Returns whether a file is a source file or not.
-   */
-  isSourceFile(sourceFilePath: string): boolean;
-}
-
 export function serializeSummaries(
-    host: AotSummarySerializerHost, summaryResolver: SummaryResolver<StaticSymbol>,
-    symbolResolver: StaticSymbolResolver,
-
-    symbols: ResolvedStaticSymbol[], types: CompileTypeSummary[]): string {
-  const serializer = new Serializer(host);
+    summaryResolver: SummaryResolver<StaticSymbol>, symbolResolver: StaticSymbolResolver,
+    symbols: ResolvedStaticSymbol[], types: CompileTypeSummary[]):
+    {json: string, exportAs: {symbol: StaticSymbol, exportAs: string}[]} {
+  const serializer = new Serializer(symbolResolver, summaryResolver);
 
   // for symbols, we use everything except for the class metadata itself
   // (we keep the statics though), as the class metadata is contained in the
@@ -46,7 +32,7 @@ export function serializeSummaries(
   // we execute the loop!
   for (let processedIndex = 0; processedIndex < serializer.symbols.length; processedIndex++) {
     const symbol = serializer.symbols[processedIndex];
-    if (!host.isSourceFile(symbol.filePath)) {
+    if (summaryResolver.isLibraryFile(symbol.filePath)) {
       let summary = summaryResolver.resolveSummary(symbol);
       if (!summary) {
         // some symbols might originate from a plain typescript library
@@ -74,8 +60,11 @@ export function serializeSummaries(
       const ngModuleSummary = <CompileNgModuleSummary>typeSummary;
       ngModuleSummary.exportedDirectives.concat(ngModuleSummary.exportedPipes).forEach((id) => {
         const symbol: StaticSymbol = id.reference;
-        if (!host.isSourceFile(symbol.filePath)) {
-          serializer.addOrMergeSummary(summaryResolver.resolveSummary(symbol));
+        if (summaryResolver.isLibraryFile(symbol.filePath)) {
+          const summary = summaryResolver.resolveSummary(symbol);
+          if (summary) {
+            serializer.addOrMergeSummary(summary);
+          }
         }
       });
     }
@@ -83,18 +72,14 @@ export function serializeSummaries(
   return serializer.serialize();
 }
 
-export function deserializeSummaries(
-    symbolCache: StaticSymbolCache, json: string): Summary<StaticSymbol>[] {
+export function deserializeSummaries(symbolCache: StaticSymbolCache, json: string):
+    {summaries: Summary<StaticSymbol>[], importAs: {symbol: StaticSymbol, importAs: string}[]} {
   const deserializer = new Deserializer(symbolCache);
   return deserializer.deserialize(json);
 }
 
-export function summaryFileName(fileName: string): string {
-  const fileNameWithoutSuffix = fileName.replace(STRIP_SRC_FILE_SUFFIXES, '');
-  return `${fileNameWithoutSuffix}.ngsummary.json`;
-}
-
 class Serializer extends ValueTransformer {
+  // Note: This only contains symbols without members.
   symbols: StaticSymbol[] = [];
   private indexBySymbol = new Map<StaticSymbol, number>();
   // This now contains a `__symbol: number` in the place of
@@ -102,7 +87,11 @@ class Serializer extends ValueTransformer {
   private processedSummaryBySymbol = new Map<StaticSymbol, any>();
   private processedSummaries: any[] = [];
 
-  constructor(private host: AotSummarySerializerHost) { super(); }
+  constructor(
+      private symbolResolver: StaticSymbolResolver,
+      private summaryResolver: SummaryResolver<StaticSymbol>) {
+    super();
+  }
 
   addOrMergeSummary(summary: Summary<StaticSymbol>) {
     let symbolMeta = summary.metadata;
@@ -129,34 +118,44 @@ class Serializer extends ValueTransformer {
     }
   }
 
-  serialize(): string {
-    return JSON.stringify({
+  serialize(): {json: string, exportAs: {symbol: StaticSymbol, exportAs: string}[]} {
+    const exportAs: {symbol: StaticSymbol, exportAs: string}[] = [];
+    const json = JSON.stringify({
       summaries: this.processedSummaries,
       symbols: this.symbols.map((symbol, index) => {
+        symbol.assertNoMembers();
+        let importAs: string;
+        if (this.summaryResolver.isLibraryFile(symbol.filePath)) {
+          importAs = `${symbol.name}_${index}`;
+          exportAs.push({symbol, exportAs: importAs});
+        }
         return {
           __symbol: index,
           name: symbol.name,
           // We convert the source filenames tinto output filenames,
           // as the generated summary file will be used when teh current
           // compilation unit is used as a library
-          filePath: this.host.getOutputFileName(symbol.filePath)
+          filePath: this.summaryResolver.getLibraryFileName(symbol.filePath),
+          importAs: importAs
         };
       })
     });
+    return {json, exportAs};
   }
 
   private processValue(value: any): any { return visitValue(value, this, null); }
 
   visitOther(value: any, context: any): any {
     if (value instanceof StaticSymbol) {
-      let index = this.indexBySymbol.get(value);
+      const baseSymbol = this.symbolResolver.getStaticSymbol(value.filePath, value.name);
+      let index = this.indexBySymbol.get(baseSymbol);
       // Note: == by purpose to compare with undefined!
       if (index == null) {
         index = this.indexBySymbol.size;
-        this.indexBySymbol.set(value, index);
-        this.symbols.push(value);
+        this.indexBySymbol.set(baseSymbol, index);
+        this.symbols.push(baseSymbol);
       }
-      return {__symbol: index};
+      return {__symbol: index, members: value.members};
     }
   }
 }
@@ -166,18 +165,30 @@ class Deserializer extends ValueTransformer {
 
   constructor(private symbolCache: StaticSymbolCache) { super(); }
 
-  deserialize(json: string): Summary<StaticSymbol>[] {
+  deserialize(json: string):
+      {summaries: Summary<StaticSymbol>[], importAs: {symbol: StaticSymbol, importAs: string}[]} {
     const data: {summaries: any[], symbols: any[]} = JSON.parse(json);
-    this.symbols = data.symbols.map(
-        serializedSymbol => this.symbolCache.get(serializedSymbol.filePath, serializedSymbol.name));
-    return visitValue(data.summaries, this, null);
+    const importAs: {symbol: StaticSymbol, importAs: string}[] = [];
+    this.symbols = [];
+    data.symbols.forEach((serializedSymbol) => {
+      const symbol = this.symbolCache.get(serializedSymbol.filePath, serializedSymbol.name);
+      this.symbols.push(symbol);
+      if (serializedSymbol.importAs) {
+        importAs.push({symbol: symbol, importAs: serializedSymbol.importAs});
+      }
+    });
+    const summaries = visitValue(data.summaries, this, null);
+    return {summaries, importAs};
   }
 
   visitStringMap(map: {[key: string]: any}, context: any): any {
     if ('__symbol' in map) {
-      return this.symbols[map['__symbol']];
+      const baseSymbol = this.symbols[map['__symbol']];
+      const members = map['members'];
+      return members.length ? this.symbolCache.get(baseSymbol.filePath, baseSymbol.name, members) :
+                              baseSymbol;
     } else {
       return super.visitStringMap(map, context);
     }
   }
-}
+}

modules/@angular/compiler/src/aot/util.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+const STRIP_SRC_FILE_SUFFIXES = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+
+export function ngfactoryFilePath(filePath: string): string {
+  const urlWithSuffix = splitTypescriptSuffix(filePath);
+  return `${urlWithSuffix[0]}.ngfactory${urlWithSuffix[1]}`;
+}
+
+export function stripNgFactory(filePath: string): string {
+  return filePath.replace(/\.ngfactory\./, '.');
+}
+
+export function splitTypescriptSuffix(path: string): string[] {
+  if (path.endsWith('.d.ts')) {
+    return [path.slice(0, -5), '.ts'];
+  }
+
+  const lastDot = path.lastIndexOf('.');
+
+  if (lastDot !== -1) {
+    return [path.substring(0, lastDot), path.substring(lastDot)];
+  }
+
+  return [path, ''];
+}
+
+export function summaryFileName(fileName: string): string {
+  const fileNameWithoutSuffix = fileName.replace(STRIP_SRC_FILE_SUFFIXES, '');
+  return `${fileNameWithoutSuffix}.ngsummary.json`;
+}

modules/@angular/compiler/src/compile_metadata.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, SchemaMetadata, Type, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, ComponentFactory, SchemaMetadata, Type, ViewEncapsulation} from '@angular/core';
 
 import {StaticSymbol} from './aot/static_symbol';
 import {ListWrapper} from './facade/collection';
@@ -112,6 +112,24 @@ export function identifierModuleUrl(compileIdentifier: CompileIdentifierMetadata
   return reflector.importUri(ref);
 }
 
+export function viewClassName(compType: any, embeddedTemplateIndex: number): string {
+  return `View_${identifierName({reference: compType})}_${embeddedTemplateIndex}`;
+}
+
+export function hostViewClassName(compType: any): string {
+  return `HostView_${identifierName({reference: compType})}`;
+}
+
+export function dirWrapperClassName(dirType: any) {
+  return `Wrapper_${identifierName({reference: dirType})}`;
+}
+
+export function componentFactoryName(compType: any): string {
+  return `${identifierName({reference: compType})}NgFactory`;
+}
+
+export interface ProxyClass { setDelegate(delegate: any): void; }
+
 export interface CompileIdentifierMetadata { reference: any; }
 
 export enum CompileSummaryKind {
@@ -241,7 +259,7 @@ export class CompileTemplateMetadata {
         externalStylesheets?: CompileStylesheetMetadata[],
         ngContentSelectors?: string[],
         animations?: CompileAnimationEntryMetadata[],
-        interpolation?: [string, string]
+        interpolation?: [string, string],
       } = {}) {
     this.encapsulation = encapsulation;
     this.template = template;
@@ -261,11 +279,16 @@ export class CompileTemplateMetadata {
     return {
       animations: this.animations.map(anim => anim.name),
       ngContentSelectors: this.ngContentSelectors,
-      encapsulation: this.encapsulation
+      encapsulation: this.encapsulation,
     };
   }
 }
 
+export interface CompileEntryComponentMetadata {
+  componentType: any;
+  componentFactory: StaticSymbol|ComponentFactory<any>;
+}
+
 // Note: This should only use interfaces as nested data types
 // as we need to be able to serialize this from/to JSON!
 export interface CompileDirectiveSummary extends CompileTypeSummary {
@@ -281,9 +304,12 @@ export interface CompileDirectiveSummary extends CompileTypeSummary {
   providers: CompileProviderMetadata[];
   viewProviders: CompileProviderMetadata[];
   queries: CompileQueryMetadata[];
-  entryComponents: CompileIdentifierMetadata[];
+  entryComponents: CompileEntryComponentMetadata[];
   changeDetection: ChangeDetectionStrategy;
   template: CompileTemplateSummary;
+  wrapperType: StaticSymbol|ProxyClass;
+  componentViewType: StaticSymbol|ProxyClass;
+  componentFactory: StaticSymbol|ComponentFactory<any>;
 }
 
 /**
@@ -292,7 +318,8 @@ export interface CompileDirectiveSummary extends CompileTypeSummary {
 export class CompileDirectiveMetadata {
   static create(
       {isHost, type, isComponent, selector, exportAs, changeDetection, inputs, outputs, host,
-       providers, viewProviders, queries, viewQueries, entryComponents, template}: {
+       providers, viewProviders, queries, viewQueries, entryComponents, template, wrapperType,
+       componentViewType, componentFactory}: {
         isHost?: boolean,
         type?: CompileTypeMetadata,
         isComponent?: boolean,
@@ -306,8 +333,11 @@ export class CompileDirectiveMetadata {
         viewProviders?: CompileProviderMetadata[],
         queries?: CompileQueryMetadata[],
         viewQueries?: CompileQueryMetadata[],
-        entryComponents?: CompileIdentifierMetadata[],
-        template?: CompileTemplateMetadata
+        entryComponents?: CompileEntryComponentMetadata[],
+        template?: CompileTemplateMetadata,
+        wrapperType?: StaticSymbol|ProxyClass,
+        componentViewType?: StaticSymbol|ProxyClass,
+        componentFactory?: StaticSymbol|ComponentFactory<any>,
       } = {}): CompileDirectiveMetadata {
     const hostListeners: {[key: string]: string} = {};
     const hostProperties: {[key: string]: string} = {};
@@ -359,6 +389,9 @@ export class CompileDirectiveMetadata {
       viewQueries,
       entryComponents,
       template,
+      wrapperType,
+      componentViewType,
+      componentFactory,
     });
   }
   isHost: boolean;
@@ -376,32 +409,39 @@ export class CompileDirectiveMetadata {
   viewProviders: CompileProviderMetadata[];
   queries: CompileQueryMetadata[];
   viewQueries: CompileQueryMetadata[];
-  entryComponents: CompileIdentifierMetadata[];
+  entryComponents: CompileEntryComponentMetadata[];
 
   template: CompileTemplateMetadata;
 
-  constructor(
-      {isHost, type, isComponent, selector, exportAs, changeDetection, inputs, outputs,
-       hostListeners, hostProperties, hostAttributes, providers, viewProviders, queries,
-       viewQueries, entryComponents, template}: {
-        isHost?: boolean,
-        type?: CompileTypeMetadata,
-        isComponent?: boolean,
-        selector?: string,
-        exportAs?: string,
-        changeDetection?: ChangeDetectionStrategy,
-        inputs?: {[key: string]: string},
-        outputs?: {[key: string]: string},
-        hostListeners?: {[key: string]: string},
-        hostProperties?: {[key: string]: string},
-        hostAttributes?: {[key: string]: string},
-        providers?: CompileProviderMetadata[],
-        viewProviders?: CompileProviderMetadata[],
-        queries?: CompileQueryMetadata[],
-        viewQueries?: CompileQueryMetadata[],
-        entryComponents?: CompileIdentifierMetadata[],
-        template?: CompileTemplateMetadata,
-      } = {}) {
+  wrapperType: StaticSymbol|ProxyClass;
+  componentViewType: StaticSymbol|ProxyClass;
+  componentFactory: StaticSymbol|ComponentFactory<any>;
+
+  constructor({isHost,          type,      isComponent,   selector,          exportAs,
+               changeDetection, inputs,    outputs,       hostListeners,     hostProperties,
+               hostAttributes,  providers, viewProviders, queries,           viewQueries,
+               entryComponents, template,  wrapperType,   componentViewType, componentFactory}: {
+    isHost?: boolean,
+    type?: CompileTypeMetadata,
+    isComponent?: boolean,
+    selector?: string,
+    exportAs?: string,
+    changeDetection?: ChangeDetectionStrategy,
+    inputs?: {[key: string]: string},
+    outputs?: {[key: string]: string},
+    hostListeners?: {[key: string]: string},
+    hostProperties?: {[key: string]: string},
+    hostAttributes?: {[key: string]: string},
+    providers?: CompileProviderMetadata[],
+    viewProviders?: CompileProviderMetadata[],
+    queries?: CompileQueryMetadata[],
+    viewQueries?: CompileQueryMetadata[],
+    entryComponents?: CompileEntryComponentMetadata[],
+    template?: CompileTemplateMetadata,
+    wrapperType?: StaticSymbol|ProxyClass,
+    componentViewType?: StaticSymbol|ProxyClass,
+    componentFactory?: StaticSymbol|ComponentFactory<any>,
+  } = {}) {
     this.isHost = !!isHost;
     this.type = type;
     this.isComponent = isComponent;
@@ -418,8 +458,11 @@ export class CompileDirectiveMetadata {
     this.queries = _normalizeArray(queries);
     this.viewQueries = _normalizeArray(viewQueries);
     this.entryComponents = _normalizeArray(entryComponents);
-
     this.template = template;
+
+    this.wrapperType = wrapperType;
+    this.componentViewType = componentViewType;
+    this.componentFactory = componentFactory;
   }
 
   toSummary(): CompileDirectiveSummary {
@@ -439,7 +482,10 @@ export class CompileDirectiveMetadata {
       queries: this.queries,
       entryComponents: this.entryComponents,
       changeDetection: this.changeDetection,
-      template: this.template && this.template.toSummary()
+      template: this.template && this.template.toSummary(),
+      wrapperType: this.wrapperType,
+      componentViewType: this.componentViewType,
+      componentFactory: this.componentFactory
     };
   }
 }
@@ -448,11 +494,12 @@ export class CompileDirectiveMetadata {
  * Construct {@link CompileDirectiveMetadata} from {@link ComponentTypeMetadata} and a selector.
  */
 export function createHostComponentMeta(
-    typeReference: any, compMeta: CompileDirectiveMetadata): CompileDirectiveMetadata {
+    hostTypeReference: any, compMeta: CompileDirectiveMetadata,
+    hostViewType: StaticSymbol | ProxyClass): CompileDirectiveMetadata {
   const template = CssSelector.parse(compMeta.selector)[0].getMatchingElementTemplate();
   return CompileDirectiveMetadata.create({
     isHost: true,
-    type: {reference: typeReference, diDeps: [], lifecycleHooks: []},
+    type: {reference: hostTypeReference, diDeps: [], lifecycleHooks: []},
     template: new CompileTemplateMetadata({
       encapsulation: ViewEncapsulation.None,
       template: template,
@@ -471,7 +518,8 @@ export function createHostComponentMeta(
     providers: [],
     viewProviders: [],
     queries: [],
-    viewQueries: []
+    viewQueries: [],
+    componentViewType: hostViewType
   });
 }
 
@@ -517,7 +565,7 @@ export interface CompileNgModuleSummary extends CompileTypeSummary {
   exportedPipes: CompileIdentifierMetadata[];
 
   // Note: This is transitive.
-  entryComponents: CompileIdentifierMetadata[];
+  entryComponents: CompileEntryComponentMetadata[];
   // Note: This is transitive.
   providers: {provider: CompileProviderMetadata, module: CompileIdentifierMetadata}[];
   // Note: This is transitive.
@@ -534,7 +582,7 @@ export class CompileNgModuleMetadata {
   declaredPipes: CompileIdentifierMetadata[];
 
   exportedPipes: CompileIdentifierMetadata[];
-  entryComponents: CompileIdentifierMetadata[];
+  entryComponents: CompileEntryComponentMetadata[];
   bootstrapComponents: CompileIdentifierMetadata[];
   providers: CompileProviderMetadata[];
 
@@ -555,7 +603,7 @@ export class CompileNgModuleMetadata {
         exportedDirectives?: CompileIdentifierMetadata[],
         declaredPipes?: CompileIdentifierMetadata[],
         exportedPipes?: CompileIdentifierMetadata[],
-        entryComponents?: CompileIdentifierMetadata[],
+        entryComponents?: CompileEntryComponentMetadata[],
         bootstrapComponents?: CompileIdentifierMetadata[],
         importedModules?: CompileNgModuleSummary[],
         exportedModules?: CompileNgModuleSummary[],
@@ -603,7 +651,7 @@ export class TransitiveCompileNgModuleMetadata {
   modulesSet = new Set<any>();
   modules: CompileTypeMetadata[] = [];
   entryComponentsSet = new Set<any>();
-  entryComponents: CompileIdentifierMetadata[] = [];
+  entryComponents: CompileEntryComponentMetadata[] = [];
 
   providers: {provider: CompileProviderMetadata, module: CompileIdentifierMetadata}[] = [];
 
@@ -641,10 +689,10 @@ export class TransitiveCompileNgModuleMetadata {
       this.modules.push(id);
     }
   }
-  addEntryComponent(id: CompileIdentifierMetadata) {
-    if (!this.entryComponentsSet.has(id.reference)) {
-      this.entryComponentsSet.add(id.reference);
-      this.entryComponents.push(id);
+  addEntryComponent(ec: CompileEntryComponentMetadata) {
+    if (!this.entryComponentsSet.has(ec.componentType)) {
+      this.entryComponentsSet.add(ec.componentType);
+      this.entryComponents.push(ec);
     }
   }
 }

modules/@angular/compiler/src/compiler_util/binding_util.ts

@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+
 import {Identifiers, createIdentifier} from '../identifiers';
 import {ClassBuilder} from '../output/class_builder';
 import * as o from '../output/output_ast';
@@ -20,28 +21,14 @@ export function createCheckBindingField(builder: ClassBuilder): CheckBindingFiel
   const fieldExpr = createBindFieldExpr(bindingId);
   // private is fine here as no child view will reference the cached value...
   builder.fields.push(new o.ClassField(fieldExpr.name, null, [o.StmtModifier.Private]));
-  builder.ctorStmts.push(o.THIS_EXPR.prop(fieldExpr.name)
-                             .set(o.importExpr(createIdentifier(Identifiers.UNINITIALIZED)))
-                             .toStmt());
+  builder.ctorStmts.push(o.THIS_EXPR.prop(fieldExpr.name).set(o.literal(undefined)).toStmt());
   return new CheckBindingField(fieldExpr, bindingId);
 }
 
-export function createCheckBindingStmt(
-    evalResult: ConvertPropertyBindingResult, fieldExpr: o.ReadPropExpr,
-    throwOnChangeVar: o.Expression, actions: o.Statement[]): o.Statement[] {
-  let condition: o.Expression = o.importExpr(createIdentifier(Identifiers.checkBinding)).callFn([
-    throwOnChangeVar, fieldExpr, evalResult.currValExpr
-  ]);
-  if (evalResult.forceUpdate) {
-    condition = evalResult.forceUpdate.or(condition);
-  }
-  return [
-    ...evalResult.stmts, new o.IfStmt(condition, actions.concat([
-      <o.Statement>o.THIS_EXPR.prop(fieldExpr.name).set(evalResult.currValExpr).toStmt()
-    ]))
-  ];
-}
-
 function createBindFieldExpr(bindingId: string): o.ReadPropExpr {
   return o.THIS_EXPR.prop(`_expr_${bindingId}`);
 }
+
+export function isFirstViewCheck(view: o.Expression): o.Expression {
+  return o.not(view.prop('numberOfChecks'));
+}

modules/@angular/compiler/src/compiler_util/expression_converter.ts

@@ -8,7 +8,7 @@
 
 
 import * as cdAst from '../expression_parser/ast';
-import {isBlank} from '../facade/lang';
+import {isBlank, isPresent} from '../facade/lang';
 import {Identifiers, createIdentifier} from '../identifiers';
 import {ClassBuilder} from '../output/class_builder';
 import * as o from '../output/output_ast';
@@ -338,7 +338,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
       const receiver = this.visit(ast.receiver, _Mode.Expression);
       if (receiver === this._implicitReceiver) {
         const varExpr = this._getLocal(ast.name);
-        if (varExpr) {
+        if (isPresent(varExpr)) {
           result = varExpr.callFn(args);
         }
       }
@@ -374,7 +374,7 @@ class _AstToIrVisitor implements cdAst.AstVisitor {
     const receiver: o.Expression = this.visit(ast.receiver, _Mode.Expression);
     if (receiver === this._implicitReceiver) {
       const varExpr = this._getLocal(ast.name);
-      if (varExpr) {
+      if (isPresent(varExpr)) {
         throw new Error('Cannot assign to a reference or variable!');
       }
     }

modules/@angular/compiler/src/compiler_util/render_util.ts

@@ -13,69 +13,64 @@ import * as o from '../output/output_ast';
 import {EMPTY_STATE as EMPTY_ANIMATION_STATE} from '../private_import_core';
 import {BoundElementPropertyAst, BoundEventAst, PropertyBindingType} from '../template_parser/template_ast';
 
+import {isFirstViewCheck} from './binding_util';
+import {ConvertPropertyBindingResult} from './expression_converter';
 import {createEnumExpression} from './identifier_util';
 
-export function writeToRenderer(
-    view: o.Expression, boundProp: BoundElementPropertyAst, renderElement: o.Expression,
-    renderValue: o.Expression, logBindingUpdate: boolean,
+export function createCheckRenderBindingStmt(
+    view: o.Expression, renderElement: o.Expression, boundProp: BoundElementPropertyAst,
+    oldValue: o.ReadPropExpr, evalResult: ConvertPropertyBindingResult,
     securityContextExpression?: o.Expression): o.Statement[] {
-  const updateStmts: o.Statement[] = [];
-  const renderer = view.prop('renderer');
-  renderValue = sanitizedValue(view, boundProp, renderValue, securityContextExpression);
+  const checkStmts: o.Statement[] = [...evalResult.stmts];
+  const securityContext = calcSecurityContext(boundProp, securityContextExpression);
   switch (boundProp.type) {
     case PropertyBindingType.Property:
-      if (logBindingUpdate) {
-        updateStmts.push(
-            o.importExpr(createIdentifier(Identifiers.setBindingDebugInfo))
-                .callFn([renderer, renderElement, o.literal(boundProp.name), renderValue])
-                .toStmt());
-      }
-      updateStmts.push(
-          renderer
-              .callMethod(
-                  'setElementProperty', [renderElement, o.literal(boundProp.name), renderValue])
-              .toStmt());
+      checkStmts.push(o.importExpr(createIdentifier(Identifiers.checkRenderProperty))
+                          .callFn([
+                            view, renderElement, o.literal(boundProp.name), oldValue,
+                            oldValue.set(evalResult.currValExpr),
+                            evalResult.forceUpdate || o.literal(false), securityContext
+                          ])
+                          .toStmt());
       break;
     case PropertyBindingType.Attribute:
-      renderValue =
-          renderValue.isBlank().conditional(o.NULL_EXPR, renderValue.callMethod('toString', []));
-      updateStmts.push(
-          renderer
-              .callMethod(
-                  'setElementAttribute', [renderElement, o.literal(boundProp.name), renderValue])
-              .toStmt());
+      checkStmts.push(o.importExpr(createIdentifier(Identifiers.checkRenderAttribute))
+                          .callFn([
+                            view, renderElement, o.literal(boundProp.name), oldValue,
+                            oldValue.set(evalResult.currValExpr),
+                            evalResult.forceUpdate || o.literal(false), securityContext
+                          ])
+                          .toStmt());
       break;
     case PropertyBindingType.Class:
-      updateStmts.push(
-          renderer
-              .callMethod(
-                  'setElementClass', [renderElement, o.literal(boundProp.name), renderValue])
+      checkStmts.push(
+          o.importExpr(createIdentifier(Identifiers.checkRenderClass))
+              .callFn([
+                view, renderElement, o.literal(boundProp.name), oldValue,
+                oldValue.set(evalResult.currValExpr), evalResult.forceUpdate || o.literal(false)
+              ])
               .toStmt());
       break;
     case PropertyBindingType.Style:
-      let strValue: o.Expression = renderValue.callMethod('toString', []);
-      if (isPresent(boundProp.unit)) {
-        strValue = strValue.plus(o.literal(boundProp.unit));
-      }
-
-      renderValue = renderValue.isBlank().conditional(o.NULL_EXPR, strValue);
-      updateStmts.push(
-          renderer
-              .callMethod(
-                  'setElementStyle', [renderElement, o.literal(boundProp.name), renderValue])
+      checkStmts.push(
+          o.importExpr(createIdentifier(Identifiers.checkRenderStyle))
+              .callFn([
+                view, renderElement, o.literal(boundProp.name), o.literal(boundProp.unit), oldValue,
+                oldValue.set(evalResult.currValExpr), evalResult.forceUpdate || o.literal(false),
+                securityContext
+              ])
               .toStmt());
       break;
     case PropertyBindingType.Animation:
       throw new Error('Illegal state: Should not come here!');
   }
-  return updateStmts;
+  return checkStmts;
 }
 
-function sanitizedValue(
-    view: o.Expression, boundProp: BoundElementPropertyAst, renderValue: o.Expression,
-    securityContextExpression?: o.Expression): o.Expression {
+function calcSecurityContext(
+    boundProp: BoundElementPropertyAst, securityContextExpression?: o.Expression): o.Expression {
   if (boundProp.securityContext === SecurityContext.NONE) {
-    return renderValue;  // No sanitization needed.
+    return o.NULL_EXPR;  // No sanitization needed.
   }
   if (!boundProp.needsRuntimeSecurityContext) {
     securityContextExpression =
@@ -84,15 +79,13 @@ function sanitizedValue(
   if (!securityContextExpression) {
     throw new Error(`internal error, no SecurityContext given ${boundProp.name}`);
   }
-  const ctx = view.prop('viewUtils').prop('sanitizer');
-  const args = [securityContextExpression, renderValue];
-  return ctx.callMethod('sanitize', args);
+  return securityContextExpression;
 }
 
-export function triggerAnimation(
+export function createCheckAnimationBindingStmts(
     view: o.Expression, componentView: o.Expression, boundProp: BoundElementPropertyAst,
     boundOutputs: BoundEventAst[], eventListener: o.Expression, renderElement: o.Expression,
-    renderValue: o.Expression, lastRenderValue: o.Expression) {
+    oldValue: o.ReadPropExpr, evalResult: ConvertPropertyBindingResult) {
   const detachStmts: o.Statement[] = [];
   const updateStmts: o.Statement[] = [];
 
@@ -104,22 +97,21 @@ export function triggerAnimation(
   // it's important to normalize the void value as `void` explicitly
   // so that the styles data can be obtained from the stringmap
   const emptyStateValue = o.literal(EMPTY_ANIMATION_STATE);
-  const unitializedValue = o.importExpr(createIdentifier(Identifiers.UNINITIALIZED));
   const animationTransitionVar = o.variable('animationTransition_' + animationName);
 
   updateStmts.push(
       animationTransitionVar
           .set(animationFnExpr.callFn([
-            view, renderElement,
-            lastRenderValue.equals(unitializedValue).conditional(emptyStateValue, lastRenderValue),
-            renderValue.equals(unitializedValue).conditional(emptyStateValue, renderValue)
+            view, renderElement, isFirstViewCheck(view).conditional(emptyStateValue, oldValue),
+            evalResult.currValExpr
           ]))
           .toDeclStmt());
+  updateStmts.push(oldValue.set(evalResult.currValExpr).toStmt());
 
-  detachStmts.push(
-      animationTransitionVar
-          .set(animationFnExpr.callFn([view, renderElement, lastRenderValue, emptyStateValue]))
-          .toDeclStmt());
+  detachStmts.push(animationTransitionVar
+                       .set(animationFnExpr.callFn(
+                           [view, renderElement, evalResult.currValExpr, emptyStateValue]))
+                       .toDeclStmt());
 
   const registerStmts: o.Statement[] = [];
   const animationStartMethodExists = boundOutputs.find(
@@ -151,5 +143,14 @@ export function triggerAnimation(
   updateStmts.push(...registerStmts);
   detachStmts.push(...registerStmts);
 
-  return {updateStmts, detachStmts};
+  const checkUpdateStmts: o.Statement[] = [
+    ...evalResult.stmts,
+    new o.IfStmt(
+        o.importExpr(createIdentifier(Identifiers.checkBinding)).callFn([
+          view, oldValue, evalResult.currValExpr, evalResult.forceUpdate || o.literal(false)
+        ]),
+        updateStmts)
+  ];
+  const checkDetachStmts: o.Statement[] = [...evalResult.stmts, ...detachStmts];
+  return {checkUpdateStmts, checkDetachStmts};
 }

modules/@angular/compiler/src/directive_normalizer.ts

@@ -6,11 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ViewEncapsulation} from '@angular/core';
+import {ViewEncapsulation} from '@angular/core';
 
-import {CompileAnimationEntryMetadata, CompileDirectiveMetadata, CompileStylesheetMetadata, CompileTemplateMetadata} from './compile_metadata';
+import {CompileAnimationEntryMetadata, CompileDirectiveMetadata, CompileStylesheetMetadata, CompileTemplateMetadata, CompileTypeMetadata} from './compile_metadata';
 import {CompilerConfig} from './config';
-import {isBlank, isPresent, stringify} from './facade/lang';
+import {stringify} from './facade/lang';
 import {CompilerInjectable} from './injectable';
 import * as html from './ml_parser/ast';
 import {HtmlParser} from './ml_parser/html_parser';
@@ -41,9 +41,9 @@ export class DirectiveNormalizer {
       private _resourceLoader: ResourceLoader, private _urlResolver: UrlResolver,
       private _htmlParser: HtmlParser, private _config: CompilerConfig) {}
 
-  clearCache() { this._resourceLoaderCache.clear(); }
+  clearCache(): void { this._resourceLoaderCache.clear(); }
 
-  clearCacheFor(normalizedDirective: CompileDirectiveMetadata) {
+  clearCacheFor(normalizedDirective: CompileDirectiveMetadata): void {
     if (!normalizedDirective.isComponent) {
       return;
     }
@@ -65,10 +65,18 @@ export class DirectiveNormalizer {
       SyncAsyncResult<CompileTemplateMetadata> {
     let normalizedTemplateSync: CompileTemplateMetadata = null;
     let normalizedTemplateAsync: Promise<CompileTemplateMetadata>;
-    if (isPresent(prenormData.template)) {
+    if (prenormData.template != null) {
+      if (typeof prenormData.template !== 'string') {
+        throw new SyntaxError(
+            `The template specified for component ${stringify(prenormData.componentType)} is not a string`);
+      }
       normalizedTemplateSync = this.normalizeTemplateSync(prenormData);
       normalizedTemplateAsync = Promise.resolve(normalizedTemplateSync);
     } else if (prenormData.templateUrl) {
+      if (typeof prenormData.templateUrl !== 'string') {
+        throw new SyntaxError(
+            `The templateUrl specified for component ${stringify(prenormData.componentType)} is not a string`);
+      }
       normalizedTemplateAsync = this.normalizeTemplateAsync(prenormData);
     } else {
       throw new SyntaxError(
@@ -102,11 +110,12 @@ export class DirectiveNormalizer {
       templateAbsUrl: string): CompileTemplateMetadata {
     const interpolationConfig = InterpolationConfig.fromArray(prenomData.interpolation);
     const rootNodesAndErrors = this._htmlParser.parse(
-        template, stringify(prenomData.componentType), false, interpolationConfig);
+        template, stringify(prenomData.componentType), true, interpolationConfig);
     if (rootNodesAndErrors.errors.length > 0) {
       const errorString = rootNodesAndErrors.errors.join('\n');
       throw new SyntaxError(`Template parse errors:\n${errorString}`);
     }
+
     const templateMetadataStyles = this.normalizeStylesheet(new CompileStylesheetMetadata({
       styles: prenomData.styles,
       styleUrls: prenomData.styleUrls,
@@ -119,7 +128,7 @@ export class DirectiveNormalizer {
         {styles: visitor.styles, styleUrls: visitor.styleUrls, moduleUrl: templateAbsUrl}));
 
     let encapsulation = prenomData.encapsulation;
-    if (isBlank(encapsulation)) {
+    if (encapsulation == null) {
       encapsulation = this._config.defaultEncapsulation;
     }
 
@@ -228,9 +237,13 @@ class TemplatePreparseVisitor implements html.Visitor {
     return null;
   }
 
+  visitExpansion(ast: html.Expansion, context: any): any { html.visitAll(this, ast.cases); }
+
+  visitExpansionCase(ast: html.ExpansionCase, context: any): any {
+    html.visitAll(this, ast.expression);
+  }
+
   visitComment(ast: html.Comment, context: any): any { return null; }
   visitAttribute(ast: html.Attribute, context: any): any { return null; }
   visitText(ast: html.Text, context: any): any { return null; }
-  visitExpansion(ast: html.Expansion, context: any): any { return null; }
-  visitExpansionCase(ast: html.ExpansionCase, context: any): any { return null; }
 }

modules/@angular/compiler/src/directive_resolver.ts

@@ -14,6 +14,8 @@ import {CompilerInjectable} from './injectable';
 import {ReflectorReader, reflector} from './private_import_core';
 import {splitAtColon} from './util';
 
+
+
 /*
  * Resolve a `Type` for {@link Directive}.
  *

modules/@angular/compiler/src/directive_wrapper_compiler.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileIdentifierMetadata, identifierModuleUrl, identifierName} from './compile_metadata';
-import {createCheckBindingField, createCheckBindingStmt} from './compiler_util/binding_util';
+import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileIdentifierMetadata, dirWrapperClassName, identifierModuleUrl, identifierName} from './compile_metadata';
+import {createCheckBindingField, isFirstViewCheck} from './compiler_util/binding_util';
 import {EventHandlerVars, convertActionBinding, convertPropertyBinding} from './compiler_util/expression_converter';
-import {triggerAnimation, writeToRenderer} from './compiler_util/render_util';
+import {createCheckAnimationBindingStmts, createCheckRenderBindingStmt} from './compiler_util/render_util';
 import {CompilerConfig} from './config';
 import {Parser} from './expression_parser/parser';
 import {Identifiers, createIdentifier} from './identifiers';
@@ -32,8 +32,8 @@ const CHANGES_FIELD_NAME = '_changes';
 const CHANGED_FIELD_NAME = '_changed';
 const EVENT_HANDLER_FIELD_NAME = '_eventHandler';
 
+const CHANGE_VAR = o.variable('change');
 const CURR_VALUE_VAR = o.variable('currValue');
-const THROW_ON_CHANGE_VAR = o.variable('throwOnChange');
 const FORCE_UPDATE_VAR = o.variable('forceUpdate');
 const VIEW_VAR = o.variable('view');
 const COMPONENT_VIEW_VAR = o.variable('componentView');
@@ -52,10 +52,6 @@ const RESET_CHANGES_STMT = o.THIS_EXPR.prop(CHANGES_FIELD_NAME).set(o.literalMap
  */
 @CompilerInjectable()
 export class DirectiveWrapperCompiler {
-  static dirWrapperClassName(id: CompileIdentifierMetadata) {
-    return `Wrapper_${identifierName(id)}`;
-  }
-
   constructor(
       private compilerConfig: CompilerConfig, private _exprParser: Parser,
       private _schemaRegistry: ElementSchemaRegistry, private _console: Console) {}
@@ -128,13 +124,15 @@ class DirectiveWrapperBuilder implements ClassBuilder {
       new o.ClassMethod('ngOnDestroy', [], this.destroyStmts),
     ];
 
+
     const fields: o.ClassField[] = [
       new o.ClassField(EVENT_HANDLER_FIELD_NAME, o.FUNCTION_TYPE, [o.StmtModifier.Private]),
       new o.ClassField(CONTEXT_FIELD_NAME, o.importType(this.dirMeta.type)),
       new o.ClassField(CHANGED_FIELD_NAME, o.BOOL_TYPE, [o.StmtModifier.Private]),
     ];
-    const ctorStmts: o.Statement[] =
-        [o.THIS_EXPR.prop(CHANGED_FIELD_NAME).set(o.literal(false)).toStmt()];
+    const ctorStmts: o.Statement[] = [
+      o.THIS_EXPR.prop(CHANGED_FIELD_NAME).set(o.literal(false)).toStmt(),
+    ];
     if (this.genChanges) {
       fields.push(new o.ClassField(
           CHANGES_FIELD_NAME, new o.MapType(o.DYNAMIC_TYPE), [o.StmtModifier.Private]));
@@ -148,7 +146,7 @@ class DirectiveWrapperBuilder implements ClassBuilder {
             .toStmt());
 
     return createClassStmt({
-      name: DirectiveWrapperCompiler.dirWrapperClassName(this.dirMeta.type),
+      name: dirWrapperClassName(this.dirMeta.type.reference),
       ctorParams: dirDepParamNames.map((paramName) => new o.FnParam(paramName, o.DYNAMIC_TYPE)),
       builders: [{fields, ctorStmts, methods}, this]
     });
@@ -183,14 +181,14 @@ function addNgDoCheckMethod(builder: DirectiveWrapperBuilder) {
 
   if (builder.ngOnInit) {
     lifecycleStmts.push(new o.IfStmt(
-        VIEW_VAR.prop('numberOfChecks').identical(new o.LiteralExpr(0)),
+        isFirstViewCheck(VIEW_VAR),
         [o.THIS_EXPR.prop(CONTEXT_FIELD_NAME).callMethod('ngOnInit', []).toStmt()]));
   }
   if (builder.ngDoCheck) {
     lifecycleStmts.push(o.THIS_EXPR.prop(CONTEXT_FIELD_NAME).callMethod('ngDoCheck', []).toStmt());
   }
   if (lifecycleStmts.length > 0) {
-    stmts.push(new o.IfStmt(o.not(THROW_ON_CHANGE_VAR), lifecycleStmts));
+    stmts.push(new o.IfStmt(o.not(VIEW_VAR.prop('throwOnChange')), lifecycleStmts));
   }
   stmts.push(new o.ReturnStatement(changedVar));
 
@@ -200,7 +198,6 @@ function addNgDoCheckMethod(builder: DirectiveWrapperBuilder) {
         new o.FnParam(
             VIEW_VAR.name, o.importType(createIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
         new o.FnParam(RENDER_EL_VAR.name, o.DYNAMIC_TYPE),
-        new o.FnParam(THROW_ON_CHANGE_VAR.name, o.BOOL_TYPE),
       ],
       stmts, o.BOOL_TYPE));
 }
@@ -210,24 +207,35 @@ function addCheckInputMethod(input: string, builder: DirectiveWrapperBuilder) {
   const onChangeStatements: o.Statement[] = [
     o.THIS_EXPR.prop(CHANGED_FIELD_NAME).set(o.literal(true)).toStmt(),
     o.THIS_EXPR.prop(CONTEXT_FIELD_NAME).prop(input).set(CURR_VALUE_VAR).toStmt(),
+    field.expression.set(CURR_VALUE_VAR).toStmt()
   ];
+  let methodBody: o.Statement[];
   if (builder.genChanges) {
-    onChangeStatements.push(o.THIS_EXPR.prop(CHANGES_FIELD_NAME)
-                                .key(o.literal(input))
-                                .set(o.importExpr(createIdentifier(Identifiers.SimpleChange))
-                                         .instantiate([field.expression, CURR_VALUE_VAR]))
-                                .toStmt());
+    onChangeStatements.push(
+        o.THIS_EXPR.prop(CHANGES_FIELD_NAME).key(o.literal(input)).set(CHANGE_VAR).toStmt());
+    methodBody = [
+      CHANGE_VAR
+          .set(o.importExpr(createIdentifier(Identifiers.checkBindingChange)).callFn([
+            VIEW_VAR, field.expression, CURR_VALUE_VAR, FORCE_UPDATE_VAR
+          ]))
+          .toDeclStmt(),
+      new o.IfStmt(CHANGE_VAR, onChangeStatements)
+    ];
+  } else {
+    methodBody = [new o.IfStmt(
+        o.importExpr(createIdentifier(Identifiers.checkBinding)).callFn([
+          VIEW_VAR, field.expression, CURR_VALUE_VAR, FORCE_UPDATE_VAR
+        ]),
+        onChangeStatements)];
   }
 
-  const methodBody: o.Statement[] = createCheckBindingStmt(
-      {currValExpr: CURR_VALUE_VAR, forceUpdate: FORCE_UPDATE_VAR, stmts: []}, field.expression,
-      THROW_ON_CHANGE_VAR, onChangeStatements);
   builder.methods.push(new o.ClassMethod(
       `check_${input}`,
       [
+        new o.FnParam(
+            VIEW_VAR.name, o.importType(createIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
         new o.FnParam(CURR_VALUE_VAR.name, o.DYNAMIC_TYPE),
-        new o.FnParam(THROW_ON_CHANGE_VAR.name, o.BOOL_TYPE),
-        new o.FnParam(FORCE_UPDATE_VAR.name, o.BOOL_TYPE),
+        new o.FnParam(FORCE_UPDATE_VAR.name, o.BOOL_TYPE)
       ],
       methodBody));
 }
@@ -243,7 +251,6 @@ function addCheckHostMethod(
         COMPONENT_VIEW_VAR.name,
         o.importType(createIdentifier(Identifiers.AppView), [o.DYNAMIC_TYPE])),
     new o.FnParam(RENDER_EL_VAR.name, o.DYNAMIC_TYPE),
-    new o.FnParam(THROW_ON_CHANGE_VAR.name, o.BOOL_TYPE),
   ];
   hostProps.forEach((hostProp, hostPropIdx) => {
     const field = createCheckBindingField(builder);
@@ -258,23 +265,18 @@ function addCheckHostMethod(
       methodParams.push(new o.FnParam(
           securityContextExpr.name, o.importType(createIdentifier(Identifiers.SecurityContext))));
     }
-    let checkBindingStmts: o.Statement[];
     if (hostProp.isAnimation) {
-      const {updateStmts, detachStmts} = triggerAnimation(
+      const {checkUpdateStmts, checkDetachStmts} = createCheckAnimationBindingStmts(
           VIEW_VAR, COMPONENT_VIEW_VAR, hostProp, hostEvents,
           o.THIS_EXPR.prop(EVENT_HANDLER_FIELD_NAME)
               .or(o.importExpr(createIdentifier(Identifiers.noop))),
-          RENDER_EL_VAR, evalResult.currValExpr, field.expression);
-      checkBindingStmts = updateStmts;
-      builder.detachStmts.push(...detachStmts);
+          RENDER_EL_VAR, field.expression, evalResult);
+      builder.detachStmts.push(...checkDetachStmts);
+      stmts.push(...checkUpdateStmts);
     } else {
-      checkBindingStmts = writeToRenderer(
-          VIEW_VAR, hostProp, RENDER_EL_VAR, evalResult.currValExpr,
-          builder.compilerConfig.logBindingUpdate, securityContextExpr);
+      stmts.push(...createCheckRenderBindingStmt(
+          VIEW_VAR, RENDER_EL_VAR, hostProp, field.expression, evalResult, securityContextExpr));
     }
-
-    stmts.push(...createCheckBindingStmt(
-        evalResult, field.expression, THROW_ON_CHANGE_VAR, checkBindingStmts));
   });
   builder.methods.push(new o.ClassMethod('checkHost', methodParams, stmts));
 }
@@ -384,20 +386,19 @@ export class DirectiveWrapperExpressions {
     return dirWrapper.prop(CONTEXT_FIELD_NAME);
   }
 
-  static ngDoCheck(
-      dirWrapper: o.Expression, view: o.Expression, renderElement: o.Expression,
-      throwOnChange: o.Expression): o.Expression {
-    return dirWrapper.callMethod('ngDoCheck', [view, renderElement, throwOnChange]);
+  static ngDoCheck(dirWrapper: o.Expression, view: o.Expression, renderElement: o.Expression, ):
+      o.Expression {
+    return dirWrapper.callMethod('ngDoCheck', [view, renderElement]);
   }
   static checkHost(
       hostProps: BoundElementPropertyAst[], dirWrapper: o.Expression, view: o.Expression,
-      componentView: o.Expression, renderElement: o.Expression, throwOnChange: o.Expression,
+      componentView: o.Expression, renderElement: o.Expression,
       runtimeSecurityContexts: o.Expression[]): o.Statement[] {
     if (hostProps.length) {
       return [dirWrapper
                   .callMethod(
-                      'checkHost', [view, componentView, renderElement, throwOnChange].concat(
-                                       runtimeSecurityContexts))
+                      'checkHost',
+                      [view, componentView, renderElement].concat(runtimeSecurityContexts))
                   .toStmt()];
     } else {
       return [];

modules/@angular/compiler/src/expression_parser/lexer.ts

@@ -7,7 +7,7 @@
  */
 
 import * as chars from '../chars';
-import {NumberWrapper} from '../facade/lang';
+import {NumberWrapper, isPresent} from '../facade/lang';
 import {CompilerInjectable} from '../injectable';
 
 export enum TokenType {
@@ -241,7 +241,7 @@ class _Scanner {
       this.advance();
       str += two;
     }
-    if (threeCode != null && this.peek == threeCode) {
+    if (isPresent(threeCode) && this.peek == threeCode) {
       this.advance();
       str += three;
     }

modules/@angular/compiler/src/i18n/digest.ts

@@ -9,13 +9,13 @@
 import * as i18n from './i18n_ast';
 
 export function digest(message: i18n.Message): string {
-  return sha1(serializeNodes(message.nodes).join('') + `[${message.meaning}]`);
+  return message.id || sha1(serializeNodes(message.nodes).join('') + `[${message.meaning}]`);
 }
 
 export function decimalDigest(message: i18n.Message): string {
   const visitor = new _SerializerIgnoreIcuExpVisitor();
   const parts = message.nodes.map(a => a.visit(visitor, null));
-  return computeMsgId(parts.join(''), message.meaning);
+  return message.id || computeMsgId(parts.join(''), message.meaning);
 }
 
 /**

modules/@angular/compiler/src/i18n/extractor.ts

@@ -109,7 +109,7 @@ export class Extractor {
     const resolver = new CompileMetadataResolver(
         new NgModuleResolver(staticReflector), new DirectiveResolver(staticReflector),
         new PipeResolver(staticReflector), summaryResolver, elementSchemaRegistry, normalizer,
-        staticReflector);
+        symbolCache, staticReflector);
 
     // TODO(vicb): implicit tags & attributes
     const messageBundle = new MessageBundle(htmlParser, [], {});

modules/@angular/compiler/src/i18n/extractor_merger.ts

@@ -18,6 +18,8 @@ import {TranslationBundle} from './translation_bundle';
 const _I18N_ATTR = 'i18n';
 const _I18N_ATTR_PREFIX = 'i18n-';
 const _I18N_COMMENT_PREFIX_REGEXP = /^i18n:?/;
+const MEANING_SEPARATOR = '|';
+const ID_SEPARATOR = '@@';
 
 /**
  * Extract translatable messages from an html AST
@@ -53,22 +55,20 @@ enum _VisitorMode {
  * @internal
  */
 class _Visitor implements html.Visitor {
-  private _depth: number;
-
   // <el i18n>...</el>
   private _inI18nNode: boolean;
+  private _depth: number;
   private _inImplicitNode: boolean;
 
   // <!--i18n-->...<!--/i18n-->
-  private _inI18nBlock: boolean;
   private _blockMeaningAndDesc: string;
   private _blockChildren: html.Node[];
   private _blockStartDepth: number;
+  private _inI18nBlock: boolean;
 
   // {<icu message>}
   private _inIcu: boolean;
 
-  // set to void 0 when not in a section
   private _msgCountAtSectionStart: number;
   private _errors: I18nError[];
   private _mode: _VisitorMode;
@@ -79,7 +79,7 @@ class _Visitor implements html.Visitor {
   // _VisitorMode.Merge only
   private _translations: TranslationBundle;
   private _createI18nMessage:
-      (msg: html.Node[], meaning: string, description: string) => i18n.Message;
+      (msg: html.Node[], meaning: string, description: string, id: string) => i18n.Message;
 
 
   constructor(private _implicitTags: string[], private _implicitAttrs: {[k: string]: string[]}) {}
@@ -210,31 +210,50 @@ class _Visitor implements html.Visitor {
     this._depth++;
     const wasInI18nNode = this._inI18nNode;
     const wasInImplicitNode = this._inImplicitNode;
-    let childNodes: html.Node[] = [];
-    let translatedChildNodes: html.Node[];
+    let childNodes: html.Node[];
 
-    // Extract:
-    // - top level nodes with the (implicit) "i18n" attribute if not already in a section
-    // - ICU messages
+    // Extract only top level nodes with the (implicit) "i18n" attribute if not in a block or an ICU
+    // message
     const i18nAttr = _getI18nAttr(el);
-    const i18nMeta = i18nAttr ? i18nAttr.value : '';
     const isImplicit = this._implicitTags.some(tag => el.name === tag) && !this._inIcu &&
         !this._isInTranslatableSection;
     const isTopLevelImplicit = !wasInImplicitNode && isImplicit;
-    this._inImplicitNode = wasInImplicitNode || isImplicit;
+    this._inImplicitNode = this._inImplicitNode || isImplicit;
 
     if (!this._isInTranslatableSection && !this._inIcu) {
-      if (i18nAttr || isTopLevelImplicit) {
+      if (i18nAttr) {
+        // explicit translation
         this._inI18nNode = true;
-        const message = this._addMessage(el.children, i18nMeta);
-        translatedChildNodes = this._translateMessage(el, message);
+        const message = this._addMessage(el.children, i18nAttr.value);
+        childNodes = this._translateMessage(el, message);
+      } else if (isTopLevelImplicit) {
+        // implicit translation
+        this._inI18nNode = true;
+        const message = this._addMessage(el.children);
+        childNodes = this._translateMessage(el, message);
       }
 
       if (this._mode == _VisitorMode.Extract) {
         const isTranslatable = i18nAttr || isTopLevelImplicit;
-        if (isTranslatable) this._openTranslatableSection(el);
+        if (isTranslatable) {
+          this._openTranslatableSection(el);
+        }
         html.visitAll(this, el.children);
-        if (isTranslatable) this._closeTranslatableSection(el, el.children);
+        if (isTranslatable) {
+          this._closeTranslatableSection(el, el.children);
+        }
+      }
+
+      if (this._mode === _VisitorMode.Merge && !i18nAttr && !isTopLevelImplicit) {
+        childNodes = [];
+        el.children.forEach(child => {
+          const visited = child.visit(this, context);
+          if (visited && !this._isInTranslatableSection) {
+            // Do not add the children from translatable sections (= i18n blocks here)
+            // They will be added when the section is close (i.e. on `<!-- /i18n -->`)
+            childNodes = childNodes.concat(visited);
+          }
+        });
       }
     } else {
       if (i18nAttr || isTopLevelImplicit) {
@@ -246,18 +265,19 @@ class _Visitor implements html.Visitor {
         // Descend into child nodes for extraction
         html.visitAll(this, el.children);
       }
-    }
 
-    if (this._mode === _VisitorMode.Merge) {
-      const visitNodes = translatedChildNodes || el.children;
-      visitNodes.forEach(child => {
-        const visited = child.visit(this, context);
-        if (visited && !this._isInTranslatableSection) {
-          // Do not add the children from translatable sections (= i18n blocks here)
-          // They will be added later in this loop when the block closes (i.e. on `<!-- /i18n -->`)
-          childNodes = childNodes.concat(visited);
-        }
-      });
+      if (this._mode == _VisitorMode.Merge) {
+        // Translate attributes in ICU messages
+        childNodes = [];
+        el.children.forEach(child => {
+          const visited = child.visit(this, context);
+          if (visited && !this._isInTranslatableSection) {
+            // Do not add the children from translatable sections (= i18n blocks here)
+            // They will be added when the section is close (i.e. on `<!-- /i18n -->`)
+            childNodes = childNodes.concat(visited);
+          }
+        });
+      }
     }
 
     this._visitAttributesOf(el);
@@ -267,6 +287,7 @@ class _Visitor implements html.Visitor {
     this._inImplicitNode = wasInImplicitNode;
 
     if (this._mode === _VisitorMode.Merge) {
+      // There are no childNodes in translatable sections - those nodes will be replace anyway
       const translatedAttrs = this._translateAttributes(el);
       return new html.Element(
           el.name, translatedAttrs, childNodes, el.sourceSpan, el.startSourceSpan,
@@ -311,15 +332,15 @@ class _Visitor implements html.Visitor {
   }
 
   // add a translatable message
-  private _addMessage(ast: html.Node[], meaningAndDesc?: string): i18n.Message {
+  private _addMessage(ast: html.Node[], msgMeta?: string): i18n.Message {
     if (ast.length == 0 ||
         ast.length == 1 && ast[0] instanceof html.Attribute && !(<html.Attribute>ast[0]).value) {
       // Do not create empty messages
       return;
     }
 
-    const [meaning, description] = _splitMeaningAndDesc(meaningAndDesc);
-    const message = this._createI18nMessage(ast, meaning, description);
+    const {meaning, description, id} = _parseMessageMeta(msgMeta);
+    const message = this._createI18nMessage(ast, meaning, description, id);
     this._messages.push(message);
     return message;
   }
@@ -349,7 +370,7 @@ class _Visitor implements html.Visitor {
     attributes.forEach(attr => {
       if (attr.name.startsWith(_I18N_ATTR_PREFIX)) {
         i18nAttributeMeanings[attr.name.slice(_I18N_ATTR_PREFIX.length)] =
-            _splitMeaningAndDesc(attr.value)[0];
+            _parseMessageMeta(attr.value).meaning;
       }
     });
 
@@ -363,7 +384,7 @@ class _Visitor implements html.Visitor {
 
       if (attr.value && attr.value != '' && i18nAttributeMeanings.hasOwnProperty(attr.name)) {
         const meaning = i18nAttributeMeanings[attr.name];
-        const message: i18n.Message = this._createI18nMessage([attr], meaning, '');
+        const message: i18n.Message = this._createI18nMessage([attr], meaning, '', '');
         const nodes = this._translations.get(message);
         if (nodes) {
           if (nodes[0] instanceof html.Text) {
@@ -401,7 +422,7 @@ class _Visitor implements html.Visitor {
   }
 
   /**
-   * Marks the start of a section, see `_endSection`
+   * Marks the start of a section, see `_closeTranslatableSection`
    */
   private _openTranslatableSection(node: html.Node): void {
     if (this._isInTranslatableSection) {
@@ -413,7 +434,7 @@ class _Visitor implements html.Visitor {
 
   /**
    * A translatable section could be:
-   * - the content of translatable element,
+   * - a translatable element,
    * - nodes between `<!-- i18n -->` and `<!-- /i18n -->` comments
    */
   private get _isInTranslatableSection(): boolean {
@@ -477,8 +498,16 @@ function _getI18nAttr(p: html.Element): html.Attribute {
   return p.attrs.find(attr => attr.name === _I18N_ATTR) || null;
 }
 
-function _splitMeaningAndDesc(i18n: string): [string, string] {
-  if (!i18n) return ['', ''];
-  const pipeIndex = i18n.indexOf('|');
-  return pipeIndex == -1 ? ['', i18n] : [i18n.slice(0, pipeIndex), i18n.slice(pipeIndex + 1)];
+function _parseMessageMeta(i18n: string): {meaning: string, description: string, id: string} {
+  if (!i18n) return {meaning: '', description: '', id: ''};
+
+  const idIndex = i18n.indexOf(ID_SEPARATOR);
+  const descIndex = i18n.indexOf(MEANING_SEPARATOR);
+  const [meaningAndDesc, id] =
+      (idIndex > -1) ? [i18n.slice(0, idIndex), i18n.slice(idIndex + 2)] : [i18n, ''];
+  const [meaning, description] = (descIndex > -1) ?
+      [meaningAndDesc.slice(0, descIndex), meaningAndDesc.slice(descIndex + 1)] :
+      ['', meaningAndDesc];
+
+  return {meaning, description, id};
 }

modules/@angular/compiler/src/i18n/i18n_ast.ts

@@ -15,11 +15,12 @@ export class Message {
    * @param placeholderToMessage maps placeholder names to messages (used for nested ICU messages)
    * @param meaning
    * @param description
+   * @param id
    */
   constructor(
       public nodes: Node[], public placeholders: {[phName: string]: string},
       public placeholderToMessage: {[phName: string]: Message}, public meaning: string,
-      public description: string) {}
+      public description: string, public id: string) {}
 }
 
 export interface Node {

modules/@angular/compiler/src/i18n/i18n_parser.ts

@@ -22,11 +22,11 @@ const _expParser = new ExpressionParser(new ExpressionLexer());
  * Returns a function converting html nodes to an i18n Message given an interpolationConfig
  */
 export function createI18nMessageFactory(interpolationConfig: InterpolationConfig): (
-    nodes: html.Node[], meaning: string, description: string) => i18n.Message {
+    nodes: html.Node[], meaning: string, description: string, id: string) => i18n.Message {
   const visitor = new _I18nVisitor(_expParser, interpolationConfig);
 
-  return (nodes: html.Node[], meaning: string, description: string) =>
-             visitor.toI18nMessage(nodes, meaning, description);
+  return (nodes: html.Node[], meaning: string, description: string, id: string) =>
+             visitor.toI18nMessage(nodes, meaning, description, id);
 }
 
 class _I18nVisitor implements html.Visitor {
@@ -40,7 +40,8 @@ class _I18nVisitor implements html.Visitor {
       private _expressionParser: ExpressionParser,
       private _interpolationConfig: InterpolationConfig) {}
 
-  public toI18nMessage(nodes: html.Node[], meaning: string, description: string): i18n.Message {
+  public toI18nMessage(nodes: html.Node[], meaning: string, description: string, id: string):
+      i18n.Message {
     this._isIcu = nodes.length == 1 && nodes[0] instanceof html.Expansion;
     this._icuDepth = 0;
     this._placeholderRegistry = new PlaceholderRegistry();
@@ -50,7 +51,7 @@ class _I18nVisitor implements html.Visitor {
     const i18nodes: i18n.Node[] = html.visitAll(this, nodes, {});
 
     return new i18n.Message(
-        i18nodes, this._placeholderToContent, this._placeholderToMessage, meaning, description);
+        i18nodes, this._placeholderToContent, this._placeholderToMessage, meaning, description, id);
   }
 
   visitElement(el: html.Element, context: any): i18n.Node {
@@ -115,7 +116,7 @@ class _I18nVisitor implements html.Visitor {
     // TODO(vicb): add a html.Node -> i18n.Message cache to avoid having to re-create the msg
     const phName = this._placeholderRegistry.getPlaceholderName('ICU', icu.sourceSpan.toString());
     const visitor = new _I18nVisitor(this._expressionParser, this._interpolationConfig);
-    this._placeholderToMessage[phName] = visitor.toI18nMessage([icu], '', '');
+    this._placeholderToMessage[phName] = visitor.toI18nMessage([icu], '', '', '');
     return new i18n.IcuPlaceholder(i18nIcu, phName, icu.sourceSpan);
   }
 

modules/@angular/compiler/src/identifiers.ts

@@ -6,11 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectionStrategy, ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, LOCALE_ID, NgModuleFactory, QueryList, RenderComponentType, Renderer, SecurityContext, SimpleChange, TRANSLATIONS_FORMAT, TemplateRef, ViewContainerRef, ViewEncapsulation} from '@angular/core';
+import {ANALYZE_FOR_ENTRY_COMPONENTS, AnimationTransitionEvent, ChangeDetectionStrategy, ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, LOCALE_ID, NgModuleFactory, QueryList, RenderComponentType, Renderer, SecurityContext, SimpleChange, TRANSLATIONS_FORMAT, TemplateRef, ViewContainerRef, ViewEncapsulation} from '@angular/core';
 
 import {StaticSymbol} from './aot/static_symbol';
 import {CompileIdentifierMetadata, CompileTokenMetadata, identifierModuleUrl, identifierName} from './compile_metadata';
-import {AnimationGroupPlayer, AnimationKeyframe, AnimationSequencePlayer, AnimationStyles, AnimationTransition, AppView, ChangeDetectorStatus, CodegenComponentFactoryResolver, ComponentRef_, DebugAppView, DebugContext, NgModuleInjector, NoOpAnimationPlayer, StaticNodeDebugInfo, TemplateRef_, UNINITIALIZED, ValueUnwrapper, ViewContainer, ViewType, balanceAnimationKeyframes, clearStyles, collectAndResolveStyles, devModeEqual, prepareFinalAnimationStyles, reflector, registerModuleFactory, renderStyles, view_utils} from './private_import_core';
+import {AnimationGroupPlayer, AnimationKeyframe, AnimationSequencePlayer, AnimationStyles, AnimationTransition, AppView, ChangeDetectorStatus, CodegenComponentFactoryResolver, ComponentRef_, DebugAppView, DebugContext, NgModuleInjector, NoOpAnimationPlayer, StaticNodeDebugInfo, TemplateRef_, ValueUnwrapper, ViewContainer, ViewType, balanceAnimationKeyframes, clearStyles, collectAndResolveStyles, devModeEqual, prepareFinalAnimationStyles, reflector, registerModuleFactory, renderStyles, view_utils} from './private_import_core';
 
 const APP_VIEW_MODULE_URL = assetUrl('core', 'linker/view');
 const VIEW_UTILS_MODULE_URL = assetUrl('core', 'linker/view_utils');
@@ -161,8 +161,6 @@ export class Identifiers {
   };
   static SimpleChange:
       IdentifierSpec = {name: 'SimpleChange', moduleUrl: CD_MODULE_URL, runtime: SimpleChange};
-  static UNINITIALIZED:
-      IdentifierSpec = {name: 'UNINITIALIZED', moduleUrl: CD_MODULE_URL, runtime: UNINITIALIZED};
   static ChangeDetectorStatus: IdentifierSpec = {
     name: 'ChangeDetectorStatus',
     moduleUrl: CD_MODULE_URL,
@@ -173,6 +171,36 @@ export class Identifiers {
     moduleUrl: VIEW_UTILS_MODULE_URL,
     runtime: view_utils.checkBinding
   };
+  static checkBindingChange: IdentifierSpec = {
+    name: 'checkBindingChange',
+    moduleUrl: VIEW_UTILS_MODULE_URL,
+    runtime: view_utils.checkBindingChange
+  };
+  static checkRenderText: IdentifierSpec = {
+    name: 'checkRenderText',
+    moduleUrl: VIEW_UTILS_MODULE_URL,
+    runtime: view_utils.checkRenderText
+  };
+  static checkRenderProperty: IdentifierSpec = {
+    name: 'checkRenderProperty',
+    moduleUrl: VIEW_UTILS_MODULE_URL,
+    runtime: view_utils.checkRenderProperty
+  };
+  static checkRenderAttribute: IdentifierSpec = {
+    name: 'checkRenderAttribute',
+    moduleUrl: VIEW_UTILS_MODULE_URL,
+    runtime: view_utils.checkRenderAttribute
+  };
+  static checkRenderClass: IdentifierSpec = {
+    name: 'checkRenderClass',
+    moduleUrl: VIEW_UTILS_MODULE_URL,
+    runtime: view_utils.checkRenderClass
+  };
+  static checkRenderStyle: IdentifierSpec = {
+    name: 'checkRenderStyle',
+    moduleUrl: VIEW_UTILS_MODULE_URL,
+    runtime: view_utils.checkRenderStyle
+  };
   static devModeEqual:
       IdentifierSpec = {name: 'devModeEqual', moduleUrl: CD_MODULE_URL, runtime: devModeEqual};
   static inlineInterpolate: IdentifierSpec = {

modules/@angular/compiler/src/jit/compiler.ts

@@ -10,7 +10,7 @@ import {Compiler, ComponentFactory, Injector, ModuleWithComponentFactories, NgMo
 
 import {AnimationCompiler} from '../animation/animation_compiler';
 import {AnimationParser} from '../animation/animation_parser';
-import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompilePipeMetadata, ProviderMeta, createHostComponentMeta, identifierName} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompilePipeMetadata, ProviderMeta, ProxyClass, createHostComponentMeta, identifierName} from '../compile_metadata';
 import {CompilerConfig} from '../config';
 import {DirectiveNormalizer} from '../directive_normalizer';
 import {DirectiveWrapperCompiler} from '../directive_wrapper_compiler';
@@ -21,10 +21,11 @@ import {NgModuleCompiler} from '../ng_module_compiler';
 import * as ir from '../output/output_ast';
 import {interpretStatements} from '../output/output_interpreter';
 import {jitStatements} from '../output/output_jit';
+import {view_utils} from '../private_import_core';
 import {CompiledStylesheet, StyleCompiler} from '../style_compiler';
 import {TemplateParser} from '../template_parser/template_parser';
 import {SyncAsyncResult} from '../util';
-import {ComponentFactoryDependency, DirectiveWrapperDependency, ViewClassDependency, ViewCompiler} from '../view_compiler/view_compiler';
+import {ComponentFactoryDependency, ComponentViewDependency, DirectiveWrapperDependency, ViewCompiler} from '../view_compiler/view_compiler';
 
 
 
@@ -130,10 +131,6 @@ export class JitCompiler implements Compiler {
       const extraProviders = [this._metadataResolver.getProviderMetadata(new ProviderMeta(
           Compiler, {useFactory: () => new ModuleBoundCompiler(this, moduleMeta.type.reference)}))];
       const compileResult = this._ngModuleCompiler.compile(moduleMeta, extraProviders);
-      compileResult.dependencies.forEach((dep) => {
-        dep.placeholder.reference =
-            this._assertComponentKnown(dep.comp.reference, true).proxyComponentFactory;
-      });
       if (!this._compilerConfig.useJit) {
         ngModuleFactory =
             interpretStatements(compileResult.statements, compileResult.ngModuleFactoryVar);
@@ -168,7 +165,7 @@ export class JitCompiler implements Compiler {
             const template =
                 this._createCompiledHostTemplate(dirMeta.type.reference, localModuleMeta);
             templates.add(template);
-            allComponentFactories.push(template.proxyComponentFactory);
+            allComponentFactories.push(<ComponentFactory<any>>dirMeta.componentFactory);
           }
         }
       });
@@ -180,15 +177,16 @@ export class JitCompiler implements Compiler {
         const dirMeta = this._metadataResolver.getDirectiveMetadata(dirIdentifier.reference);
         if (dirMeta.isComponent) {
           dirMeta.entryComponents.forEach((entryComponentType) => {
-            const moduleMeta = moduleByDirective.get(entryComponentType.reference);
+            const moduleMeta = moduleByDirective.get(entryComponentType.componentType);
             templates.add(
-                this._createCompiledHostTemplate(entryComponentType.reference, moduleMeta));
+                this._createCompiledHostTemplate(entryComponentType.componentType, moduleMeta));
           });
         }
       });
       localModuleMeta.entryComponents.forEach((entryComponentType) => {
-        const moduleMeta = moduleByDirective.get(entryComponentType.reference);
-        templates.add(this._createCompiledHostTemplate(entryComponentType.reference, moduleMeta));
+        const moduleMeta = moduleByDirective.get(entryComponentType.componentType);
+        templates.add(
+            this._createCompiledHostTemplate(entryComponentType.componentType, moduleMeta));
       });
     });
     templates.forEach((template) => this._compileTemplate(template));
@@ -222,12 +220,12 @@ export class JitCompiler implements Compiler {
       const compMeta = this._metadataResolver.getDirectiveMetadata(compType);
       assertComponent(compMeta);
 
-      const HostClass = function HostClass() {};
-      (<any>HostClass).overriddenName = `${identifierName(compMeta.type)}_Host`;
-
-      const hostMeta = createHostComponentMeta(HostClass, compMeta);
-      compiledTemplate = new CompiledTemplate(
-          true, compMeta.selector, compMeta.type, hostMeta, ngModule, [compMeta.type]);
+      const componentFactory = <ComponentFactory<any>>compMeta.componentFactory;
+      const hostClass = this._metadataResolver.getHostComponentType(compType);
+      const hostMeta = createHostComponentMeta(
+          hostClass, compMeta, <any>view_utils.getComponentFactoryViewClass(componentFactory));
+      compiledTemplate =
+          new CompiledTemplate(true, compMeta.type, hostMeta, ngModule, [compMeta.type]);
       this._compiledHostTemplateCache.set(compType, compiledTemplate);
     }
     return compiledTemplate;
@@ -239,8 +237,7 @@ export class JitCompiler implements Compiler {
     if (!compiledTemplate) {
       assertComponent(compMeta);
       compiledTemplate = new CompiledTemplate(
-          false, compMeta.selector, compMeta.type, compMeta, ngModule,
-          ngModule.transitiveModule.directives);
+          false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives);
       this._compiledTemplateCache.set(compMeta.type.reference, compiledTemplate);
     }
     return compiledTemplate;
@@ -277,6 +274,7 @@ export class JitCompiler implements Compiler {
           `/${identifierName(moduleMeta.type)}/${identifierName(dirMeta.type)}/wrapper.ngfactory.js`,
           statements, compileResult.dirWrapperClassVar);
     }
+    (<ProxyClass>dirMeta.wrapperType).setDelegate(directiveWrapperClass);
     this._compiledDirectiveWrapperCache.set(dirMeta.type.reference, directiveWrapperClass);
   }
 
@@ -304,21 +302,6 @@ export class JitCompiler implements Compiler {
     const compileResult = this._viewCompiler.compileComponent(
         compMeta, parsedTemplate, ir.variable(stylesCompileResult.componentStylesheet.stylesVar),
         pipes, compiledAnimations);
-    compileResult.dependencies.forEach((dep) => {
-      let depTemplate: CompiledTemplate;
-      if (dep instanceof ViewClassDependency) {
-        const vfd = <ViewClassDependency>dep;
-        depTemplate = this._assertComponentKnown(vfd.comp.reference, false);
-        vfd.placeholder.reference = depTemplate.proxyViewClass;
-      } else if (dep instanceof ComponentFactoryDependency) {
-        const cfd = <ComponentFactoryDependency>dep;
-        depTemplate = this._assertComponentKnown(cfd.comp.reference, true);
-        cfd.placeholder.reference = depTemplate.proxyComponentFactory;
-      } else if (dep instanceof DirectiveWrapperDependency) {
-        const dwd = <DirectiveWrapperDependency>dep;
-        dwd.placeholder.reference = this._assertDirectiveWrapper(dwd.dir.reference);
-      }
-    });
     const statements = stylesCompileResult.componentStylesheet.statements
                            .concat(...compiledAnimations.map(ca => ca.statements))
                            .concat(compileResult.statements);
@@ -358,30 +341,18 @@ export class JitCompiler implements Compiler {
 
 class CompiledTemplate {
   private _viewClass: Function = null;
-  proxyViewClass: Type<any>;
-  proxyComponentFactory: ComponentFactory<any>;
   isCompiled = false;
 
   constructor(
-      public isHost: boolean, selector: string, public compType: CompileIdentifierMetadata,
+      public isHost: boolean, public compType: CompileIdentifierMetadata,
       public compMeta: CompileDirectiveMetadata, public ngModule: CompileNgModuleMetadata,
       public directives: CompileIdentifierMetadata[]) {
     const self = this;
-    this.proxyViewClass = <any>function() {
-      if (!self._viewClass) {
-        throw new Error(
-            `Illegal state: CompiledTemplate for ${stringify(self.compType)} is not compiled yet!`);
-      }
-      return self._viewClass.apply(this, arguments);
-    };
-    this.proxyComponentFactory = isHost ?
-        new ComponentFactory<any>(selector, this.proxyViewClass, compType.reference) :
-        null;
   }
 
   compiled(viewClass: Function) {
     this._viewClass = viewClass;
-    this.proxyViewClass.prototype = viewClass.prototype;
+    (<ProxyClass>this.compMeta.componentViewType).setDelegate(viewClass);
     this.isCompiled = true;
   }
 }

modules/@angular/compiler/src/jit/compiler_factory.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {COMPILER_OPTIONS, Compiler, CompilerFactory, CompilerOptions, Inject, Optional, PLATFORM_INITIALIZER, PlatformRef, Provider, ReflectiveInjector, TRANSLATIONS, TRANSLATIONS_FORMAT, Type, ViewEncapsulation, createPlatformFactory, isDevMode, platformCore} from '@angular/core';
+import {COMPILER_OPTIONS, Compiler, CompilerFactory, CompilerOptions, Inject, OpaqueToken, Optional, PLATFORM_INITIALIZER, PlatformRef, Provider, ReflectiveInjector, TRANSLATIONS, TRANSLATIONS_FORMAT, Type, ViewEncapsulation, createPlatformFactory, isDevMode, platformCore} from '@angular/core';
 
 import {AnimationParser} from '../animation/animation_parser';
 import {CompilerConfig} from '../config';
@@ -40,6 +40,8 @@ const _NO_RESOURCE_LOADER: ResourceLoader = {
           `No ResourceLoader implementation has been provided. Can't read the url "${url}"`);}
 };
 
+const baseHtmlParser = new OpaqueToken('HtmlParser');
+
 /**
  * A set of providers that provide `JitCompiler` and its dependencies to use for
  * template compilation.
@@ -52,17 +54,24 @@ export const COMPILER_PROVIDERS: Array<any|Type<any>|{[k: string]: any}|any[]> =
   Console,
   Lexer,
   Parser,
-  HtmlParser,
+  {
+    provide: baseHtmlParser,
+    useClass: HtmlParser,
+  },
   {
     provide: i18n.I18NHtmlParser,
     useFactory: (parser: HtmlParser, translations: string, format: string) =>
                     new i18n.I18NHtmlParser(parser, translations, format),
     deps: [
-      HtmlParser,
+      baseHtmlParser,
       [new Optional(), new Inject(TRANSLATIONS)],
       [new Optional(), new Inject(TRANSLATIONS_FORMAT)],
     ]
   },
+  {
+    provide: HtmlParser,
+    useExisting: i18n.I18NHtmlParser,
+  },
   TemplateParser,
   DirectiveNormalizer,
   CompileMetadataResolver,

modules/@angular/compiler/src/metadata_resolver.ts

@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AnimationAnimateMetadata, AnimationEntryMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationStateDeclarationMetadata, AnimationStateMetadata, AnimationStateTransitionMetadata, AnimationStyleMetadata, AnimationWithStepsMetadata, Attribute, ChangeDetectionStrategy, Component, Directive, Host, Inject, Injectable, ModuleWithProviders, OpaqueToken, Optional, Provider, Query, SchemaMetadata, Self, SkipSelf, Type, resolveForwardRef} from '@angular/core';
+import {AnimationAnimateMetadata, AnimationEntryMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationStateDeclarationMetadata, AnimationStateMetadata, AnimationStateTransitionMetadata, AnimationStyleMetadata, AnimationWithStepsMetadata, Attribute, ChangeDetectionStrategy, Component, ComponentFactory, Directive, Host, Inject, Injectable, ModuleWithProviders, OpaqueToken, Optional, Provider, Query, SchemaMetadata, Self, SkipSelf, Type, resolveForwardRef} from '@angular/core';
 
-import {StaticSymbol} from './aot/static_symbol';
+import {StaticSymbol, StaticSymbolCache} from './aot/static_symbol';
+import {ngfactoryFilePath} from './aot/util';
 import {assertArrayOfStrings, assertInterpolationSymbols} from './assertions';
 import * as cpl from './compile_metadata';
 import {DirectiveNormalizer} from './directive_normalizer';
 import {DirectiveResolver} from './directive_resolver';
-import {ListWrapper, StringMapWrapper} from './facade/collection';
-import {isBlank, isPresent, stringify} from './facade/lang';
-import {Identifiers, createIdentifierToken, resolveIdentifier} from './identifiers';
+import {stringify} from './facade/lang';
+import {Identifiers, resolveIdentifier} from './identifiers';
 import {CompilerInjectable} from './injectable';
 import {hasLifecycleHook} from './lifecycle_reflector';
 import {NgModuleResolver} from './ng_module_resolver';
@@ -24,7 +24,7 @@ import {ComponentStillLoadingError, LIFECYCLE_HOOKS_VALUES, ReflectorReader, ref
 import {ElementSchemaRegistry} from './schema/element_schema_registry';
 import {SummaryResolver} from './summary_resolver';
 import {getUrlScheme} from './url_resolver';
-import {MODULE_SUFFIX, SyncAsyncResult, SyntaxError, ValueTransformer, visitValue} from './util';
+import {MODULE_SUFFIX, SyntaxError, ValueTransformer, visitValue} from './util';
 
 export type ErrorCollector = (error: any, type?: any) => void;
 export const ERROR_COLLECTOR_TOKEN = new OpaqueToken('ErrorCollector');
@@ -38,6 +38,8 @@ export const ERROR_COLLECTOR_TOKEN = new OpaqueToken('ErrorCollector');
 //   to wait correctly.
 @CompilerInjectable()
 export class CompileMetadataResolver {
+  private _nonNormalizedDirectiveCache =
+      new Map<Type<any>, {annotation: Directive, metadata: cpl.CompileDirectiveMetadata}>();
   private _directiveCache = new Map<Type<any>, cpl.CompileDirectiveMetadata>();
   private _summaryCache = new Map<Type<any>, cpl.CompileTypeSummary>();
   private _pipeCache = new Map<Type<any>, cpl.CompilePipeMetadata>();
@@ -49,12 +51,14 @@ export class CompileMetadataResolver {
       private _pipeResolver: PipeResolver, private _summaryResolver: SummaryResolver<any>,
       private _schemaRegistry: ElementSchemaRegistry,
       private _directiveNormalizer: DirectiveNormalizer,
+      @Optional() private _staticSymbolCache: StaticSymbolCache,
       private _reflector: ReflectorReader = reflector,
       @Optional() @Inject(ERROR_COLLECTOR_TOKEN) private _errorCollector?: ErrorCollector) {}
 
   clearCacheFor(type: Type<any>) {
     const dirMeta = this._directiveCache.get(type);
     this._directiveCache.delete(type);
+    this._nonNormalizedDirectiveCache.delete(type);
     this._summaryCache.delete(type);
     this._pipeCache.delete(type);
     this._ngModuleOfTypes.delete(type);
@@ -65,8 +69,9 @@ export class CompileMetadataResolver {
     }
   }
 
-  clearCache() {
+  clearCache(): void {
     this._directiveCache.clear();
+    this._nonNormalizedDirectiveCache.clear();
     this._summaryCache.clear();
     this._pipeCache.clear();
     this._ngModuleCache.clear();
@@ -74,6 +79,66 @@ export class CompileMetadataResolver {
     this._directiveNormalizer.clearCache();
   }
 
+  private _createProxyClass(baseType: any, name: string): cpl.ProxyClass {
+    let delegate: any = null;
+    const proxyClass: cpl.ProxyClass = <any>function() {
+      if (!delegate) {
+        throw new Error(
+            `Illegal state: Class ${name} for type ${stringify(baseType)} is not compiled yet!`);
+      }
+      return delegate.apply(this, arguments);
+    };
+    proxyClass.setDelegate = (d) => {
+      delegate = d;
+      (<any>proxyClass).prototype = d.prototype;
+    };
+    // Make stringify work correctly
+    (<any>proxyClass).overriddenName = name;
+    return proxyClass;
+  }
+
+  private getGeneratedClass(dirType: any, name: string): StaticSymbol|cpl.ProxyClass {
+    if (dirType instanceof StaticSymbol) {
+      return this._staticSymbolCache.get(ngfactoryFilePath(dirType.filePath), name);
+    } else {
+      return this._createProxyClass(dirType, name);
+    }
+  }
+
+  private getDirectiveWrapperClass(dirType: any): StaticSymbol|cpl.ProxyClass {
+    return this.getGeneratedClass(dirType, cpl.dirWrapperClassName(dirType));
+  }
+
+  private getComponentViewClass(dirType: any): StaticSymbol|cpl.ProxyClass {
+    return this.getGeneratedClass(dirType, cpl.viewClassName(dirType, 0));
+  }
+
+  getHostComponentViewClass(dirType: any): StaticSymbol|cpl.ProxyClass {
+    return this.getGeneratedClass(dirType, cpl.hostViewClassName(dirType));
+  }
+
+  getHostComponentType(dirType: any): StaticSymbol|Type<any> {
+    const name = `${cpl.identifierName({reference: dirType})}_Host`;
+    if (dirType instanceof StaticSymbol) {
+      return this._staticSymbolCache.get(dirType.filePath, name);
+    } else {
+      const HostClass = <any>function HostClass() {};
+      HostClass.overriddenName = name;
+
+      return HostClass;
+    }
+  }
+
+  private getComponentFactory(selector: string, dirType: any): StaticSymbol|ComponentFactory<any> {
+    if (dirType instanceof StaticSymbol) {
+      return this._staticSymbolCache.get(
+          ngfactoryFilePath(dirType.filePath), cpl.componentFactoryName(dirType));
+    } else {
+      const hostView = this.getHostComponentViewClass(dirType);
+      return new ComponentFactory(selector, <any>hostView, dirType);
+    }
+  }
+
   getAnimationEntryMetadata(entry: AnimationEntryMetadata): cpl.CompileAnimationEntryMetadata {
     const defs = entry.definitions.map(def => this._getAnimationStateMetadata(def));
     return new cpl.CompileAnimationEntryMetadata(entry.name, defs);
@@ -162,6 +227,9 @@ export class CompileMetadataResolver {
         queries: metadata.queries,
         viewQueries: metadata.viewQueries,
         entryComponents: metadata.entryComponents,
+        wrapperType: metadata.wrapperType,
+        componentViewType: metadata.componentViewType,
+        componentFactory: metadata.componentFactory,
         template: templateMetadata
       });
       this._directiveCache.set(directiveType, normalizedDirMeta);
@@ -201,7 +269,14 @@ export class CompileMetadataResolver {
   getNonNormalizedDirectiveMetadata(directiveType: any):
       {annotation: Directive, metadata: cpl.CompileDirectiveMetadata} {
     directiveType = resolveForwardRef(directiveType);
-    const dirMeta = this._directiveResolver.resolve(directiveType);
+    if (!directiveType) {
+      return null;
+    }
+    let cacheEntry = this._nonNormalizedDirectiveCache.get(directiveType);
+    if (cacheEntry) {
+      return cacheEntry;
+    }
+    const dirMeta = this._directiveResolver.resolve(directiveType, false);
     if (!dirMeta) {
       return null;
     }
@@ -230,7 +305,7 @@ export class CompileMetadataResolver {
 
     let changeDetectionStrategy: ChangeDetectionStrategy = null;
     let viewProviders: cpl.CompileProviderMetadata[] = [];
-    let entryComponentMetadata: cpl.CompileIdentifierMetadata[] = [];
+    let entryComponentMetadata: cpl.CompileEntryComponentMetadata[] = [];
     let selector = dirMeta.selector;
 
     if (dirMeta instanceof Component) {
@@ -243,7 +318,7 @@ export class CompileMetadataResolver {
       }
       if (dirMeta.entryComponents) {
         entryComponentMetadata = flattenAndDedupeArray(dirMeta.entryComponents)
-                                     .map((type) => this._getIdentifierMetadata(type))
+                                     .map((type) => this._getEntryComponentMetadata(type))
                                      .concat(entryComponentMetadata);
       }
       if (!selector) {
@@ -261,14 +336,14 @@ export class CompileMetadataResolver {
     }
 
     let providers: cpl.CompileProviderMetadata[] = [];
-    if (isPresent(dirMeta.providers)) {
+    if (dirMeta.providers != null) {
       providers = this._getProvidersMetadata(
           dirMeta.providers, entryComponentMetadata,
           `providers for "${stringifyType(directiveType)}"`, [], directiveType);
     }
     let queries: cpl.CompileQueryMetadata[] = [];
     let viewQueries: cpl.CompileQueryMetadata[] = [];
-    if (isPresent(dirMeta.queries)) {
+    if (dirMeta.queries != null) {
       queries = this._getQueriesMetadata(dirMeta.queries, false, directiveType);
       viewQueries = this._getQueriesMetadata(dirMeta.queries, true, directiveType);
     }
@@ -287,9 +362,17 @@ export class CompileMetadataResolver {
       viewProviders: viewProviders,
       queries: queries,
       viewQueries: viewQueries,
-      entryComponents: entryComponentMetadata
+      entryComponents: entryComponentMetadata,
+      wrapperType: this.getDirectiveWrapperClass(directiveType),
+      componentViewType: nonNormalizedTemplateMetadata ? this.getComponentViewClass(directiveType) :
+                                                         undefined,
+      componentFactory: nonNormalizedTemplateMetadata ?
+          this.getComponentFactory(selector, directiveType) :
+          undefined
     });
-    return {metadata, annotation: dirMeta};
+    cacheEntry = {metadata, annotation: dirMeta};
+    this._nonNormalizedDirectiveCache.set(directiveType, cacheEntry);
+    return cacheEntry;
   }
 
   /**
@@ -371,7 +454,7 @@ export class CompileMetadataResolver {
     const importedModules: cpl.CompileNgModuleSummary[] = [];
     const exportedModules: cpl.CompileNgModuleSummary[] = [];
     const providers: cpl.CompileProviderMetadata[] = [];
-    const entryComponents: cpl.CompileIdentifierMetadata[] = [];
+    const entryComponents: cpl.CompileEntryComponentMetadata[] = [];
     const bootstrapComponents: cpl.CompileIdentifierMetadata[] = [];
     const schemas: SchemaMetadata[] = [];
 
@@ -488,7 +571,7 @@ export class CompileMetadataResolver {
 
     if (meta.entryComponents) {
       entryComponents.push(...flattenAndDedupeArray(meta.entryComponents)
-                               .map(type => this._getIdentifierMetadata(type)));
+                               .map(type => this._getEntryComponentMetadata(type)));
     }
 
     if (meta.bootstrap) {
@@ -504,7 +587,8 @@ export class CompileMetadataResolver {
       });
     }
 
-    entryComponents.push(...bootstrapComponents);
+    entryComponents.push(
+        ...bootstrapComponents.map(type => this._getEntryComponentMetadata(type.reference)));
 
     if (meta.schemas) {
       schemas.push(...flattenAndDedupeArray(meta.schemas));
@@ -722,14 +806,14 @@ export class CompileMetadataResolver {
             token = paramEntry.attributeName;
           } else if (paramEntry instanceof Inject) {
             token = paramEntry.token;
-          } else if (isValidType(paramEntry) && isBlank(token)) {
+          } else if (isValidType(paramEntry) && token == null) {
             token = paramEntry;
           }
         });
       } else {
         token = param;
       }
-      if (isBlank(token)) {
+      if (token == null) {
         hasUnknownDeps = true;
         return null;
       }
@@ -769,7 +853,7 @@ export class CompileMetadataResolver {
   }
 
   private _getProvidersMetadata(
-      providers: Provider[], targetEntryComponents: cpl.CompileIdentifierMetadata[],
+      providers: Provider[], targetEntryComponents: cpl.CompileEntryComponentMetadata[],
       debugInfo?: string, compileProviders: cpl.CompileProviderMetadata[] = [],
       type?: any): cpl.CompileProviderMetadata[] {
     providers.forEach((provider: any, providerIdx: number) => {
@@ -778,10 +862,14 @@ export class CompileMetadataResolver {
       } else {
         provider = resolveForwardRef(provider);
         let providerMeta: cpl.ProviderMeta;
-        if (provider && typeof provider == 'object' && provider.hasOwnProperty('provide')) {
+        if (provider && typeof provider === 'object' && provider.hasOwnProperty('provide')) {
+          this._validateProvider(provider);
           providerMeta = new cpl.ProviderMeta(provider.provide, provider);
         } else if (isValidType(provider)) {
           providerMeta = new cpl.ProviderMeta(provider, {useClass: provider});
+        } else if (provider === void 0) {
+          this._reportError(new SyntaxError(
+              `Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.`));
         } else {
           const providersInfo =
               (<string[]>providers.reduce(
@@ -812,9 +900,19 @@ export class CompileMetadataResolver {
     return compileProviders;
   }
 
+  private _validateProvider(provider: any): void {
+    if (provider.hasOwnProperty('useClass') && provider.useClass == null) {
+      this._reportError(new SyntaxError(
+          `Invalid provider for ${stringifyType(provider.provide)}. useClass cannot be ${provider.useClass}.
+           Usually it happens when:
+           1. There's a circular dependency (might be caused by using index.ts (barrel) files).
+           2. Class was used before it was declared. Use forwardRef in this case.`));
+    }
+  }
+
   private _getEntryComponentsFromProvider(provider: cpl.ProviderMeta, type?: any):
-      cpl.CompileIdentifierMetadata[] {
-    const components: cpl.CompileIdentifierMetadata[] = [];
+      cpl.CompileEntryComponentMetadata[] {
+    const components: cpl.CompileEntryComponentMetadata[] = [];
     const collectedIdentifiers: cpl.CompileIdentifierMetadata[] = [];
 
     if (provider.useFactory || provider.useExisting || provider.useClass) {
@@ -832,14 +930,27 @@ export class CompileMetadataResolver {
 
     extractIdentifiers(provider.useValue, collectedIdentifiers);
     collectedIdentifiers.forEach((identifier) => {
-      if (this._directiveResolver.isDirective(identifier.reference) ||
-          this._loadSummary(identifier.reference, cpl.CompileSummaryKind.Directive)) {
-        components.push(identifier);
+      const entry = this._getEntryComponentMetadata(identifier.reference);
+      if (entry) {
+        components.push(entry);
       }
     });
     return components;
   }
 
+  private _getEntryComponentMetadata(dirType: any): cpl.CompileEntryComponentMetadata {
+    const dirMeta = this.getNonNormalizedDirectiveMetadata(dirType);
+    if (dirMeta) {
+      return {componentType: dirType, componentFactory: dirMeta.metadata.componentFactory};
+    } else {
+      const dirSummary =
+          <cpl.CompileDirectiveSummary>this._loadSummary(dirType, cpl.CompileSummaryKind.Directive);
+      if (dirSummary) {
+        return {componentType: dirType, componentFactory: dirSummary.componentFactory};
+      }
+    }
+  }
+
   getProviderMetadata(provider: cpl.ProviderMeta): cpl.CompileProviderMetadata {
     let compileDeps: cpl.CompileDiDependencyMetadata[];
     let compileTypeMetadata: cpl.CompileTypeMetadata = null;
@@ -987,4 +1098,4 @@ function stringifyType(type: any): string {
   } else {
     return stringify(type);
   }
-}
+}

modules/@angular/compiler/src/ml_parser/parser.ts

@@ -283,7 +283,7 @@ class _TreeBuilder {
     const tagDef = this.getTagDefinition(el.name);
     const {parent, container} = this._getParentElementSkippingContainers();
 
-    if (parent && tagDef.requireExtraParent(parent.name)) {
+    if (isPresent(parent) && tagDef.requireExtraParent(parent.name)) {
       const newParent = new html.Element(
           tagDef.parentToAdd, [], [], el.sourceSpan, el.startSourceSpan, el.endSourceSpan);
       this._insertBeforeContainer(parent, container, newParent);

modules/@angular/compiler/src/ng_module_compiler.ts

@@ -9,7 +9,7 @@
 import {CompileDiDependencyMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompileProviderMetadata, CompileTokenMetadata, identifierModuleUrl, identifierName, tokenName, tokenReference} from './compile_metadata';
 import {createDiTokenExpression} from './compiler_util/identifier_util';
 import {isPresent} from './facade/lang';
-import {Identifiers, createIdentifier, resolveIdentifier} from './identifiers';
+import {Identifiers, createIdentifier, createIdentifierToken, resolveIdentifier} from './identifiers';
 import {CompilerInjectable} from './injectable';
 import {ClassBuilder, createClassStmt} from './output/class_builder';
 import * as o from './output/output_ast';
@@ -19,9 +19,12 @@ import {LifecycleHooks} from './private_import_core';
 import {NgModuleProviderAnalyzer} from './provider_analyzer';
 import {ProviderAst} from './template_parser/template_ast';
 
+/**
+ * This is currently not read, but will probably be used in the future.
+ * We keep it as we already pass it through all the rigth places...
+ */
 export class ComponentFactoryDependency {
-  constructor(
-      public comp: CompileIdentifierMetadata, public placeholder: CompileIdentifierMetadata) {}
+  constructor(public compType: any) {}
 }
 
 export class NgModuleCompileResult {
@@ -46,13 +49,12 @@ export class NgModuleCompiler {
     const bootstrapComponentFactories: CompileIdentifierMetadata[] = [];
     const entryComponentFactories =
         ngModuleMeta.transitiveModule.entryComponents.map((entryComponent) => {
-          const id: CompileIdentifierMetadata = {reference: null};
           if (ngModuleMeta.bootstrapComponents.some(
-                  (id) => id.reference === entryComponent.reference)) {
-            bootstrapComponentFactories.push(id);
+                  (id) => id.reference === entryComponent.componentType)) {
+            bootstrapComponentFactories.push({reference: entryComponent.componentFactory});
           }
-          deps.push(new ComponentFactoryDependency(entryComponent, id));
-          return id;
+          deps.push(new ComponentFactoryDependency(entryComponent.componentType));
+          return {reference: entryComponent.componentFactory};
         });
     const builder = new _InjectorBuilder(
         ngModuleMeta, entryComponentFactories, bootstrapComponentFactories, sourceSpan);

modules/@angular/compiler/src/ng_module_resolver.ts

@@ -9,7 +9,7 @@
 import {NgModule, Type} from '@angular/core';
 
 import {ListWrapper} from './facade/collection';
-import {stringify} from './facade/lang';
+import {isPresent, stringify} from './facade/lang';
 import {CompilerInjectable} from './injectable';
 import {ReflectorReader, reflector} from './private_import_core';
 
@@ -30,7 +30,7 @@ export class NgModuleResolver {
     const ngModuleMeta: NgModule =
         ListWrapper.findLast(this._reflector.annotations(type), _isNgModuleMetadata);
 
-    if (ngModuleMeta) {
+    if (isPresent(ngModuleMeta)) {
       return ngModuleMeta;
     } else {
       if (throwIfNotFound) {

modules/@angular/compiler/src/output/js_emitter.ts

@@ -7,7 +7,8 @@
  */
 
 
-import {identifierModuleUrl, identifierName} from '../compile_metadata';
+import {StaticSymbol} from '../aot/static_symbol';
+import {CompileIdentifierMetadata} from '../compile_metadata';
 import {isBlank, isPresent} from '../facade/lang';
 
 import {EmitterVisitorContext, OutputEmitter} from './abstract_emitter';
@@ -16,17 +17,17 @@ import * as o from './output_ast';
 import {ImportResolver} from './path_util';
 
 export class JavaScriptEmitter implements OutputEmitter {
-  constructor(private _importGenerator: ImportResolver) {}
-  emitStatements(moduleUrl: string, stmts: o.Statement[], exportedVars: string[]): string {
-    const converter = new JsEmitterVisitor(moduleUrl);
+  constructor(private _importResolver: ImportResolver) {}
+  emitStatements(genFilePath: string, stmts: o.Statement[], exportedVars: string[]): string {
+    const converter = new JsEmitterVisitor(genFilePath, this._importResolver);
     const ctx = EmitterVisitorContext.createRoot(exportedVars);
     converter.visitAllStatements(stmts, ctx);
     const srcParts: string[] = [];
-    converter.importsWithPrefixes.forEach((prefix, importedModuleUrl) => {
+    converter.importsWithPrefixes.forEach((prefix, importedFilePath) => {
       // Note: can't write the real word for import as it screws up system.js auto detection...
       srcParts.push(
           `var ${prefix} = req` +
-          `uire('${this._importGenerator.fileNameToModuleName(importedModuleUrl, moduleUrl)}');`);
+          `uire('${this._importResolver.fileNameToModuleName(importedFilePath, genFilePath)}');`);
     });
     srcParts.push(ctx.toSource());
     return srcParts.join('\n');
@@ -36,20 +37,23 @@ export class JavaScriptEmitter implements OutputEmitter {
 class JsEmitterVisitor extends AbstractJsEmitterVisitor {
   importsWithPrefixes = new Map<string, string>();
 
-  constructor(private _moduleUrl: string) { super(); }
+  constructor(private _genFilePath: string, private _importResolver: ImportResolver) { super(); }
+
+  private _resolveStaticSymbol(value: CompileIdentifierMetadata): StaticSymbol {
+    const reference = value.reference;
+    if (!(reference instanceof StaticSymbol)) {
+      throw new Error(`Internal error: unknown identifier ${JSON.stringify(value)}`);
+    }
+    return this._importResolver.getImportAs(reference) || reference;
+  }
 
   visitExternalExpr(ast: o.ExternalExpr, ctx: EmitterVisitorContext): any {
-    const name = identifierName(ast.value);
-    const moduleUrl = identifierModuleUrl(ast.value);
-    if (isBlank(name)) {
-      console.error('>>>', ast.value);
-      throw new Error(`Internal error: unknown identifier ${ast.value}`);
-    }
-    if (isPresent(moduleUrl) && moduleUrl != this._moduleUrl) {
-      let prefix = this.importsWithPrefixes.get(moduleUrl);
+    const {name, filePath} = this._resolveStaticSymbol(ast.value);
+    if (filePath != this._genFilePath) {
+      let prefix = this.importsWithPrefixes.get(filePath);
       if (isBlank(prefix)) {
         prefix = `import${this.importsWithPrefixes.size}`;
-        this.importsWithPrefixes.set(moduleUrl, prefix);
+        this.importsWithPrefixes.set(filePath, prefix);
       }
       ctx.print(`${prefix}.`);
     }

modules/@angular/compiler/src/output/path_util.ts

@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {StaticSymbol} from '../aot/static_symbol';
+
 /**
  * Interface that defines how import statements should be generated.
  */
@@ -16,4 +18,10 @@ export abstract class ImportResolver {
    */
   abstract fileNameToModuleName(importedFilePath: string, containingFilePath: string): string
       /*|null*/;
+
+  /**
+   * Converts the given StaticSymbol into another StaticSymbol that should be used
+   * to generate the import from.
+   */
+  abstract getImportAs(symbol: StaticSymbol): StaticSymbol /*|null*/;
 }

modules/@angular/compiler/src/output/ts_emitter.ts

@@ -7,18 +7,22 @@
  */
 
 
-import {CompileIdentifierMetadata, identifierModuleUrl, identifierName} from '../compile_metadata';
+import {StaticSymbol} from '../aot/static_symbol';
+import {CompileIdentifierMetadata} from '../compile_metadata';
 import {isBlank, isPresent} from '../facade/lang';
 
 import {AbstractEmitterVisitor, CATCH_ERROR_VAR, CATCH_STACK_VAR, EmitterVisitorContext, OutputEmitter} from './abstract_emitter';
 import * as o from './output_ast';
 import {ImportResolver} from './path_util';
 
-const _debugModuleUrl = '/debug/lib';
+const _debugFilePath = '/debug/lib';
 
 export function debugOutputAstAsTypeScript(ast: o.Statement | o.Expression | o.Type | any[]):
     string {
-  const converter = new _TsEmitterVisitor(_debugModuleUrl);
+  const converter = new _TsEmitterVisitor(_debugFilePath, {
+    fileNameToModuleName(filePath: string, containingFilePath: string) { return filePath; },
+    getImportAs(symbol: StaticSymbol) { return null; }
+  });
   const ctx = EmitterVisitorContext.createRoot([]);
   const asts: any[] = Array.isArray(ast) ? ast : [ast];
 
@@ -37,17 +41,23 @@ export function debugOutputAstAsTypeScript(ast: o.Statement | o.Expression | o.T
 }
 
 export class TypeScriptEmitter implements OutputEmitter {
-  constructor(private _importGenerator: ImportResolver) {}
-  emitStatements(moduleUrl: string, stmts: o.Statement[], exportedVars: string[]): string {
-    const converter = new _TsEmitterVisitor(moduleUrl);
+  constructor(private _importResolver: ImportResolver) {}
+  emitStatements(genFilePath: string, stmts: o.Statement[], exportedVars: string[]): string {
+    const converter = new _TsEmitterVisitor(genFilePath, this._importResolver);
     const ctx = EmitterVisitorContext.createRoot(exportedVars);
     converter.visitAllStatements(stmts, ctx);
     const srcParts: string[] = [];
-    converter.importsWithPrefixes.forEach((prefix, importedModuleUrl) => {
+    converter.reexports.forEach((reexports, exportedFilePath) => {
+      const reexportsCode =
+          reexports.map(reexport => `${reexport.name} as ${reexport.as}`).join(',');
+      srcParts.push(
+          `export {${reexportsCode}} from '${this._importResolver.fileNameToModuleName(exportedFilePath, genFilePath)}';`);
+    });
+    converter.importsWithPrefixes.forEach((prefix, importedFilePath) => {
       // Note: can't write the real word for import as it screws up system.js auto detection...
       srcParts.push(
           `imp` +
-          `ort * as ${prefix} from '${this._importGenerator.fileNameToModuleName(importedModuleUrl, moduleUrl)}';`);
+          `ort * as ${prefix} from '${this._importResolver.fileNameToModuleName(importedFilePath, genFilePath)}';`);
     });
     srcParts.push(ctx.toSource());
     return srcParts.join('\n');
@@ -55,9 +65,12 @@ export class TypeScriptEmitter implements OutputEmitter {
 }
 
 class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor {
-  constructor(private _moduleUrl: string) { super(false); }
+  constructor(private _genFilePath: string, private _importResolver: ImportResolver) {
+    super(false);
+  }
 
   importsWithPrefixes = new Map<string, string>();
+  reexports = new Map<string, {name: string, as: string}[]>();
 
   visitType(t: o.Type, ctx: EmitterVisitorContext, defaultType: string = 'any') {
     if (isPresent(t)) {
@@ -98,6 +111,19 @@ class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor
   }
 
   visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: EmitterVisitorContext): any {
+    if (ctx.isExportedVar(stmt.name) && stmt.value instanceof o.ExternalExpr && !stmt.type) {
+      // check for a reexport
+      const {name, filePath, members} = this._resolveStaticSymbol(stmt.value.value);
+      if (members.length === 0 && filePath !== this._genFilePath) {
+        let reexports = this.reexports.get(filePath);
+        if (!reexports) {
+          reexports = [];
+          this.reexports.set(filePath, reexports);
+        }
+        reexports.push({name, as: stmt.name});
+        return null;
+      }
+    }
     if (ctx.isExportedVar(stmt.name)) {
       ctx.print(`export `);
     }
@@ -320,25 +346,29 @@ class _TsEmitterVisitor extends AbstractEmitterVisitor implements o.TypeVisitor
     }, params, ctx, ',');
   }
 
+  private _resolveStaticSymbol(value: CompileIdentifierMetadata): StaticSymbol {
+    const reference = value.reference;
+    if (!(reference instanceof StaticSymbol)) {
+      throw new Error(`Internal error: unknown identifier ${JSON.stringify(value)}`);
+    }
+    return this._importResolver.getImportAs(reference) || reference;
+  }
+
   private _visitIdentifier(
       value: CompileIdentifierMetadata, typeParams: o.Type[], ctx: EmitterVisitorContext): void {
-    const name = identifierName(value);
-    const moduleUrl = identifierModuleUrl(value);
-    if (isBlank(name)) {
-      throw new Error(`Internal error: unknown identifier ${value}`);
-    }
-    if (isPresent(moduleUrl) && moduleUrl != this._moduleUrl) {
-      let prefix = this.importsWithPrefixes.get(moduleUrl);
+    const {name, filePath, members} = this._resolveStaticSymbol(value);
+    if (filePath != this._genFilePath) {
+      let prefix = this.importsWithPrefixes.get(filePath);
       if (isBlank(prefix)) {
         prefix = `import${this.importsWithPrefixes.size}`;
-        this.importsWithPrefixes.set(moduleUrl, prefix);
+        this.importsWithPrefixes.set(filePath, prefix);
       }
       ctx.print(`${prefix}.`);
     }
-    if (value.reference && value.reference.members && value.reference.members.length) {
-      ctx.print(value.reference.name);
+    if (members.length) {
+      ctx.print(name);
       ctx.print('.');
-      ctx.print(value.reference.members.join('.'));
+      ctx.print(members.join('.'));
     } else {
       ctx.print(name);
     }

modules/@angular/compiler/src/output/value_util.ts

@@ -7,6 +7,7 @@
  */
 
 
+import {CompileIdentifierMetadata} from '../compile_metadata';
 import {ValueTransformer, visitValue} from '../util';
 
 import * as o from './output_ast';

modules/@angular/compiler/src/pipe_resolver.ts

@@ -9,7 +9,7 @@
 import {Pipe, Type, resolveForwardRef} from '@angular/core';
 
 import {ListWrapper} from './facade/collection';
-import {stringify} from './facade/lang';
+import {isPresent, stringify} from './facade/lang';
 import {CompilerInjectable} from './injectable';
 import {ReflectorReader, reflector} from './private_import_core';
 
@@ -38,9 +38,9 @@ export class PipeResolver {
    */
   resolve(type: Type<any>, throwIfNotFound = true): Pipe {
     const metas = this._reflector.annotations(resolveForwardRef(type));
-    if (metas) {
+    if (isPresent(metas)) {
       const annotation = ListWrapper.findLast(metas, _isPipeMetadata);
-      if (annotation) {
+      if (isPresent(annotation)) {
         return annotation;
       }
     }

modules/@angular/compiler/src/private_import_core.ts

@@ -32,7 +32,6 @@ export const view_utils: typeof r.view_utils = r.view_utils;
 export const DebugContext: typeof r.DebugContext = r.DebugContext;
 export const StaticNodeDebugInfo: typeof r.StaticNodeDebugInfo = r.StaticNodeDebugInfo;
 export const devModeEqual: typeof r.devModeEqual = r.devModeEqual;
-export const UNINITIALIZED: typeof r.UNINITIALIZED = r.UNINITIALIZED;
 export const ValueUnwrapper: typeof r.ValueUnwrapper = r.ValueUnwrapper;
 export const TemplateRef_: typeof r.TemplateRef_ = r.TemplateRef_;
 export type RenderDebugInfo = typeof r._RenderDebugInfo;

modules/@angular/compiler/src/provider_analyzer.ts

@@ -9,7 +9,7 @@
 
 import {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompileNgModuleMetadata, CompileProviderMetadata, CompileQueryMetadata, CompileTokenMetadata, CompileTypeMetadata, tokenName, tokenReference} from './compile_metadata';
 import {isBlank, isPresent} from './facade/lang';
-import {Identifiers, resolveIdentifier} from './identifiers';
+import {Identifiers, createIdentifierToken, resolveIdentifier} from './identifiers';
 import {ParseError, ParseSourceSpan} from './parse_util';
 import {AttrAst, DirectiveAst, ProviderAst, ProviderAstType, ReferenceAst} from './template_parser/template_ast';
 
@@ -114,7 +114,7 @@ export class ProviderElementContext {
     let queries: CompileQueryMetadata[];
     while (currentEl !== null) {
       queries = currentEl._contentQueries.get(tokenReference(token));
-      if (queries) {
+      if (isPresent(queries)) {
         result.push(...queries.filter((query) => query.descendants || distance <= 1));
       }
       if (currentEl._directiveAsts.length > 0) {
@@ -123,7 +123,7 @@ export class ProviderElementContext {
       currentEl = currentEl._parent;
     }
     queries = this.viewContext.viewQueries.get(tokenReference(token));
-    if (queries) {
+    if (isPresent(queries)) {
       result.push(...queries);
     }
     return result;
@@ -143,7 +143,7 @@ export class ProviderElementContext {
       return null;
     }
     let transformedProviderAst = this._transformedProviders.get(tokenReference(token));
-    if (transformedProviderAst) {
+    if (isPresent(transformedProviderAst)) {
       return transformedProviderAst;
     }
     if (isPresent(this._seenProviders.get(tokenReference(token)))) {
@@ -165,11 +165,11 @@ export class ProviderElementContext {
           transformedUseExisting = null;
           transformedUseValue = existingDiDep.value;
         }
-      } else if (provider.useFactory) {
+      } else if (isPresent(provider.useFactory)) {
         const deps = provider.deps || provider.useFactory.diDeps;
         transformedDeps =
             deps.map((dep) => this._getDependency(resolvedProvider.providerType, dep, eager));
-      } else if (provider.useClass) {
+      } else if (isPresent(provider.useClass)) {
         const deps = provider.deps || provider.useClass.diDeps;
         transformedDeps =
             deps.map((dep) => this._getDependency(resolvedProvider.providerType, dep, eager));
@@ -235,7 +235,7 @@ export class ProviderElementContext {
       }
     } else {
       // check parent elements
-      while (!result && currElement._parent) {
+      while (!result && isPresent(currElement._parent)) {
         const prevElement = currElement;
         currElement = currElement._parent;
         if (prevElement._isViewRoot) {
@@ -301,7 +301,7 @@ export class NgModuleProviderAnalyzer {
       return null;
     }
     let transformedProviderAst = this._transformedProviders.get(tokenReference(token));
-    if (transformedProviderAst) {
+    if (isPresent(transformedProviderAst)) {
       return transformedProviderAst;
     }
     if (isPresent(this._seenProviders.get(tokenReference(token)))) {
@@ -324,11 +324,11 @@ export class NgModuleProviderAnalyzer {
           transformedUseExisting = null;
           transformedUseValue = existingDiDep.value;
         }
-      } else if (provider.useFactory) {
+      } else if (isPresent(provider.useFactory)) {
         const deps = provider.deps || provider.useFactory.diDeps;
         transformedDeps =
             deps.map((dep) => this._getDependency(dep, eager, resolvedProvider.sourceSpan));
-      } else if (provider.useClass) {
+      } else if (isPresent(provider.useClass)) {
         const deps = provider.deps || provider.useClass.diDeps;
         transformedDeps =
             deps.map((dep) => this._getDependency(dep, eager, resolvedProvider.sourceSpan));
@@ -454,7 +454,7 @@ function _resolveProviders(
 
 function _getViewQueries(component: CompileDirectiveMetadata): Map<any, CompileQueryMetadata[]> {
   const viewQueries = new Map<any, CompileQueryMetadata[]>();
-  if (component.viewQueries) {
+  if (isPresent(component.viewQueries)) {
     component.viewQueries.forEach((query) => _addQueryToTokenMap(viewQueries, query));
   }
   return viewQueries;
@@ -464,7 +464,7 @@ function _getContentQueries(directives: CompileDirectiveSummary[]):
     Map<any, CompileQueryMetadata[]> {
   const contentQueries = new Map<any, CompileQueryMetadata[]>();
   directives.forEach(directive => {
-    if (directive.queries) {
+    if (isPresent(directive.queries)) {
       directive.queries.forEach((query) => _addQueryToTokenMap(contentQueries, query));
     }
   });

modules/@angular/compiler/src/summary_resolver.ts

@@ -16,6 +16,9 @@ export interface Summary<T> {
 
 @CompilerInjectable()
 export class SummaryResolver<T> {
+  isLibraryFile(fileName: string): boolean { return false; };
+  getLibraryFileName(fileName: string): string { return null; }
   resolveSummary(reference: T): Summary<T> { return null; };
   getSymbolsOf(filePath: string): T[] { return []; }
+  getImportAs(reference: T): T { return reference; }
 }

modules/@angular/compiler/src/template_parser/binding_parser.ts

@@ -11,6 +11,7 @@ import {SecurityContext} from '@angular/core';
 import {CompileDirectiveSummary, CompilePipeSummary} from '../compile_metadata';
 import {ASTWithSource, BindingPipe, EmptyExpr, ParserError, RecursiveAstVisitor, TemplateBinding} from '../expression_parser/ast';
 import {Parser} from '../expression_parser/parser';
+import {isPresent} from '../facade/lang';
 import {InterpolationConfig} from '../ml_parser/interpolation_config';
 import {mergeNsAndName} from '../ml_parser/tags';
 import {ParseError, ParseErrorLevel, ParseSourceSpan} from '../parse_util';
@@ -110,14 +111,14 @@ export class BindingParser {
   }
 
   parseInlineTemplateBinding(
-      prefixToken: string, value: string, sourceSpan: ParseSourceSpan,
+      name: string, prefixToken: string, value: string, sourceSpan: ParseSourceSpan,
       targetMatchableAttrs: string[][], targetProps: BoundProperty[], targetVars: VariableAst[]) {
     const bindings = this._parseTemplateBindings(prefixToken, value, sourceSpan);
     for (let i = 0; i < bindings.length; i++) {
       const binding = bindings[i];
       if (binding.keyIsVar) {
         targetVars.push(new VariableAst(binding.key, binding.name, sourceSpan));
-      } else if (binding.expression) {
+      } else if (isPresent(binding.expression)) {
         this._parsePropertyAst(
             binding.key, binding.expression, sourceSpan, targetMatchableAttrs, targetProps);
       } else {
@@ -135,7 +136,7 @@ export class BindingParser {
       const bindingsResult = this._exprParser.parseTemplateBindings(prefixToken, value, sourceInfo);
       this._reportExpressionParserErrors(bindingsResult.errors, sourceSpan);
       bindingsResult.templateBindings.forEach((binding) => {
-        if (binding.expression) {
+        if (isPresent(binding.expression)) {
           this._checkPipes(binding.expression, sourceSpan);
         }
       });
@@ -192,7 +193,7 @@ export class BindingParser {
       name: string, value: string, sourceSpan: ParseSourceSpan, targetMatchableAttrs: string[][],
       targetProps: BoundProperty[]): boolean {
     const expr = this.parseInterpolation(value, sourceSpan);
-    if (expr) {
+    if (isPresent(expr)) {
       this._parsePropertyAst(name, expr, sourceSpan, targetMatchableAttrs, targetProps);
       return true;
     }
@@ -373,7 +374,7 @@ export class BindingParser {
   }
 
   private _checkPipes(ast: ASTWithSource, sourceSpan: ParseSourceSpan) {
-    if (ast) {
+    if (isPresent(ast)) {
       const collector = new PipeCollector();
       ast.visit(collector);
       collector.pipes.forEach((ast, pipeName) => {

modules/@angular/compiler/src/template_parser/template_parser.ts

@@ -276,7 +276,7 @@ class TemplateParseVisitor implements html.Visitor {
         templateBindingsSource = attr.value;
       } else if (normalizedName.startsWith(TEMPLATE_ATTR_PREFIX)) {
         templateBindingsSource = attr.value;
-        prefixToken = normalizedName.substring(TEMPLATE_ATTR_PREFIX.length) + ':';
+        prefixToken = normalizedName.substring(TEMPLATE_ATTR_PREFIX.length);
       }
 
       const hasTemplateBinding = isPresent(templateBindingsSource);
@@ -288,7 +288,7 @@ class TemplateParseVisitor implements html.Visitor {
         }
         hasInlineTemplates = true;
         this._bindingParser.parseInlineTemplateBinding(
-            prefixToken, templateBindingsSource, attr.sourceSpan, templateMatchableAttrs,
+            attr.name, prefixToken, templateBindingsSource, attr.sourceSpan, templateMatchableAttrs,
             templateElementOrDirectiveProps, templateElementVars);
       }
 
@@ -309,11 +309,9 @@ class TemplateParseVisitor implements html.Visitor {
     const elementProps: BoundElementPropertyAst[] =
         this._createElementPropertyAsts(element.name, elementOrDirectiveProps, directiveAsts);
     const isViewRoot = parent.isTemplateElement || hasInlineTemplates;
-
     const providerContext = new ProviderElementContext(
         this.providerViewContext, parent.providerContext, isViewRoot, directiveAsts, attrs,
         references, element.sourceSpan);
-
     const children = html.visitAll(
         preparsedElement.nonBindable ? NON_BINDABLE_VISITOR : this, element.children,
         ElementContext.create(

modules/@angular/compiler/src/view_compiler/compile_element.ts

@@ -19,7 +19,7 @@ import {ProviderAst, ProviderAstType, ReferenceAst, TemplateAst} from '../templa
 import {CompileMethod} from './compile_method';
 import {CompileQuery, addQueryToTokenMap, createQueryList} from './compile_query';
 import {CompileView, CompileViewRootNode} from './compile_view';
-import {InjectMethodVars} from './constants';
+import {InjectMethodVars, ViewProperties} from './constants';
 import {ComponentFactoryDependency, DirectiveWrapperDependency} from './deps';
 import {getPropertyInView, injectFromViewParentInjector} from './util';
 
@@ -97,12 +97,11 @@ export class CompileElement extends CompileNode {
   }
 
   private _createComponentFactoryResolver() {
-    const entryComponents =
-        this.component.entryComponents.map((entryComponent: CompileIdentifierMetadata) => {
-          const id: CompileIdentifierMetadata = {reference: null};
-          this.view.targetDependencies.push(new ComponentFactoryDependency(entryComponent, id));
-          return id;
-        });
+    const entryComponents = this.component.entryComponents.map((entryComponent) => {
+      this.view.targetDependencies.push(
+          new ComponentFactoryDependency(entryComponent.componentType));
+      return {reference: entryComponent.componentFactory};
+    });
     if (!entryComponents || entryComponents.length === 0) {
       return;
     }
@@ -179,11 +178,11 @@ export class CompileElement extends CompileNode {
           const depsExpr =
               deps.map((dep) => this._getDependency(resolvedProvider.providerType, dep));
           if (isDirectiveWrapper) {
-            const directiveWrapperIdentifier: CompileIdentifierMetadata = {reference: null};
-            this.view.targetDependencies.push(new DirectiveWrapperDependency(
-                provider.useClass, DirectiveWrapperCompiler.dirWrapperClassName(provider.useClass),
-                directiveWrapperIdentifier));
-            return DirectiveWrapperExpressions.create(directiveWrapperIdentifier, depsExpr);
+            const dirMeta =
+                this._directives.find(dir => dir.type.reference === provider.useClass.reference);
+            this.view.targetDependencies.push(
+                new DirectiveWrapperDependency(dirMeta.type.reference));
+            return DirectiveWrapperExpressions.create({reference: dirMeta.wrapperType}, depsExpr);
           } else {
             return o.importExpr(provider.useClass)
                 .instantiate(depsExpr, o.importType(provider.useClass));
@@ -195,7 +194,7 @@ export class CompileElement extends CompileNode {
       const propName =
           `_${tokenName(resolvedProvider.token)}_${this.nodeIndex}_${this.instances.size}`;
       const instance = createProviderProperty(
-          propName, providerValueExpressions, resolvedProvider.multiProvider,
+          propName, resolvedProvider, providerValueExpressions, resolvedProvider.multiProvider,
           resolvedProvider.eager, this);
       if (isDirectiveWrapper) {
         this.directiveWrapperInstance.set(tokenReference(resolvedProvider.token), instance);
@@ -289,7 +288,7 @@ export class CompileElement extends CompileNode {
       CompileQuery {
     const propName =
         `_query_${tokenName(queryMeta.selectors[0])}_${this.nodeIndex}_${this._queryCount++}`;
-    const queryList = createQueryList(propName, this.view);
+    const queryList = createQueryList(queryMeta, directiveInstance, propName, this.view);
     const query = new CompileQuery(queryMeta, queryList, directiveInstance, this.view);
     addQueryToTokenMap(this._queries, query);
     return query;
@@ -369,8 +368,8 @@ function createInjectInternalCondition(
 }
 
 function createProviderProperty(
-    propName: string, providerValueExpressions: o.Expression[], isMulti: boolean, isEager: boolean,
-    compileElement: CompileElement): o.Expression {
+    propName: string, provider: ProviderAst, providerValueExpressions: o.Expression[],
+    isMulti: boolean, isEager: boolean, compileElement: CompileElement): o.Expression {
   const view = compileElement.view;
   let resolvedProviderValueExpr: o.Expression;
   let type: o.Type;

modules/@angular/compiler/src/view_compiler/compile_method.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {isPresent} from '../facade/lang';
 import * as o from '../output/output_ast';
 import {TemplateAst} from '../template_parser/template_ast';
 
@@ -33,7 +34,7 @@ export class CompileMethod {
     if (this._newState.nodeIndex !== this._currState.nodeIndex ||
         this._newState.sourceAst !== this._currState.sourceAst) {
       const expr = this._updateDebugContext(this._newState);
-      if (expr) {
+      if (isPresent(expr)) {
         this._bodyStatements.push(expr.toStmt());
       }
     }
@@ -42,12 +43,13 @@ export class CompileMethod {
   private _updateDebugContext(newState: _DebugState): o.Expression {
     this._currState = this._newState = newState;
     if (this._debugEnabled) {
-      const sourceLocation = newState.sourceAst ? newState.sourceAst.sourceSpan.start : null;
+      const sourceLocation =
+          isPresent(newState.sourceAst) ? newState.sourceAst.sourceSpan.start : null;
 
       return o.THIS_EXPR.callMethod('debug', [
         o.literal(newState.nodeIndex),
-        sourceLocation ? o.literal(sourceLocation.line) : o.NULL_EXPR,
-        sourceLocation ? o.literal(sourceLocation.col) : o.NULL_EXPR
+        isPresent(sourceLocation) ? o.literal(sourceLocation.line) : o.NULL_EXPR,
+        isPresent(sourceLocation) ? o.literal(sourceLocation.col) : o.NULL_EXPR
       ]);
     } else {
       return null;

modules/@angular/compiler/src/view_compiler/compile_query.ts

@@ -8,6 +8,7 @@
 
 import {CompileQueryMetadata, tokenReference} from '../compile_metadata';
 import {ListWrapper} from '../facade/collection';
+import {isPresent} from '../facade/lang';
 import {Identifiers, createIdentifier} from '../identifiers';
 import * as o from '../output/output_ast';
 
@@ -32,7 +33,7 @@ export class CompileQuery {
   addValue(value: o.Expression, view: CompileView) {
     let currentView = view;
     const elPath: CompileElement[] = [];
-    while (currentView && currentView !== this.view) {
+    while (isPresent(currentView) && currentView !== this.view) {
       const parentEl = currentView.declarationElement;
       elPath.unshift(parentEl);
       currentView = parentEl.view;
@@ -66,7 +67,7 @@ export class CompileQuery {
   generateStatements(targetStaticMethod: CompileMethod, targetDynamicMethod: CompileMethod) {
     const values = createQueryValues(this._values);
     const updateStmts = [this.queryList.callMethod('reset', [o.literalArr(values)]).toStmt()];
-    if (this.ownerDirectiveExpression) {
+    if (isPresent(this.ownerDirectiveExpression)) {
       const valueExpr = this.meta.first ? this.queryList.prop('first') : this.queryList;
       updateStmts.push(
           this.ownerDirectiveExpression.prop(this.meta.propertyName).set(valueExpr).toStmt());
@@ -109,7 +110,9 @@ function mapNestedViews(
   ]);
 }
 
-export function createQueryList(propertyName: string, compileView: CompileView): o.Expression {
+export function createQueryList(
+    query: CompileQueryMetadata, directiveInstance: o.Expression, propertyName: string,
+    compileView: CompileView): o.Expression {
   compileView.fields.push(new o.ClassField(
       propertyName, o.importType(createIdentifier(Identifiers.QueryList), [o.DYNAMIC_TYPE])));
   const expr = o.THIS_EXPR.prop(propertyName);

modules/@angular/compiler/src/view_compiler/compile_view.ts

@@ -7,11 +7,11 @@
  */
 
 import {AnimationEntryCompileResult} from '../animation/animation_compiler';
-import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompilePipeSummary, tokenName} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompilePipeSummary, tokenName, viewClassName} from '../compile_metadata';
 import {EventHandlerVars, NameResolver} from '../compiler_util/expression_converter';
-import {createPureProxy} from '../compiler_util/identifier_util';
 import {CompilerConfig} from '../config';
 import {isPresent} from '../facade/lang';
+import {Identifiers, createIdentifier} from '../identifiers';
 import * as o from '../output/output_ast';
 import {ViewType} from '../private_import_core';
 
@@ -19,8 +19,8 @@ import {CompileElement, CompileNode} from './compile_element';
 import {CompileMethod} from './compile_method';
 import {CompilePipe} from './compile_pipe';
 import {CompileQuery, addQueryToTokenMap, createQueryList} from './compile_query';
-import {ComponentFactoryDependency, DirectiveWrapperDependency, ViewClassDependency} from './deps';
-import {getPropertyInView, getViewClassName} from './util';
+import {ComponentFactoryDependency, ComponentViewDependency, DirectiveWrapperDependency} from './deps';
+import {getPropertyInView} from './util';
 
 export enum CompileViewRootNodeType {
   Node,
@@ -86,7 +86,7 @@ export class CompileView implements NameResolver {
       public animations: AnimationEntryCompileResult[], public viewIndex: number,
       public declarationElement: CompileElement, public templateVariableBindings: string[][],
       public targetDependencies:
-          Array<ViewClassDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {
+          Array<ComponentViewDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {
     this.createMethod = new CompileMethod(this);
     this.animationBindingsMethod = new CompileMethod(this);
     this.injectorGetMethod = new CompileMethod(this);
@@ -102,7 +102,7 @@ export class CompileView implements NameResolver {
     this.detachMethod = new CompileMethod(this);
 
     this.viewType = getViewType(component, viewIndex);
-    this.className = getViewClassName(component, viewIndex);
+    this.className = viewClassName(component.type.reference, viewIndex);
     this.classType = o.expressionType(o.variable(this.className));
     this.classExpr = o.variable(this.className);
     if (this.viewType === ViewType.COMPONENT || this.viewType === ViewType.HOST) {
@@ -118,7 +118,7 @@ export class CompileView implements NameResolver {
       const directiveInstance = o.THIS_EXPR.prop('context');
       this.component.viewQueries.forEach((queryMeta, queryIndex) => {
         const propName = `_viewQuery_${tokenName(queryMeta.selectors[0])}_${queryIndex}`;
-        const queryList = createQueryList(propName, this);
+        const queryList = createQueryList(queryMeta, directiveInstance, propName, this);
         const query = new CompileQuery(queryMeta, queryList, directiveInstance, this);
         addQueryToTokenMap(viewQueries, query);
       });

modules/@angular/compiler/src/view_compiler/constants.ts

@@ -11,7 +11,7 @@ import {ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 import {createEnumExpression} from '../compiler_util/identifier_util';
 import {Identifiers} from '../identifiers';
 import * as o from '../output/output_ast';
-import {ViewType} from '../private_import_core';
+import {ChangeDetectorStatus, ViewType} from '../private_import_core';
 
 export class ViewTypeEnum {
   static fromValue(value: ViewType): o.Expression {
@@ -25,6 +25,12 @@ export class ViewEncapsulationEnum {
   }
 }
 
+export class ChangeDetectionStrategyEnum {
+  static fromValue(value: ChangeDetectionStrategy): o.Expression {
+    return createEnumExpression(Identifiers.ChangeDetectionStrategy, value);
+  }
+}
+
 export class ChangeDetectorStatusEnum {
   static fromValue(value: ChangeDetectorStatusEnum): o.Expression {
     return createEnumExpression(Identifiers.ChangeDetectorStatus, value);
@@ -41,6 +47,7 @@ export class ViewConstructorVars {
 export class ViewProperties {
   static renderer = o.THIS_EXPR.prop('renderer');
   static viewUtils = o.THIS_EXPR.prop('viewUtils');
+  static throwOnChange = o.THIS_EXPR.prop('throwOnChange');
 }
 
 export class InjectMethodVars {
@@ -48,9 +55,3 @@ export class InjectMethodVars {
   static requestNodeIndex = o.variable('requestNodeIndex');
   static notFoundResult = o.variable('notFoundResult');
 }
-
-export class DetectChangesVars {
-  static throwOnChange = o.variable(`throwOnChange`);
-  static changes = o.variable(`changes`);
-  static changed = o.variable(`changed`);
-}

modules/@angular/compiler/src/view_compiler/deps.ts

@@ -8,19 +8,26 @@
 
 import {CompileIdentifierMetadata} from '../compile_metadata';
 
-export class ViewClassDependency {
-  constructor(
-      public comp: CompileIdentifierMetadata, public name: string,
-      public placeholder: CompileIdentifierMetadata) {}
+/**
+ * This is currently not read, but will probably be used in the future.
+ * We keep it as we already pass it through all the rigth places...
+ */
+export class ComponentViewDependency {
+  constructor(public compType: any) {}
 }
 
+/**
+ * This is currently not read, but will probably be used in the future.
+ * We keep it as we already pass it through all the rigth places...
+ */
 export class ComponentFactoryDependency {
-  constructor(
-      public comp: CompileIdentifierMetadata, public placeholder: CompileIdentifierMetadata) {}
+  constructor(public compType: any) {}
 }
 
+/**
+ * This is currently not read, but will probably be used in the future.
+ * We keep it as we already pass it through all the rigth places...
+ */
 export class DirectiveWrapperDependency {
-  constructor(
-      public dir: CompileIdentifierMetadata, public name: string,
-      public placeholder: CompileIdentifierMetadata) {}
+  constructor(public dirType: any) {}
 }

modules/@angular/compiler/src/view_compiler/event_binder.ts

@@ -15,6 +15,7 @@ import {BoundEventAst, DirectiveAst} from '../template_parser/template_ast';
 
 import {CompileElement} from './compile_element';
 import {CompileMethod} from './compile_method';
+import {ViewProperties} from './constants';
 import {getHandleEventMethodName} from './util';
 
 export function bindOutputs(

modules/@angular/compiler/src/view_compiler/lifecycle_binder.ts

@@ -7,6 +7,7 @@
  */
 
 import {CompileDirectiveSummary, CompilePipeSummary} from '../compile_metadata';
+import {isFirstViewCheck} from '../compiler_util/binding_util';
 import {DirectiveWrapperExpressions} from '../directive_wrapper_compiler';
 import * as o from '../output/output_ast';
 import {LifecycleHooks} from '../private_import_core';
@@ -14,10 +15,6 @@ import {DirectiveAst, ProviderAst, ProviderAstType} from '../template_parser/tem
 
 import {CompileElement} from './compile_element';
 import {CompileView} from './compile_view';
-import {DetectChangesVars} from './constants';
-
-const STATE_IS_NEVER_CHECKED = o.THIS_EXPR.prop('numberOfChecks').identical(new o.LiteralExpr(0));
-const NOT_THROW_ON_CHANGES = o.not(DetectChangesVars.throwOnChange);
 
 export function bindDirectiveAfterContentLifecycleCallbacks(
     directiveMeta: CompileDirectiveSummary, directiveInstance: o.Expression,
@@ -29,7 +26,8 @@ export function bindDirectiveAfterContentLifecycleCallbacks(
       compileElement.nodeIndex, compileElement.sourceAst);
   if (lifecycleHooks.indexOf(LifecycleHooks.AfterContentInit) !== -1) {
     afterContentLifecycleCallbacksMethod.addStmt(new o.IfStmt(
-        STATE_IS_NEVER_CHECKED, [directiveInstance.callMethod('ngAfterContentInit', []).toStmt()]));
+        isFirstViewCheck(o.THIS_EXPR),
+        [directiveInstance.callMethod('ngAfterContentInit', []).toStmt()]));
   }
   if (lifecycleHooks.indexOf(LifecycleHooks.AfterContentChecked) !== -1) {
     afterContentLifecycleCallbacksMethod.addStmt(
@@ -47,7 +45,8 @@ export function bindDirectiveAfterViewLifecycleCallbacks(
       compileElement.nodeIndex, compileElement.sourceAst);
   if (lifecycleHooks.indexOf(LifecycleHooks.AfterViewInit) !== -1) {
     afterViewLifecycleCallbacksMethod.addStmt(new o.IfStmt(
-        STATE_IS_NEVER_CHECKED, [directiveInstance.callMethod('ngAfterViewInit', []).toStmt()]));
+        isFirstViewCheck(o.THIS_EXPR),
+        [directiveInstance.callMethod('ngAfterViewInit', []).toStmt()]));
   }
   if (lifecycleHooks.indexOf(LifecycleHooks.AfterViewChecked) !== -1) {
     afterViewLifecycleCallbacksMethod.addStmt(

modules/@angular/compiler/src/view_compiler/property_binder.ts

@@ -8,19 +8,19 @@
 
 import {SecurityContext} from '@angular/core';
 
-import {createCheckBindingField, createCheckBindingStmt} from '../compiler_util/binding_util';
+import {createCheckBindingField} from '../compiler_util/binding_util';
 import {ConvertPropertyBindingResult, convertPropertyBinding} from '../compiler_util/expression_converter';
 import {createEnumExpression} from '../compiler_util/identifier_util';
-import {triggerAnimation, writeToRenderer} from '../compiler_util/render_util';
+import {createCheckAnimationBindingStmts, createCheckRenderBindingStmt} from '../compiler_util/render_util';
 import {DirectiveWrapperExpressions} from '../directive_wrapper_compiler';
 import {Identifiers, createIdentifier} from '../identifiers';
 import * as o from '../output/output_ast';
 import {isDefaultChangeDetectionStrategy} from '../private_import_core';
 import {ElementSchemaRegistry} from '../schema/element_schema_registry';
 import {BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, PropertyBindingType} from '../template_parser/template_ast';
+
 import {CompileElement, CompileNode} from './compile_element';
 import {CompileView} from './compile_view';
-import {DetectChangesVars} from './constants';
 import {getHandleEventMethodName} from './util';
 
 export function bindRenderText(
@@ -33,11 +33,15 @@ export function bindRenderText(
   }
 
   view.detectChangesRenderPropertiesMethod.resetDebugInfo(compileNode.nodeIndex, boundText);
-  view.detectChangesRenderPropertiesMethod.addStmts(createCheckBindingStmt(
-      evalResult, valueField.expression, DetectChangesVars.throwOnChange,
-      [o.THIS_EXPR.prop('renderer')
-           .callMethod('setText', [compileNode.renderNode, evalResult.currValExpr])
-           .toStmt()]));
+  view.detectChangesRenderPropertiesMethod.addStmts(evalResult.stmts);
+  view.detectChangesRenderPropertiesMethod.addStmt(
+      o.importExpr(createIdentifier(Identifiers.checkRenderText))
+          .callFn([
+            o.THIS_EXPR, compileNode.renderNode, valueField.expression,
+            valueField.expression.set(evalResult.currValExpr),
+            evalResult.forceUpdate || o.literal(false)
+          ])
+          .toStmt());
 }
 
 export function bindRenderInputs(
@@ -54,31 +58,27 @@ export function bindRenderInputs(
     if (!evalResult) {
       return;
     }
-    const checkBindingStmts: o.Statement[] = [];
     let compileMethod = view.detectChangesRenderPropertiesMethod;
     switch (boundProp.type) {
       case PropertyBindingType.Property:
       case PropertyBindingType.Attribute:
       case PropertyBindingType.Class:
       case PropertyBindingType.Style:
-        checkBindingStmts.push(...writeToRenderer(
-            o.THIS_EXPR, boundProp, renderNode, evalResult.currValExpr,
-            view.genConfig.logBindingUpdate));
+        compileMethod.addStmts(createCheckRenderBindingStmt(
+            o.THIS_EXPR, renderNode, boundProp, bindingField.expression, evalResult));
         break;
       case PropertyBindingType.Animation:
         compileMethod = view.animationBindingsMethod;
-        const {updateStmts, detachStmts} = triggerAnimation(
+        const {checkUpdateStmts, checkDetachStmts} = createCheckAnimationBindingStmts(
             o.THIS_EXPR, o.THIS_EXPR, boundProp, boundOutputs,
             (hasEvents ? o.THIS_EXPR.prop(getHandleEventMethodName(compileElement.nodeIndex)) :
                          o.importExpr(createIdentifier(Identifiers.noop)))
                 .callMethod(o.BuiltinMethod.Bind, [o.THIS_EXPR]),
-            compileElement.renderNode, evalResult.currValExpr, bindingField.expression);
-        checkBindingStmts.push(...updateStmts);
-        view.detachMethod.addStmts(detachStmts);
+            compileElement.renderNode, bindingField.expression, evalResult);
+        view.detachMethod.addStmts(checkDetachStmts);
+        compileMethod.addStmts(checkUpdateStmts);
         break;
     }
-    compileMethod.addStmts(createCheckBindingStmt(
-        evalResult, bindingField.expression, DetectChangesVars.throwOnChange, checkBindingStmts));
   });
 }
 
@@ -108,7 +108,7 @@ export function bindDirectiveHostProps(
       DirectiveWrapperExpressions.checkHost(
           directiveAst.hostProperties, directiveWrapperInstance, o.THIS_EXPR,
           compileElement.compViewExpr || o.THIS_EXPR, compileElement.renderNode,
-          DetectChangesVars.throwOnChange, runtimeSecurityCtxExprs));
+          runtimeSecurityCtxExprs));
 }
 
 export function bindDirectiveInputs(
@@ -132,17 +132,13 @@ export function bindDirectiveInputs(
         directiveWrapperInstance
             .callMethod(
                 `check_${input.directiveName}`,
-                [
-                  evalResult.currValExpr, DetectChangesVars.throwOnChange,
-                  evalResult.forceUpdate || o.literal(false)
-                ])
+                [o.THIS_EXPR, evalResult.currValExpr, evalResult.forceUpdate || o.literal(false)])
             .toStmt());
   });
   const isOnPushComp = directiveAst.directive.isComponent &&
       !isDefaultChangeDetectionStrategy(directiveAst.directive.changeDetection);
   const directiveDetectChangesExpr = DirectiveWrapperExpressions.ngDoCheck(
-      directiveWrapperInstance, o.THIS_EXPR, compileElement.renderNode,
-      DetectChangesVars.throwOnChange);
+      directiveWrapperInstance, o.THIS_EXPR, compileElement.renderNode);
   const directiveDetectChangesStmt = isOnPushComp ?
       new o.IfStmt(
           directiveDetectChangesExpr,

modules/@angular/compiler/src/view_compiler/query_binder.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileTokenMetadata, tokenReference} from '../compile_metadata';
+import {CompileQueryMetadata, CompileTokenMetadata, tokenReference} from '../compile_metadata';
 import * as o from '../output/output_ast';
 
 import {CompileElement} from './compile_element';
@@ -17,18 +17,16 @@ import {CompileQuery} from './compile_query';
 // as we create embedded views before the <template> elements themselves.
 export function bindQueryValues(ce: CompileElement) {
   const queriesWithReads: _QueryWithRead[] = [];
-
   ce.getProviderTokens().forEach((token) => {
     const queriesForProvider = ce.getQueriesFor(token);
     queriesWithReads.push(...queriesForProvider.map(query => new _QueryWithRead(query, token)));
   });
-
   Object.keys(ce.referenceTokens).forEach(varName => {
+    const token = ce.referenceTokens[varName];
     const varToken = {value: varName};
     queriesWithReads.push(
         ...ce.getQueriesFor(varToken).map(query => new _QueryWithRead(query, varToken)));
   });
-
   queriesWithReads.forEach((queryWithRead) => {
     let value: o.Expression;
     if (queryWithRead.read.identifier) {

modules/@angular/compiler/src/view_compiler/util.ts

@@ -9,6 +9,8 @@
 
 import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileIdentifierMetadata, CompileTokenMetadata, identifierName} from '../compile_metadata';
 import {createDiTokenExpression} from '../compiler_util/identifier_util';
+import {isPresent} from '../facade/lang';
+import {Identifiers, createIdentifier} from '../identifiers';
 import * as o from '../output/output_ast';
 import {ViewType} from '../private_import_core';
 
@@ -21,7 +23,7 @@ export function getPropertyInView(
   } else {
     let viewProp: o.Expression = o.THIS_EXPR;
     let currView: CompileView = callingView;
-    while (currView !== definedView && currView.declarationElement.view) {
+    while (currView !== definedView && isPresent(currView.declarationElement.view)) {
       currView = currView.declarationElement.view;
       viewProp = viewProp.prop('parentView');
     }
@@ -69,12 +71,6 @@ export function injectFromViewParentInjector(
   return viewExpr.callMethod('injectorGet', args);
 }
 
-export function getViewClassName(
-    component: CompileDirectiveSummary | CompileDirectiveMetadata,
-    embeddedTemplateIndex: number): string {
-  return `View_${identifierName(component.type)}${embeddedTemplateIndex}`;
-}
-
 export function getHandleEventMethodName(elementIndex: number): string {
   return `handleEvent_${elementIndex}`;
 }

modules/@angular/compiler/src/view_compiler/view_builder.ts

@@ -8,21 +8,21 @@
 
 import {ViewEncapsulation} from '@angular/core';
 
-import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileIdentifierMetadata, CompileTokenMetadata, identifierModuleUrl, identifierName} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileIdentifierMetadata, CompileTokenMetadata, identifierModuleUrl, identifierName, viewClassName} from '../compile_metadata';
 import {createSharedBindingVariablesIfNeeded} from '../compiler_util/expression_converter';
 import {createDiTokenExpression, createInlineArray} from '../compiler_util/identifier_util';
 import {isPresent} from '../facade/lang';
 import {Identifiers, createIdentifier, identifierToken} from '../identifiers';
 import {createClassStmt} from '../output/class_builder';
 import * as o from '../output/output_ast';
+import {ParseSourceSpan} from '../parse_util';
 import {ChangeDetectorStatus, ViewType, isDefaultChangeDetectionStrategy} from '../private_import_core';
 import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '../template_parser/template_ast';
 
 import {CompileElement, CompileNode} from './compile_element';
 import {CompileView, CompileViewRootNode, CompileViewRootNodeType} from './compile_view';
-import {ChangeDetectorStatusEnum, DetectChangesVars, InjectMethodVars, ViewConstructorVars, ViewEncapsulationEnum, ViewProperties, ViewTypeEnum} from './constants';
-import {ComponentFactoryDependency, DirectiveWrapperDependency, ViewClassDependency} from './deps';
-import {getViewClassName} from './util';
+import {ChangeDetectorStatusEnum, InjectMethodVars, ViewConstructorVars, ViewEncapsulationEnum, ViewProperties, ViewTypeEnum} from './constants';
+import {ComponentFactoryDependency, ComponentViewDependency, DirectiveWrapperDependency} from './deps';
 
 const IMPLICIT_TEMPLATE_VAR = '\$implicit';
 const CLASS_ATTR = 'class';
@@ -35,7 +35,8 @@ const rootSelectorVar = o.variable('rootSelector');
 export function buildView(
     view: CompileView, template: TemplateAst[],
     targetDependencies:
-        Array<ViewClassDependency|ComponentFactoryDependency|DirectiveWrapperDependency>): number {
+        Array<ComponentViewDependency|ComponentFactoryDependency|DirectiveWrapperDependency>):
+    number {
   const builderVisitor = new ViewBuilderVisitor(view, targetDependencies);
   const parentEl =
       view.declarationElement.isNull() ? view.declarationElement : view.declarationElement.parent;
@@ -65,7 +66,7 @@ class ViewBuilderVisitor implements TemplateAstVisitor {
   constructor(
       public view: CompileView,
       public targetDependencies:
-          Array<ViewClassDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {}
+          Array<ComponentViewDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {}
 
   private _isRootNode(parent: CompileElement): boolean { return parent.view !== this.view; }
 
@@ -216,9 +217,7 @@ class ViewBuilderVisitor implements TemplateAstVisitor {
     this.view.nodes.push(compileElement);
     let compViewExpr: o.ReadPropExpr = null;
     if (isPresent(component)) {
-      const nestedComponentIdentifier: CompileIdentifierMetadata = {reference: null};
-      this.targetDependencies.push(new ViewClassDependency(
-          component.type, getViewClassName(component, 0), nestedComponentIdentifier));
+      this.targetDependencies.push(new ComponentViewDependency(component.type.reference));
 
       compViewExpr = o.THIS_EXPR.prop(`compView_${nodeIndex}`);  // fix highlighting: `
       this.view.fields.push(new o.ClassField(
@@ -228,7 +227,7 @@ class ViewBuilderVisitor implements TemplateAstVisitor {
       compileElement.setComponentView(compViewExpr);
       this.view.createMethod.addStmt(
           compViewExpr
-              .set(o.importExpr(nestedComponentIdentifier).instantiate([
+              .set(o.importExpr({reference: component.componentViewType}).instantiate([
                 ViewProperties.viewUtils, o.THIS_EXPR, o.literal(nodeIndex), renderNode
               ]))
               .toStmt());
@@ -404,9 +403,8 @@ function createViewTopLevelStmts(view: CompileView, targetStatements: o.Statemen
               o.literal(view.component.template.ngContentSelectors.length),
               ViewEncapsulationEnum.fromValue(view.component.template.encapsulation),
               view.styles,
-              o.literalMap(
-                  view.animations.map((entry): [string, o.Expression] => [entry.name, entry.fnExp]),
-                  null, true),
+              o.literalMap(view.animations.map(
+                  (entry): [string, o.Expression] => [entry.name, entry.fnExp])),
             ]))
             .toDeclStmt(o.importType(createIdentifier(Identifiers.RenderComponentType))));
   }
@@ -485,9 +483,7 @@ function createViewClass(
         ],
         addReturnValuefNotEmpty(view.injectorGetMethod.finish(), InjectMethodVars.notFoundResult),
         o.DYNAMIC_TYPE),
-    new o.ClassMethod(
-        'detectChangesInternal', [new o.FnParam(DetectChangesVars.throwOnChange.name, o.BOOL_TYPE)],
-        generateDetectChangesMethod(view)),
+    new o.ClassMethod('detectChangesInternal', [], generateDetectChangesMethod(view)),
     new o.ClassMethod('dirtyParentQueriesInternal', [], view.dirtyParentQueriesMethod.finish()),
     new o.ClassMethod('destroyInternal', [], generateDestroyMethod(view)),
     new o.ClassMethod('detachInternal', [], view.detachMethod.finish()),
@@ -571,36 +567,26 @@ function generateDetectChangesMethod(view: CompileView): o.Statement[] {
   stmts.push(...view.detectChangesInInputsMethod.finish());
   view.viewContainers.forEach((viewContainer) => {
     stmts.push(
-        viewContainer.callMethod('detectChangesInNestedViews', [DetectChangesVars.throwOnChange])
+        viewContainer.callMethod('detectChangesInNestedViews', [ViewProperties.throwOnChange])
             .toStmt());
   });
   const afterContentStmts = view.updateContentQueriesMethod.finish().concat(
       view.afterContentLifecycleCallbacksMethod.finish());
   if (afterContentStmts.length > 0) {
-    stmts.push(new o.IfStmt(o.not(DetectChangesVars.throwOnChange), afterContentStmts));
+    stmts.push(new o.IfStmt(o.not(ViewProperties.throwOnChange), afterContentStmts));
   }
   stmts.push(...view.detectChangesRenderPropertiesMethod.finish());
   view.viewChildren.forEach((viewChild) => {
     stmts.push(
-        viewChild.callMethod('internalDetectChanges', [DetectChangesVars.throwOnChange]).toStmt());
+        viewChild.callMethod('internalDetectChanges', [ViewProperties.throwOnChange]).toStmt());
   });
   const afterViewStmts =
       view.updateViewQueriesMethod.finish().concat(view.afterViewLifecycleCallbacksMethod.finish());
   if (afterViewStmts.length > 0) {
-    stmts.push(new o.IfStmt(o.not(DetectChangesVars.throwOnChange), afterViewStmts));
+    stmts.push(new o.IfStmt(o.not(ViewProperties.throwOnChange), afterViewStmts));
   }
 
-  const varStmts: any[] = [];
-  const readVars = o.findReadVarNames(stmts);
-  if (readVars.has(DetectChangesVars.changed.name)) {
-    varStmts.push(DetectChangesVars.changed.set(o.literal(true)).toDeclStmt(o.BOOL_TYPE));
-  }
-  if (readVars.has(DetectChangesVars.changes.name)) {
-    varStmts.push(
-        DetectChangesVars.changes.set(o.NULL_EXPR)
-            .toDeclStmt(new o.MapType(o.importType(createIdentifier(Identifiers.SimpleChange)))));
-  }
-  varStmts.push(...createSharedBindingVariablesIfNeeded(stmts));
+  const varStmts = createSharedBindingVariablesIfNeeded(stmts);
   return varStmts.concat(stmts);
 }
 
@@ -695,6 +681,7 @@ function generateCreateEmbeddedViewsMethod(view: CompileView): o.ClassMethod {
   view.nodes.forEach((node) => {
     if (node instanceof CompileElement) {
       if (node.embeddedView) {
+        const parentNodeIndex = node.isRootElement() ? null : node.parent.nodeIndex;
         stmts.push(new o.IfStmt(
             nodeIndexVar.equals(o.literal(node.nodeIndex)),
             [new o.ReturnStatement(node.embeddedView.classExpr.instantiate([

modules/@angular/compiler/src/view_compiler/view_compiler.ts

@@ -16,17 +16,17 @@ import {TemplateAst} from '../template_parser/template_ast';
 
 import {CompileElement} from './compile_element';
 import {CompileView} from './compile_view';
-import {ComponentFactoryDependency, DirectiveWrapperDependency, ViewClassDependency} from './deps';
+import {ComponentFactoryDependency, ComponentViewDependency, DirectiveWrapperDependency} from './deps';
 import {bindView} from './view_binder';
 import {buildView, finishView} from './view_builder';
 
-export {ComponentFactoryDependency, DirectiveWrapperDependency, ViewClassDependency} from './deps';
+export {ComponentFactoryDependency, ComponentViewDependency, DirectiveWrapperDependency} from './deps';
 
 export class ViewCompileResult {
   constructor(
       public statements: o.Statement[], public viewClassVar: string,
       public dependencies:
-          Array<ViewClassDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {}
+          Array<ComponentViewDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {}
 }
 
 @CompilerInjectable()
@@ -38,7 +38,7 @@ export class ViewCompiler {
       pipes: CompilePipeSummary[],
       compiledAnimations: AnimationEntryCompileResult[]): ViewCompileResult {
     const dependencies:
-        Array<ViewClassDependency|ComponentFactoryDependency|DirectiveWrapperDependency> = [];
+        Array<ComponentViewDependency|ComponentFactoryDependency|DirectiveWrapperDependency> = [];
     const view = new CompileView(
         component, this._genConfig, pipes, styles, compiledAnimations, 0,
         CompileElement.createNull(), [], dependencies);

modules/@angular/compiler/test/aot/static_reflector_spec.ts

@@ -449,40 +449,6 @@ describe('StaticReflector', () => {
     expect(annotations[0].providers[0].useValue.members[0]).toEqual('staticMethod');
   });
 
-  // #13605
-  it('should not throw on unknown decorators', () => {
-    const data = Object.create(DEFAULT_TEST_DATA);
-    const file = '/tmp/src/app.component.ts';
-    data[file] = `
-      import { Component } from '@angular/core';
-
-      export const enum TypeEnum {
-        type
-      }
-
-      export function MyValidationDecorator(p1: any, p2: any): any {
-        return null;
-      }
-
-      export function ValidationFunction(a1: any): any {
-        return null;
-      }
-
-      @Component({
-        selector: 'my-app',
-        template: "<h1>Hello {{name}}</h1>",
-      })
-      export class AppComponent  {
-        name = 'Angular';
-
-        @MyValidationDecorator( TypeEnum.type, ValidationFunction({option: 'value'}))
-        myClassProp: number;
-    }`;
-    init(data);
-    const appComponent = reflector.getStaticSymbol(file, 'AppComponent');
-    expect(() => reflector.propMetadata(appComponent)).not.toThrow();
-  });
-
   describe('inheritance', () => {
     class ClassDecorator {
       constructor(public value: any) {}
@@ -521,6 +487,8 @@ describe('StaticReflector', () => {
             export class Child extends Parent {}
 
             export class ChildNoDecorators extends Parent {}
+
+            export class ChildInvalidParent extends a.InvalidParent {}
           `
       });
 
@@ -534,6 +502,10 @@ describe('StaticReflector', () => {
       expect(
           reflector.annotations(reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildNoDecorators')))
           .toEqual([new ClassDecorator('parent')]);
+
+      expect(reflector.annotations(
+                 reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildInvalidParent')))
+          .toEqual([]);
     });
 
     it('should inherit parameters', () => {
@@ -554,6 +526,8 @@ describe('StaticReflector', () => {
             export class ChildWithCtor extends Parent {
               constructor(@ParamDecorator('c') c: C) {}
             }
+
+            export class ChildInvalidParent extends a.InvalidParent {}
           `
       });
 
@@ -571,6 +545,10 @@ describe('StaticReflector', () => {
 
       expect(reflector.parameters(reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildWithCtor')))
           .toEqual([[reflector.getStaticSymbol('/tmp/src/main.ts', 'C'), new ParamDecorator('c')]]);
+
+      expect(
+          reflector.parameters(reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildInvalidParent')))
+          .toEqual([]);
     });
 
     it('should inherit property metadata', () => {
@@ -595,6 +573,8 @@ describe('StaticReflector', () => {
               @PropDecorator('c')
               c: C;
             }
+
+            export class ChildInvalidParent extends a.InvalidParent {}
           `
       });
 
@@ -611,6 +591,10 @@ describe('StaticReflector', () => {
             'b': [new PropDecorator('b1'), new PropDecorator('b2')],
             'c': [new PropDecorator('c')]
           });
+
+      expect(reflector.propMetadata(
+                 reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildInvalidParent')))
+          .toEqual({});
     });
 
     it('should inherit lifecycle hooks', () => {
@@ -625,6 +609,8 @@ describe('StaticReflector', () => {
               hook2() {}
               hook3() {}
             }
+
+            export class ChildInvalidParent extends a.InvalidParent {}
           `
       });
 
@@ -640,6 +626,10 @@ describe('StaticReflector', () => {
       expect(hooks(reflector.getStaticSymbol('/tmp/src/main.ts', 'Child'), [
         'hook1', 'hook2', 'hook3'
       ])).toEqual([true, true, true]);
+
+      expect(hooks(reflector.getStaticSymbol('/tmp/src/main.ts', 'ChildInvalidParent'), [
+        'hook1', 'hook2', 'hook3'
+      ])).toEqual([false, false, false]);
     });
   });
 

modules/@angular/compiler/test/aot/static_symbol_resolver_spec.ts

@@ -16,7 +16,7 @@ import * as ts from 'typescript';
 const TS_EXT = /(^.|(?!\.d)..)\.ts$/;
 
 describe('StaticSymbolResolver', () => {
-  const noContext = new StaticSymbol('', '');
+  const noContext = new StaticSymbol('', '', []);
   let host: StaticSymbolResolverHost;
   let symbolResolver: StaticSymbolResolver;
   let symbolCache: StaticSymbolCache;
@@ -24,10 +24,11 @@ describe('StaticSymbolResolver', () => {
   beforeEach(() => { symbolCache = new StaticSymbolCache(); });
 
   function init(
-      testData: {[key: string]: any} = DEFAULT_TEST_DATA, summaries: Summary<StaticSymbol>[] = []) {
+      testData: {[key: string]: any} = DEFAULT_TEST_DATA, summaries: Summary<StaticSymbol>[] = [],
+      summaryImportAs: {symbol: StaticSymbol, importAs: StaticSymbol}[] = []) {
     host = new MockStaticSymbolResolverHost(testData);
-    symbolResolver =
-        new StaticSymbolResolver(host, symbolCache, new MockSummaryResolver(summaries));
+    symbolResolver = new StaticSymbolResolver(
+        host, symbolCache, new MockSummaryResolver(summaries, summaryImportAs));
   }
 
   beforeEach(() => init());
@@ -137,6 +138,73 @@ describe('StaticSymbolResolver', () => {
     ]);
   });
 
+  describe('importAs', () => {
+
+    it('should calculate importAs relationship for non source files without summaries', () => {
+      init(
+          {
+            '/test.d.ts': [{
+              '__symbolic': 'module',
+              'version': 3,
+              'metadata': {
+                'a': {'__symbolic': 'reference', 'name': 'b', 'module': './test2'},
+              }
+            }],
+            '/test2.d.ts': [{
+              '__symbolic': 'module',
+              'version': 3,
+              'metadata': {
+                'b': {'__symbolic': 'reference', 'name': 'c', 'module': './test3'},
+              }
+            }]
+          },
+          []);
+      symbolResolver.getSymbolsOf('/test.d.ts');
+      symbolResolver.getSymbolsOf('/test2.d.ts');
+
+      expect(symbolResolver.getImportAs(symbolCache.get('/test2.d.ts', 'b')))
+          .toBe(symbolCache.get('/test.d.ts', 'a'));
+      expect(symbolResolver.getImportAs(symbolCache.get('/test3.d.ts', 'c')))
+          .toBe(symbolCache.get('/test.d.ts', 'a'));
+    });
+
+    it('should calculate importAs relationship for non source files with summaries', () => {
+      init(
+          {
+            '/test.ts': `
+          export {a} from './test2';
+        `
+          },
+          [], [{
+            symbol: symbolCache.get('/test2.d.ts', 'a'),
+            importAs: symbolCache.get('/test3.d.ts', 'b')
+          }]);
+      symbolResolver.getSymbolsOf('/test.ts');
+
+      expect(symbolResolver.getImportAs(symbolCache.get('/test2.d.ts', 'a')))
+          .toBe(symbolCache.get('/test3.d.ts', 'b'));
+    });
+
+    it('should calculate importAs for symbols with members based on importAs for symbols without',
+       () => {
+         init(
+             {
+               '/test.ts': `
+          export {a} from './test2';
+        `
+             },
+             [], [{
+               symbol: symbolCache.get('/test2.d.ts', 'a'),
+               importAs: symbolCache.get('/test3.d.ts', 'b')
+             }]);
+         symbolResolver.getSymbolsOf('/test.ts');
+
+         expect(symbolResolver.getImportAs(symbolCache.get('/test2.d.ts', 'a', ['someMember'])))
+             .toBe(symbolCache.get('/test3.d.ts', 'b', ['someMember']));
+       });
+
+  });
+
   it('should replace references by StaticSymbols', () => {
     init({
       '/test.ts': `
@@ -180,6 +248,42 @@ describe('StaticSymbolResolver', () => {
         .toBeFalsy();
   });
 
+  it('should fill references to ambient symbols with undefined', () => {
+    init({
+      '/test.ts': `
+        export var y = 1;
+        export var z = [window, z];
+      `
+    });
+
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', 'z')).metadata).toEqual([
+      undefined, symbolCache.get('/test.ts', 'z')
+    ]);
+  });
+
+  it('should allow to use symbols with __', () => {
+    init({
+      '/test.ts': `
+        export {__a__ as __b__} from './test2';
+        import {__c__} from './test2';
+
+        export var __x__ = 1;
+        export var __y__ = __c__;
+      `
+    });
+
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', '__x__')).metadata).toBe(1);
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', '__y__')).metadata)
+        .toBe(symbolCache.get('/test2.d.ts', '__c__'));
+    expect(symbolResolver.resolveSymbol(symbolCache.get('/test.ts', '__b__')).metadata)
+        .toBe(symbolCache.get('/test2.d.ts', '__a__'));
+
+    expect(symbolResolver.getSymbolsOf('/test.ts')).toEqual([
+      symbolCache.get('/test.ts', '__x__'), symbolCache.get('/test.ts', '__y__'),
+      symbolCache.get('/test.ts', '__b__')
+    ]);
+  });
+
   it('should be able to trace a named export', () => {
     const symbol = symbolResolver
                        .resolveSymbol(symbolResolver.getSymbolByModule(
@@ -240,7 +344,10 @@ describe('StaticSymbolResolver', () => {
 });
 
 export class MockSummaryResolver implements SummaryResolver<StaticSymbol> {
-  constructor(private summaries: Summary<StaticSymbol>[] = []) {}
+  constructor(private summaries: Summary<StaticSymbol>[] = [], private importAs: {
+    symbol: StaticSymbol,
+    importAs: StaticSymbol
+  }[] = []) {}
 
   resolveSummary(reference: StaticSymbol): Summary<StaticSymbol> {
     return this.summaries.find(summary => summary.symbol === reference);
@@ -249,6 +356,13 @@ export class MockSummaryResolver implements SummaryResolver<StaticSymbol> {
     return this.summaries.filter(summary => summary.symbol.filePath === filePath)
         .map(summary => summary.symbol);
   }
+  getImportAs(symbol: StaticSymbol): StaticSymbol {
+    const entry = this.importAs.find(entry => entry.symbol === symbol);
+    return entry ? entry.importAs : undefined;
+  }
+
+  isLibraryFile(filePath: string): boolean { return filePath.endsWith('.d.ts'); }
+  getLibraryFileName(filePath: string): string { return filePath.replace(/(\.d)?\.ts$/, '.d.ts'); }
 }
 
 export class MockStaticSymbolResolverHost implements StaticSymbolResolverHost {

modules/@angular/compiler/test/aot/summary_resolver_spec.ts

@@ -7,12 +7,12 @@
  */
 
 import {AotSummaryResolver, AotSummaryResolverHost, CompileSummaryKind, CompileTypeSummary, ResolvedStaticSymbol, StaticSymbol, StaticSymbolCache, StaticSymbolResolver} from '@angular/compiler';
-import {AotSummarySerializerHost, deserializeSummaries, serializeSummaries} from '@angular/compiler/src/aot/summary_serializer';
+import {deserializeSummaries, serializeSummaries} from '@angular/compiler/src/aot/summary_serializer';
 import * as path from 'path';
 
 import {MockStaticSymbolResolverHost, MockSummaryResolver} from './static_symbol_resolver_spec';
 
-const EXT = /\.ts$|.d.ts$/;
+const EXT = /(\.d)?\.ts$/;
 
 export function main() {
   describe('AotSummaryResolver', () => {
@@ -32,8 +32,7 @@ export function main() {
       const mockSummaryResolver = new MockSummaryResolver([]);
       const symbolResolver = new StaticSymbolResolver(
           new MockStaticSymbolResolverHost({}), symbolCache, mockSummaryResolver);
-      return serializeSummaries(
-          new MockAotSummarySerializerHost(), mockSummaryResolver, symbolResolver, symbols, types);
+      return serializeSummaries(mockSummaryResolver, symbolResolver, symbols, types).json;
     }
 
     it('should load serialized summary files', () => {
@@ -56,17 +55,48 @@ export function main() {
       expect(summaryResolver.resolveSummary(asymbol)).toBe(summaryResolver.resolveSummary(asymbol));
     });
 
-    it('should return all sumbols in a summary', () => {
+    it('should return all symbols in a summary', () => {
       const asymbol = symbolCache.get('/a.d.ts', 'a');
       init({'/a.ngsummary.json': serialize([{symbol: asymbol, metadata: 1}], [])});
       expect(summaryResolver.getSymbolsOf('/a.d.ts')).toEqual([asymbol]);
+    });
 
+    it('should fill importAs for deep symbols', () => {
+      const libSymbol = symbolCache.get('/lib.d.ts', 'Lib');
+      const srcSymbol = symbolCache.get('/src.ts', 'Src');
+      init({
+        '/src.ngsummary.json':
+            serialize([{symbol: srcSymbol, metadata: 1}, {symbol: libSymbol, metadata: 2}], [])
+      });
+      summaryResolver.getSymbolsOf('/src.d.ts');
+
+      expect(summaryResolver.getImportAs(symbolCache.get('/src.d.ts', 'Src'))).toBeFalsy();
+      expect(summaryResolver.getImportAs(libSymbol))
+          .toBe(symbolCache.get('/src.ngfactory.ts', 'Lib_1'));
+    });
+
+    describe('isLibraryFile', () => {
+      it('should use host.isSourceFile to calculate the result', () => {
+        init();
+        expect(summaryResolver.isLibraryFile('someFile.ts')).toBe(false);
+        expect(summaryResolver.isLibraryFile('someFile.d.ts')).toBe(true);
+      });
+
+      it('should calculate the result for generated files based on the result for non generated files',
+         () => {
+           init();
+           spyOn(host, 'isSourceFile').and.callThrough();
+           expect(summaryResolver.isLibraryFile('someFile.ngfactory.ts')).toBe(false);
+           expect(host.isSourceFile).toHaveBeenCalledWith('someFile.ts');
+         });
     });
   });
 }
 
 
-export class MockAotSummarySerializerHost implements AotSummarySerializerHost {
+export class MockAotSummaryResolverHost implements AotSummaryResolverHost {
+  constructor(private summaries: {[fileName: string]: string}) {}
+
   fileNameToModuleName(fileName: string): string {
     return './' + path.basename(fileName).replace(EXT, '');
   }
@@ -76,11 +106,6 @@ export class MockAotSummarySerializerHost implements AotSummarySerializerHost {
   }
 
   isSourceFile(filePath: string) { return !filePath.endsWith('.d.ts'); }
-}
-
-export class MockAotSummaryResolverHost extends MockAotSummarySerializerHost implements
-    AotSummaryResolverHost {
-  constructor(private summaries: {[fileName: string]: string}) { super(); }
 
   loadSummary(filePath: string): string { return this.summaries[filePath]; }
 }

modules/@angular/compiler/test/aot/summary_serializer_spec.ts

@@ -7,7 +7,8 @@
  */
 
 import {AotSummaryResolver, AotSummaryResolverHost, CompileSummaryKind, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, StaticSymbolResolverHost} from '@angular/compiler';
-import {AotSummarySerializerHost, deserializeSummaries, serializeSummaries, summaryFileName} from '@angular/compiler/src/aot/summary_serializer';
+import {deserializeSummaries, serializeSummaries} from '@angular/compiler/src/aot/summary_serializer';
+import {summaryFileName} from '@angular/compiler/src/aot/util';
 
 import {MockStaticSymbolResolverHost} from './static_symbol_resolver_spec';
 import {MockAotSummaryResolverHost} from './summary_resolver_spec';
@@ -42,7 +43,7 @@ export function main() {
     it('should serialize various data correctly', () => {
       init();
       const serializedData = serializeSummaries(
-          host, summaryResolver, symbolResolver,
+          summaryResolver, symbolResolver,
           [
             {
               symbol: symbolCache.get('/tmp/some_values.ts', 'Values'),
@@ -50,7 +51,9 @@ export function main() {
                 aNumber: 1,
                 aString: 'hello',
                 anArray: [1, 2],
-                aStaticSymbol: symbolCache.get('/tmp/some_symbol.ts', 'someName')
+                aStaticSymbol: symbolCache.get('/tmp/some_symbol.ts', 'someName'),
+                aStaticSymbolWithMembers:
+                    symbolCache.get('/tmp/some_symbol.ts', 'someName', ['someMember']),
               }
             },
             {
@@ -66,11 +69,11 @@ export function main() {
             summaryKind: CompileSummaryKind.Injectable,
             type: {
               reference: symbolCache.get('/tmp/some_service.ts', 'SomeService'),
-            },
+            }
           }]);
 
 
-      const summaries = deserializeSummaries(symbolCache, serializedData);
+      const summaries = deserializeSummaries(symbolCache, serializedData.json).summaries;
       expect(summaries.length).toBe(2);
 
       // Note: change from .ts to .d.ts is expected
@@ -79,7 +82,9 @@ export function main() {
         aNumber: 1,
         aString: 'hello',
         anArray: [1, 2],
-        aStaticSymbol: symbolCache.get('/tmp/some_symbol.d.ts', 'someName')
+        aStaticSymbol: symbolCache.get('/tmp/some_symbol.d.ts', 'someName'),
+        aStaticSymbolWithMembers:
+            symbolCache.get('/tmp/some_symbol.d.ts', 'someName', ['someMember'])
       });
 
       expect(summaries[1].symbol).toBe(symbolCache.get('/tmp/some_service.d.ts', 'SomeService'));
@@ -91,8 +96,8 @@ export function main() {
 
     it('should automatically add exported directives / pipes of NgModules that are not source files',
        () => {
-         init({});
-         const externalSerialized = serializeSummaries(host, summaryResolver, symbolResolver, [], [
+         init();
+         const externalSerialized = serializeSummaries(summaryResolver, symbolResolver, [], [
            <any>{
              summaryKind: CompileSummaryKind.Pipe,
              type: {
@@ -107,11 +112,11 @@ export function main() {
            }
          ]);
          init({
-           '/tmp/external.ngsummary.json': externalSerialized,
+           '/tmp/external.ngsummary.json': externalSerialized.json,
          });
 
          const serialized = serializeSummaries(
-             host, summaryResolver, symbolResolver, [], [<any>{
+             summaryResolver, symbolResolver, [], [<any>{
                summaryKind: CompileSummaryKind.NgModule,
                type: {reference: symbolCache.get('/tmp/some_module.ts', 'SomeModule')},
                exportedPipes: [
@@ -124,7 +129,7 @@ export function main() {
                ]
              }]);
 
-         const summaries = deserializeSummaries(symbolCache, serialized);
+         const summaries = deserializeSummaries(symbolCache, serialized.json).summaries;
          expect(summaries.length).toBe(3);
          expect(summaries[0].symbol).toBe(symbolCache.get('/tmp/some_module.d.ts', 'SomeModule'));
          expect(summaries[1].symbol).toBe(symbolCache.get('/tmp/external.d.ts', 'SomeExternalDir'));
@@ -134,8 +139,9 @@ export function main() {
 
     it('should automatically add the metadata of referenced symbols that are not in the soure files',
        () => {
+         init();
          const externalSerialized = serializeSummaries(
-             host, summaryResolver, symbolResolver,
+             summaryResolver, symbolResolver,
              [
                {
                  symbol: symbolCache.get('/tmp/external.ts', 'PROVIDERS'),
@@ -154,7 +160,7 @@ export function main() {
              }]);
          init(
              {
-               '/tmp/external.ngsummary.json': externalSerialized,
+               '/tmp/external.ngsummary.json': externalSerialized.json,
              },
              {
                '/tmp/local.ts': `
@@ -164,7 +170,7 @@ export function main() {
                    {__symbolic: 'module', version: 3, metadata: {'external': 'b'}}
              });
          const serialized = serializeSummaries(
-             host, summaryResolver, symbolResolver, [{
+             summaryResolver, symbolResolver, [{
                symbol: symbolCache.get('/tmp/test.ts', 'main'),
                metadata: {
                  local: symbolCache.get('/tmp/local.ts', 'local'),
@@ -174,7 +180,7 @@ export function main() {
              }],
              []);
 
-         const summaries = deserializeSummaries(symbolCache, serialized);
+         const summaries = deserializeSummaries(symbolCache, serialized.json).summaries;
          // Note: local should not show up!
          expect(summaries.length).toBe(4);
          expect(summaries[0].symbol).toBe(symbolCache.get('/tmp/test.d.ts', 'main'));
@@ -195,5 +201,28 @@ export function main() {
          expect(summaries[3].type.type.reference)
              .toBe(symbolCache.get('/tmp/external_svc.d.ts', 'SomeService'));
        });
+
+    it('should create "importAs" names for non source symbols', () => {
+      init();
+      const serialized = serializeSummaries(
+          summaryResolver, symbolResolver, [{
+            symbol: symbolCache.get('/tmp/test.ts', 'main'),
+            metadata: [
+              symbolCache.get('/tmp/external.d.ts', 'lib'),
+              symbolCache.get('/tmp/external.d.ts', 'lib', ['someMember']),
+            ]
+          }],
+          []);
+      // Note: no entry for the symbol with members!
+      expect(serialized.exportAs).toEqual([
+        {symbol: symbolCache.get('/tmp/external.d.ts', 'lib'), exportAs: 'lib_1'}
+      ]);
+
+      const deserialized = deserializeSummaries(symbolCache, serialized.json);
+      // Note: no entry for the symbol with members!
+      expect(deserialized.importAs).toEqual([
+        {symbol: symbolCache.get('/tmp/external.d.ts', 'lib'), importAs: 'lib_1'}
+      ]);
+    });
   });
 }

modules/@angular/compiler/test/directive_normalizer_spec.ts

@@ -33,6 +33,22 @@ export function main() {
              moduleUrl: SOME_MODULE_URL,
            })).toThrowError(SyntaxError, 'No template specified for component SomeComp');
          }));
+      it('should throw if template is not a string',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           expect(
+               () => normalizer.normalizeTemplate(
+                   {componentType: SomeComp, moduleUrl: SOME_MODULE_URL, template: <any>{}}))
+               .toThrowError(
+                   SyntaxError, 'The template specified for component SomeComp is not a string');
+         }));
+      it('should throw if templateUrl is not a string',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           expect(
+               () => normalizer.normalizeTemplate(
+                   {componentType: SomeComp, moduleUrl: SOME_MODULE_URL, templateUrl: <any>{}}))
+               .toThrowError(
+                   SyntaxError, 'The templateUrl specified for component SomeComp is not a string');
+         }));
     });
 
     describe('normalizeTemplateSync', () => {
@@ -535,4 +551,4 @@ function programResourceLoaderSpy(spy: SpyResourceLoader, results: {[key: string
   });
 }
 
-class SomeComp {}
+class SomeComp {}

modules/@angular/compiler/test/i18n/digest_spec.ts

@@ -6,10 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {computeMsgId, sha1} from '../../src/i18n/digest';
+import {computeMsgId, digest, sha1} from '../../src/i18n/digest';
 
 export function main(): void {
   describe('digest', () => {
+    describe('digest', () => {
+      it('must return the ID if it\'s explicit', () => {
+        expect(digest({
+          id: 'i',
+          nodes: [],
+          placeholders: {},
+          placeholderToMessage: {},
+          meaning: '',
+          description: '',
+        })).toEqual('i');
+      });
+    });
+
     describe('sha1', () => {
       it('should work on empty strings',
          () => { expect(sha1('')).toEqual('da39a3ee5e6b4b0d3255bfef95601890afd80709'); });

modules/@angular/compiler/test/i18n/extractor_merger_spec.ts

@@ -20,7 +20,10 @@ export function main() {
     describe('elements', () => {
       it('should extract from elements', () => {
         expect(extract('<div i18n="m|d|e">text<span>nested</span></div>')).toEqual([
-          [['text', '<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm', 'd|e'],
+          [
+            ['text', '<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm', 'd|e',
+            ''
+          ],
         ]);
       });
 
@@ -29,11 +32,45 @@ export function main() {
             extract(
                 '<div i18n="m1|d1"><span i18n-title="m2|d2" title="single child">nested</span></div>'))
             .toEqual([
-              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm1', 'd1'],
-              [['single child'], 'm2', 'd2'],
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm1', 'd1', ''],
+              [['single child'], 'm2', 'd2', ''],
             ]);
       });
 
+      it('should extract from attributes with id', () => {
+        expect(
+            extract(
+                '<div i18n="m1|d1@@i1"><span i18n-title="m2|d2@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [
+                ['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm1', 'd1',
+                'i1'
+              ],
+              [['single child'], 'm2', 'd2', 'i2'],
+            ]);
+      });
+
+      it('should extract from attributes without meaning and with id', () => {
+        expect(
+            extract(
+                '<div i18n="d1@@i1"><span i18n-title="d2@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], '', 'd1', 'i1'],
+              [['single child'], '', 'd2', 'i2'],
+            ]);
+      });
+
+      it('should extract from attributes with id only', () => {
+        expect(
+            extract(
+                '<div i18n="@@i1"><span i18n-title="@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], '', '', 'i1'],
+              [['single child'], '', '', 'i2'],
+            ]);
+      });
+
+
       it('should extract from ICU messages', () => {
         expect(
             extract(
@@ -43,10 +80,10 @@ export function main() {
                 [
                   '{count, plural, =0 {[<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">]}}'
                 ],
-                'm', 'd'
+                'm', 'd', ''
               ],
-              [['title'], '', ''],
-              [['desc'], '', ''],
+              [['title'], '', '', ''],
+              [['desc'], '', '', ''],
             ]);
       });
 
@@ -55,7 +92,7 @@ export function main() {
 
       it('should ignore implicit elements in translatable elements', () => {
         expect(extract('<div i18n="m|d"><p></p></div>', ['p'])).toEqual([
-          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd']
+          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd', '']
         ]);
       });
     });
@@ -64,17 +101,19 @@ export function main() {
       it('should extract from blocks', () => {
         expect(extract(`<!-- i18n: meaning1|desc1 -->message1<!-- /i18n -->
          <!-- i18n: desc2 -->message2<!-- /i18n -->
-         <!-- i18n -->message3<!-- /i18n -->`))
+         <!-- i18n -->message3<!-- /i18n -->
+         <!-- i18n: meaning4|desc4@@id4 -->message4<!-- /i18n -->
+         <!-- i18n: @@id5 -->message5<!-- /i18n -->`))
             .toEqual([
-              [['message1'], 'meaning1', 'desc1'],
-              [['message2'], '', 'desc2'],
-              [['message3'], '', ''],
+              [['message1'], 'meaning1', 'desc1', ''], [['message2'], '', 'desc2', ''],
+              [['message3'], '', '', ''], [['message4'], 'meaning4', 'desc4', 'id4'],
+              [['message5'], '', '', 'id5']
             ]);
       });
 
       it('should ignore implicit elements in blocks', () => {
         expect(extract('<!-- i18n:m|d --><p></p><!-- /i18n -->', ['p'])).toEqual([
-          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd']
+          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd', '']
         ]);
       });
 
@@ -88,7 +127,7 @@ export function main() {
                 [
                   '{count, plural, =0 {[<ph tag name="START_TAG_SPAN">html</ph name="CLOSE_TAG_SPAN">]}}'
                 ],
-                '', ''
+                '', '', ''
               ],
               [
                 [
@@ -98,15 +137,15 @@ export function main() {
                       ' name="START_TAG_SPAN">html</ph name="CLOSE_TAG_SPAN">]}}</ph>',
                   '[<ph name="INTERPOLATION">interp</ph>]'
                 ],
-                '', ''
+                '', '', ''
               ],
             ]);
       });
 
       it('should ignore other comments', () => {
-        expect(extract(`<!-- i18n: meaning1|desc1 --><!-- other -->message1<!-- /i18n -->`))
+        expect(extract(`<!-- i18n: meaning1|desc1@@id1 --><!-- other -->message1<!-- /i18n -->`))
             .toEqual([
-              [['message1'], 'meaning1', 'desc1'],
+              [['message1'], 'meaning1', 'desc1', 'id1'],
             ]);
       });
 
@@ -118,34 +157,37 @@ export function main() {
       it('should extract ICU messages from translatable elements', () => {
         // single message when ICU is the only children
         expect(extract('<div i18n="m|d">{count, plural, =0 {text}}</div>')).toEqual([
-          [['{count, plural, =0 {[text]}}'], 'm', 'd'],
+          [['{count, plural, =0 {[text]}}'], 'm', 'd', ''],
         ]);
 
         // single message when ICU is the only (implicit) children
         expect(extract('<div>{count, plural, =0 {text}}</div>', ['div'])).toEqual([
-          [['{count, plural, =0 {[text]}}'], '', ''],
+          [['{count, plural, =0 {[text]}}'], '', '', ''],
         ]);
 
         // one message for the element content and one message for the ICU
-        expect(extract('<div i18n="m|d">before{count, plural, =0 {text}}after</div>')).toEqual([
-          [['before', '<ph icu name="ICU">{count, plural, =0 {[text]}}</ph>', 'after'], 'm', 'd'],
-          [['{count, plural, =0 {[text]}}'], '', ''],
+        expect(extract('<div i18n="m|d@@i">before{count, plural, =0 {text}}after</div>')).toEqual([
+          [
+            ['before', '<ph icu name="ICU">{count, plural, =0 {[text]}}</ph>', 'after'], 'm', 'd',
+            'i'
+          ],
+          [['{count, plural, =0 {[text]}}'], '', '', ''],
         ]);
       });
 
       it('should extract ICU messages from translatable block', () => {
         // single message when ICU is the only children
         expect(extract('<!-- i18n:m|d -->{count, plural, =0 {text}}<!-- /i18n -->')).toEqual([
-          [['{count, plural, =0 {[text]}}'], 'm', 'd'],
+          [['{count, plural, =0 {[text]}}'], 'm', 'd', ''],
         ]);
 
         // one message for the block content and one message for the ICU
         expect(extract('<!-- i18n:m|d -->before{count, plural, =0 {text}}after<!-- /i18n -->'))
             .toEqual([
-              [['{count, plural, =0 {[text]}}'], '', ''],
+              [['{count, plural, =0 {[text]}}'], '', '', ''],
               [
                 ['before', '<ph icu name="ICU">{count, plural, =0 {[text]}}</ph>', 'after'], 'm',
-                'd'
+                'd', ''
               ],
             ]);
       });
@@ -156,20 +198,20 @@ export function main() {
       it('should ignore nested ICU messages', () => {
         expect(extract('<div i18n="m|d">{count, plural, =0 { {sex, select, male {m}} }}</div>'))
             .toEqual([
-              [['{count, plural, =0 {[{sex, select, male {[m]}},  ]}}'], 'm', 'd'],
+              [['{count, plural, =0 {[{sex, select, male {[m]}},  ]}}'], 'm', 'd', ''],
             ]);
       });
 
       it('should ignore implicit elements in non translatable ICU messages', () => {
-        expect(
-            extract(
-                '<div i18n="m|d">{count, plural, =0 { {sex, select, male {<p>ignore</p>}} }}</div>',
-                ['p']))
+        expect(extract(
+                   '<div i18n="m|d@@i">{count, plural, =0 { {sex, select, male {<p>ignore</p>}}' +
+                       ' }}</div>',
+                   ['p']))
             .toEqual([[
               [
                 '{count, plural, =0 {[{sex, select, male {[<ph tag name="START_PARAGRAPH">ignore</ph name="CLOSE_PARAGRAPH">]}},  ]}}'
               ],
-              'm', 'd'
+              'm', 'd', 'i'
             ]]);
       });
 
@@ -181,46 +223,45 @@ export function main() {
 
     describe('attributes', () => {
       it('should extract from attributes outside of translatable sections', () => {
-        expect(extract('<div i18n-title="m|d" title="msg"></div>')).toEqual([
-          [['msg'], 'm', 'd'],
+        expect(extract('<div i18n-title="m|d@@i" title="msg"></div>')).toEqual([
+          [['msg'], 'm', 'd', 'i'],
         ]);
       });
 
       it('should extract from attributes in translatable elements', () => {
-        expect(extract('<div i18n><p><b i18n-title="m|d" title="msg"></b></p></div>')).toEqual([
+        expect(extract('<div i18n><p><b i18n-title="m|d@@i" title="msg"></b></p></div>')).toEqual([
           [
             ['<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph' +
              ' name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'],
-            '', ''
+            '', '', ''
           ],
-          [['msg'], 'm', 'd'],
+          [['msg'], 'm', 'd', 'i'],
         ]);
       });
 
       it('should extract from attributes in translatable blocks', () => {
         expect(extract('<!-- i18n --><p><b i18n-title="m|d" title="msg"></b></p><!-- /i18n -->'))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', ''],
               [
                 ['<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph' +
                  ' name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'],
-                '', ''
+                '', '', ''
               ],
             ]);
       });
 
       it('should extract from attributes in translatable ICUs', () => {
-        expect(
-            extract(
-                '<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}<!-- /i18n -->'))
+        expect(extract(`<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d@@i" 
+                 title="msg"></b></p>}}<!-- /i18n -->`))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', 'i'],
               [
                 [
                   '{count, plural, =0 {[<ph tag name="START_PARAGRAPH"><ph tag' +
                   ' name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">]}}'
                 ],
-                '', ''
+                '', '', ''
               ],
             ]);
       });
@@ -228,7 +269,7 @@ export function main() {
       it('should extract from attributes in non translatable ICUs', () => {
         expect(extract('{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}'))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', ''],
             ]);
       });
 
@@ -239,7 +280,7 @@ export function main() {
     describe('implicit elements', () => {
       it('should extract from implicit elements', () => {
         expect(extract('<b>bold</b><i>italic</i>', ['b'])).toEqual([
-          [['bold'], '', ''],
+          [['bold'], '', '', ''],
         ]);
       });
 
@@ -251,7 +292,7 @@ export function main() {
         }).not.toThrow();
 
         expect(result).toEqual([
-          [['outer', '<ph tag name="START_TAG_DIV">inner</ph name="CLOSE_TAG_DIV">'], '', ''],
+          [['outer', '<ph tag name="START_TAG_DIV">inner</ph name="CLOSE_TAG_DIV">'], '', '', ''],
         ]);
       });
 
@@ -261,7 +302,7 @@ export function main() {
       it('should extract implicit attributes', () => {
         expect(extract('<b title="bb">bold</b><i title="ii">italic</i>', [], {'b': ['title']}))
             .toEqual([
-              [['bb'], '', ''],
+              [['bb'], '', '', ''],
             ]);
       });
     });
@@ -433,7 +474,7 @@ function extract(
   // clang-format off
   // https://github.com/angular/clang-format/issues/35
   return result.messages.map(
-    message => [serializeI18nNodes(message.nodes), message.meaning, message.description, ]) as [string[], string, string][];
+    message => [serializeI18nNodes(message.nodes), message.meaning, message.description, message.id]) as [string[], string, string][];
   // clang-format on
 }
 

modules/@angular/compiler/test/i18n/integration_spec.ts

@@ -8,6 +8,10 @@
 
 import {NgLocalization} from '@angular/common';
 import {ResourceLoader} from '@angular/compiler';
+import {MessageBundle} from '@angular/compiler/src/i18n/message_bundle';
+import {Xmb} from '@angular/compiler/src/i18n/serializers/xmb';
+import {HtmlParser} from '@angular/compiler/src/ml_parser/html_parser';
+import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/interpolation_config';
 import {Component, DebugElement, TRANSLATIONS, TRANSLATIONS_FORMAT} from '@angular/core';
 import {TestBed, async} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
@@ -32,9 +36,16 @@ export function main() {
       TestBed.configureTestingModule({declarations: [I18nComponent]});
     }));
 
+    it('should extract from templates', () => {
+      const catalog = new MessageBundle(new HtmlParser, [], {});
+      const serializer = new Xmb();
+      catalog.updateFromTemplate(HTML, '', DEFAULT_INTERPOLATION_CONFIG);
 
-    it('translate templates', () => {
-      const tb = TestBed.createComponent(I18nComponent);
+      expect(catalog.write(serializer)).toContain(XMB);
+    });
+
+    it('should translate templates', () => {
+      const tb = TestBed.overrideTemplate(I18nComponent, HTML).createComponent(I18nComponent);
       const cmp = tb.componentInstance;
       const el = tb.debugElement;
 
@@ -59,14 +70,17 @@ export function main() {
       tb.detectChanges();
       expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('un');
       expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('un');
+      expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('un');
       cmp.count = 2;
       tb.detectChanges();
       expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('deux');
       expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('deux');
+      expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('deux');
       cmp.count = 3;
       tb.detectChanges();
       expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('beaucoup');
       expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('beaucoup');
+      expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('beaucoup');
 
       cmp.sex = 'm';
       cmp.sexB = 'f';
@@ -90,8 +104,8 @@ export function main() {
           .toEqual('<h1 id="i18n-12">Balises dans les commentaires html</h1>');
       expectHtml(el, '#i18n-13')
           .toBe('<div id="i18n-13" title="dans une section traductible"></div>');
-
       expectHtml(el, '#i18n-15').toMatch(/ca <b>devrait<\/b> marcher/);
+      expectHtml(el, '#i18n-16').toMatch(/avec un ID explicite/);
     });
   });
 }
@@ -102,51 +116,13 @@ function expectHtml(el: DebugElement, cssSelector: string): any {
 
 @Component({
   selector: 'i18n-cmp',
-  template: `
-<div>
-    <h1 i18n>i18n attribute on tags</h1>
-    
-    <div id="i18n-1"><p i18n>nested</p></div>
-    
-    <div id="i18n-2"><p i18n="different meaning|">nested</p></div>
-    
-    <div id="i18n-3"><p i18n><i>with placeholders</i></p></div>
-    <div id="i18n-3b"><p i18n><i class="preserved-on-placeholders">with placeholders</i></p></div>
-    
-    <div>
-        <p id="i18n-4" i18n-title title="on not translatable node"></p>
-        <p id="i18n-5" i18n i18n-title title="on translatable node"></p>
-        <p id="i18n-6" i18n-title title></p>
-    </div>
-    
-    <!-- no ph below because the ICU node is the only child of the div, i.e. no text nodes --> 
-    <div i18n id="i18n-7">{count, plural, =0 {zero} =1 {one} =2 {two} other {<b>many</b>}}</div>
-    
-    <div i18n id="i18n-8">
-        {sex, select, m {male} f {female}}
-    </div>
-    <div i18n id="i18n-8b">
-        {sexB, select, m {male} f {female}}
-    </div>
-    
-    <div i18n id="i18n-9">{{ "count = " + count }}</div>
-    <div i18n id="i18n-10">sex = {{ sex }}</div>
-    <div i18n id="i18n-11">{{ "custom name" //i18n(ph="CUSTOM_NAME") }}</div>    
-</div>
-
-<!-- i18n -->
-    <h1 id="i18n-12" >Markers in html comments</h1>   
-    <div id="i18n-13" i18n-title title="in a translatable section"></div>
-    <div id="i18n-14">{count, plural, =0 {zero} =1 {one} =2 {two} other {<b>many</b>}}</div>
-<!-- /i18n -->
-
-<div id="i18n-15"><ng-container i18n>it <b>should</b> work</ng-container></div>
-`
+  template: '',
 })
 class I18nComponent {
   count: number;
   sex: string;
   sexB: string;
+  response: any = {getItemsList: (): any[] => []};
 }
 
 class FrLocalization extends NgLocalization {
@@ -182,14 +158,13 @@ const XTB = `
     <ph name="START_TAG_DIV_1"/><ph name="ICU"/><ph name="CLOSE_TAG_DIV"></ph>
 </translation>
   <translation id="1491627405349178954">ca <ph name="START_BOLD_TEXT"/>devrait<ph name="CLOSE_BOLD_TEXT"/> marcher</translation>
+  <translation id="i18n16">avec un ID explicite</translation>
+  <translation id="i18n17">{VAR_PLURAL, plural, =0 {zero} =1 {un} =2 {deux} other {<ph 
+  name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>beaucoup<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</translation>
+  <translation id="4085484936881858615">{VAR_PLURAL, plural, =0 {Pas de réponse} =1 {une réponse} other {<ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph> réponse} }</translation>  
 </translationbundle>`;
 
-// unused, for reference only
-// can be generated from xmb_spec as follow:
-// `fit('extract xmb', () => { console.log(toXmb(HTML)); });`
-const XMB = `
-<messagebundle>
-  <msg id="615790887472569365">i18n attribute on tags</msg>
+const XMB = ` <msg id="615790887472569365">i18n attribute on tags</msg>
   <msg id="3707494640264351337">nested</msg>
   <msg id="5539162898278769904" meaning="different meaning">nested</msg>
   <msg id="3780349238193953556"><ph name="START_ITALIC_TEXT"><ex>&lt;i&gt;</ex></ph>with placeholders<ph name="CLOSE_ITALIC_TEXT"><ex>&lt;/i&gt;</ex></ph></msg>
@@ -197,20 +172,22 @@ const XMB = `
   <msg id="8670732454866344690">on translatable node</msg>
   <msg id="4593805537723189714">{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
   <msg id="1746565782635215">
-        <ph name="ICU"/>
+        <ph name="ICU"><ex>ICU</ex></ph>
     </msg>
   <msg id="5868084092545682515">{VAR_SELECT, select, m {male} f {female} }</msg>
-  <msg id="4851788426695310455"><ph name="INTERPOLATION"/></msg>
-  <msg id="9013357158046221374">sex = <ph name="INTERPOLATION"/></msg>
-  <msg id="8324617391167353662"><ph name="CUSTOM_NAME"/></msg>
+  <msg id="4851788426695310455"><ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
+  <msg id="9013357158046221374">sex = <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
+  <msg id="8324617391167353662"><ph name="CUSTOM_NAME"><ex>CUSTOM_NAME</ex></ph></msg>
   <msg id="7685649297917455806">in a translatable section</msg>
   <msg id="2387287228265107305">
     <ph name="START_HEADING_LEVEL1"><ex>&lt;h1&gt;</ex></ph>Markers in html comments<ph name="CLOSE_HEADING_LEVEL1"><ex>&lt;/h1&gt;</ex></ph>   
     <ph name="START_TAG_DIV"><ex>&lt;div&gt;</ex></ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
-    <ph name="START_TAG_DIV_1"><ex>&lt;div&gt;</ex></ph><ph name="ICU"/><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
+    <ph name="START_TAG_DIV_1"><ex>&lt;div&gt;</ex></ph><ph name="ICU"><ex>ICU</ex></ph><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
 </msg>
   <msg id="1491627405349178954">it <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>should<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> work</msg>
-</messagebundle>`;
+  <msg id="i18n16">with an explicit ID</msg>
+  <msg id="i18n17">{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
+  <msg id="4085484936881858615" desc="desc">{VAR_PLURAL, plural, =0 {Found no results} =1 {Found one result} other {Found <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph> results} }</msg>`;
 
 const HTML = `
 <div>
@@ -252,6 +229,9 @@ const HTML = `
 
 <div id="i18n-15"><ng-container i18n>it <b>should</b> work</ng-container></div>
 
+<div id="i18n-16" i18n="@@i18n16">with an explicit ID</div>
+<div id="i18n-17" i18n="@@i18n17">{count, plural, =0 {zero} =1 {one} =2 {two} other {<b>many</b>}}</div>
+
 <!-- make sure that ICU messages are not treated as text nodes -->
 <div i18n="desc">{
     response.getItemsList().length,
@@ -260,6 +240,4 @@ const HTML = `
     =1 {Found one result}
     other {Found {{response.getItemsList().length}} results}
 }</div>
-
-<div i18n id="i18n-18">foo<a i18n-title title="in a translatable section">bar</a></div>
 `;

modules/@angular/compiler/test/i18n/serializers/xliff_spec.ts

@@ -18,6 +18,8 @@ const HTML = `
 <p i18n-title title="translatable attribute">not translatable</p>
 <p i18n>translatable element <b>with placeholders</b> {{ interpolation}}</p>
 <p i18n="m|d">foo</p>
+<p i18n="m|d@@i">foo</p>
+<p i18n="@@bar">foo</p>
 <p i18n="ph names"><br><img><div></div></p>
 `;
 
@@ -39,6 +41,16 @@ const WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
         <note priority="1" from="description">d</note>
         <note priority="1" from="meaning">m</note>
       </trans-unit>
+      <trans-unit id="i" datatype="html">
+        <source>foo</source>
+        <target/>
+        <note priority="1" from="description">d</note>
+        <note priority="1" from="meaning">m</note>
+      </trans-unit>
+      <trans-unit id="bar" datatype="html">
+        <source>foo</source>
+        <target/>
+      </trans-unit>
       <trans-unit id="d7fa2d59aaedcaa5309f13028c59af8c85b8c49d" datatype="html">
         <source><x id="LINE_BREAK" ctype="lb"/><x id="TAG_IMG" ctype="image"/><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
         <target/>
@@ -67,6 +79,16 @@ const LOAD_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
         <note priority="1" from="description">d</note>
         <note priority="1" from="meaning">m</note>
       </trans-unit>
+      <trans-unit id="i" datatype="html">
+        <source>foo</source>
+        <target>toto</target>
+        <note priority="1" from="description">d</note>
+        <note priority="1" from="meaning">m</note>
+      </trans-unit>
+      <trans-unit id="bar" datatype="html">
+        <source>foo</source>
+        <target>tata</target>
+      </trans-unit>
       <trans-unit id="d7fa2d59aaedcaa5309f13028c59af8c85b8c49d" datatype="html">
         <source><x id="LINE_BREAK" ctype="lb"/><x id="TAG_IMG" ctype="image"/><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
         <target><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/><x id="TAG_IMG" ctype="image"/><x id="LINE_BREAK" ctype="lb"/></target>
@@ -107,6 +129,8 @@ export function main(): void {
           'ec1d033f2436133c14ab038286c4f5df4697484a':
               '<ph name="INTERPOLATION"/> footnemele elbatalsnart <ph name="START_BOLD_TEXT"/>sredlohecalp htiw<ph name="CLOSE_BOLD_TEXT"/>',
           'db3e0a6a5a96481f60aec61d98c3eecddef5ac23': 'oof',
+          'i': 'toto',
+          'bar': 'tata',
           'd7fa2d59aaedcaa5309f13028c59af8c85b8c49d':
               '<ph name="START_TAG_DIV"/><ph name="CLOSE_TAG_DIV"/><ph name="TAG_IMG"/><ph name="LINE_BREAK"/>',
         });

modules/@angular/compiler/test/i18n/serializers/xmb_spec.ts

@@ -18,6 +18,9 @@ export function main(): void {
 <p i18n>translatable element <b>with placeholders</b> {{ interpolation}}</p>
 <!-- i18n -->{ count, plural, =0 {<p>test</p>}}<!-- /i18n -->
 <p i18n="m|d">foo</p>
+<p i18n="m|d@@i">foo</p>
+<p i18n="@@bar">foo</p>
+<p i18n="@@baz">{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>
 <p i18n>{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>`;
 
     const XMB = `<?xml version="1.0" encoding="UTF-8" ?>
@@ -46,6 +49,9 @@ export function main(): void {
   <msg id="7056919470098446707">translatable element <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>with placeholders<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> <ph name="INTERPOLATION"><ex>INTERPOLATION</ex></ph></msg>
   <msg id="2981514368455622387">{VAR_PLURAL, plural, =0 {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>test<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} }</msg>
   <msg id="7999024498831672133" desc="d" meaning="m">foo</msg>
+  <msg id="i" desc="d" meaning="m">foo</msg>
+  <msg id="bar">foo</msg>
+  <msg id="baz">{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} } } }</msg>
   <msg id="2015957479576096115">{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} } } }</msg>
 </messagebundle>
 `;

modules/@angular/compiler/test/i18n/translation_bundle_spec.ts

@@ -21,7 +21,7 @@ export function main(): void {
     it('should translate a plain message', () => {
       const msgMap = {foo: [new i18n.Text('bar', null)]};
       const tb = new TranslationBundle(msgMap, (_) => 'foo');
-      const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
+      const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
       expect(serializeNodes(tb.get(msg))).toEqual(['bar']);
     });
 
@@ -36,7 +36,7 @@ export function main(): void {
         ph1: '*phContent*',
       };
       const tb = new TranslationBundle(msgMap, (_) => 'foo');
-      const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd');
+      const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd', 'i');
       expect(serializeNodes(tb.get(msg))).toEqual(['bar*phContent*']);
     });
 
@@ -51,8 +51,8 @@ export function main(): void {
           new i18n.Text('*refMsg*', null),
         ],
       };
-      const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
-      const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd');
+      const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+      const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd', 'i');
       let count = 0;
       const digest = (_: any) => count++ ? 'ref' : 'foo';
       const tb = new TranslationBundle(msgMap, digest);
@@ -69,13 +69,13 @@ export function main(): void {
           ]
         };
         const tb = new TranslationBundle(msgMap, (_) => 'foo');
-        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
+        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
         expect(() => tb.get(msg)).toThrowError(/Unknown placeholder/);
       });
 
       it('should report missing translation', () => {
         const tb = new TranslationBundle({}, (_) => 'foo');
-        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
+        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
         expect(() => tb.get(msg)).toThrowError(/Missing translation for message foo/);
       });
 
@@ -83,8 +83,8 @@ export function main(): void {
         const msgMap = {
           foo: [new i18n.Placeholder('', 'ph1', span)],
         };
-        const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
-        const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd');
+        const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+        const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd', 'i');
         let count = 0;
         const digest = (_: any) => count++ ? 'ref' : 'foo';
         const tb = new TranslationBundle(msgMap, digest);
@@ -102,7 +102,7 @@ export function main(): void {
           ph1: '</b>',
         };
         const tb = new TranslationBundle(msgMap, (_) => 'foo');
-        const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd');
+        const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd', 'i');
         expect(() => tb.get(msg)).toThrowError(/Unexpected closing tag "b"/);
       });
     });

modules/@angular/compiler/test/metadata_resolver_spec.ts

@@ -222,6 +222,27 @@ export function main() {
                  SyntaxError, `Can't resolve all parameters for NonAnnotatedService: (?).`);
        }));
 
+    it('should throw with descriptive error message when encounter invalid provider',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({providers: [{provide: SimpleService, useClass: undefined}]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(
+                 SyntaxError, /Invalid provider for SimpleService. useClass cannot be undefined./);
+       }));
+
+    it('should throw with descriptive error message when provider is undefined',
+       inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
+         @NgModule({providers: [undefined]})
+         class SomeModule {
+         }
+
+         expect(() => resolver.loadNgModuleDirectiveAndPipeMetadata(SomeModule, true))
+             .toThrowError(SyntaxError, /Encountered undefined provider!/);
+       }));
+
     it('should throw with descriptive error message when one of providers is not present',
        inject([CompileMetadataResolver], (resolver: CompileMetadataResolver) => {
          @NgModule({declarations: [MyBrokenComp3]})

modules/@angular/compiler/test/output/js_emitter_spec.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {StaticSymbol} from '@angular/compiler/src/aot/static_symbol';
 import {CompileIdentifierMetadata} from '@angular/compiler/src/compile_metadata';
 import {JavaScriptEmitter} from '@angular/compiler/src/output/js_emitter';
 import * as o from '@angular/compiler/src/output/output_ast';
@@ -15,16 +16,17 @@ const someModuleUrl = 'somePackage/somePath';
 const anotherModuleUrl = 'somePackage/someOtherPath';
 
 const sameModuleIdentifier: CompileIdentifierMetadata = {
-  reference: {name: 'someLocalId', filePath: someModuleUrl}
+  reference: new StaticSymbol(someModuleUrl, 'someLocalId', [])
 };
 const externalModuleIdentifier: CompileIdentifierMetadata = {
-  reference: {name: 'someExternalId', filePath: anotherModuleUrl}
+  reference: new StaticSymbol(anotherModuleUrl, 'someExternalId', [])
 };
 
 class SimpleJsImportGenerator implements ImportResolver {
   fileNameToModuleName(importedUrlStr: string, moduleUrlStr: string): string {
     return importedUrlStr;
   }
+  getImportAs(symbol: StaticSymbol): StaticSymbol { return null; }
 }
 
 export function main() {
@@ -33,11 +35,13 @@ export function main() {
   // - declaring fields
 
   describe('JavaScriptEmitter', () => {
+    let importResolver: ImportResolver;
     let emitter: JavaScriptEmitter;
     let someVar: o.ReadVarExpr;
 
     beforeEach(() => {
-      emitter = new JavaScriptEmitter(new SimpleJsImportGenerator());
+      importResolver = new SimpleJsImportGenerator();
+      emitter = new JavaScriptEmitter(importResolver);
       someVar = o.variable('someVar');
     });
 
@@ -124,6 +128,16 @@ export function main() {
       ].join('\n'));
     });
 
+    it('should support `importAs` for external identifiers', () => {
+      spyOn(importResolver, 'getImportAs')
+          .and.returnValue(new StaticSymbol('somePackage/importAsModule', 'importAsName', []));
+      expect(emitStmt(o.importExpr(externalModuleIdentifier).toStmt())).toEqual([
+        `var import0 = re` +
+            `quire('somePackage/importAsModule');`,
+        `import0.importAsName;`
+      ].join('\n'));
+    });
+
     it('should support operators', () => {
       const lhs = o.variable('lhs');
       const rhs = o.variable('rhs');

modules/@angular/compiler/test/output/output_emitter_util.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {StaticSymbol} from '@angular/compiler/src/aot/static_symbol';
 import {CompileIdentifierMetadata} from '@angular/compiler/src/compile_metadata';
 import {assetUrl, createIdentifier} from '@angular/compiler/src/identifiers';
 import * as o from '@angular/compiler/src/output/output_ast';
@@ -262,4 +263,5 @@ export class SimpleJsImportGenerator implements ImportResolver {
   fileNameToModuleName(importedUrlStr: string, moduleUrlStr: string): string {
     return importedUrlStr;
   }
+  getImportAs(symbol: StaticSymbol): StaticSymbol { return null; }
 }

modules/@angular/compiler/test/output/ts_emitter_node_only_spec.ts

@@ -74,4 +74,5 @@ class StubReflectorHost implements StaticSymbolResolverHost {
 
 class StubImportResolver extends ImportResolver {
   fileNameToModuleName(importedFilePath: string, containingFilePath: string): string { return ''; }
+  getImportAs(symbol: StaticSymbol): StaticSymbol { return null; }
 }

modules/@angular/compiler/test/output/ts_emitter_spec.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {StaticSymbol} from '@angular/compiler/src/aot/static_symbol';
 import {CompileIdentifierMetadata} from '@angular/compiler/src/compile_metadata';
 import * as o from '@angular/compiler/src/output/output_ast';
 import {ImportResolver} from '@angular/compiler/src/output/path_util';
@@ -15,38 +16,42 @@ const someModuleUrl = 'somePackage/somePath';
 const anotherModuleUrl = 'somePackage/someOtherPath';
 
 const sameModuleIdentifier: CompileIdentifierMetadata = {
-  reference: {name: 'someLocalId', filePath: someModuleUrl}
+  reference: new StaticSymbol(someModuleUrl, 'someLocalId', [])
 };
 
 const externalModuleIdentifier: CompileIdentifierMetadata = {
-  reference: {name: 'someExternalId', filePath: anotherModuleUrl}
+  reference: new StaticSymbol(anotherModuleUrl, 'someExternalId', [])
 };
 
 class SimpleJsImportGenerator implements ImportResolver {
   fileNameToModuleName(importedUrlStr: string, moduleUrlStr: string): string {
     return importedUrlStr;
   }
+  getImportAs(symbol: StaticSymbol): StaticSymbol { return null; }
 }
 
 export function main() {
-  // Note supported features of our OutputAsti n TS:
+  // Not supported features of our OutputAst in TS:
   // - real `const` like in Dart
   // - final fields
 
   describe('TypeScriptEmitter', () => {
+    let importResolver: ImportResolver;
     let emitter: TypeScriptEmitter;
     let someVar: o.ReadVarExpr;
 
     beforeEach(() => {
-      emitter = new TypeScriptEmitter(new SimpleJsImportGenerator());
+      importResolver = new SimpleJsImportGenerator();
+      emitter = new TypeScriptEmitter(importResolver);
       someVar = o.variable('someVar');
     });
 
-    function emitStmt(stmt: o.Statement, exportedVars: string[] = null): string {
+    function emitStmt(stmt: o.Statement | o.Statement[], exportedVars: string[] = null): string {
       if (!exportedVars) {
         exportedVars = [];
       }
-      return emitter.emitStatements(someModuleUrl, [stmt], exportedVars);
+      const stmts = Array.isArray(stmt) ? stmt : [stmt];
+      return emitter.emitStatements(someModuleUrl, stmts, exportedVars);
     }
 
     it('should declare variables', () => {
@@ -59,6 +64,79 @@ export function main() {
           .toEqual(`var someVar:number = 1;`);
     });
 
+    describe('declare variables with ExternExpressions as values', () => {
+      it('should create no reexport if the identifier is in the same module', () => {
+        // identifier is in the same module -> no reexport
+        expect(emitStmt(someVar.set(o.importExpr(sameModuleIdentifier)).toDeclStmt(), ['someVar']))
+            .toEqual('export var someVar:any = someLocalId;');
+      });
+
+      it('should create no reexport if the variable is not exported', () => {
+        expect(emitStmt(someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt())).toEqual([
+          `import * as import0 from 'somePackage/someOtherPath';`,
+          `var someVar:any = import0.someExternalId;`
+        ].join('\n'));
+      });
+
+      it('should create no reexport if the variable is typed', () => {
+        expect(emitStmt(
+                   someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt(o.DYNAMIC_TYPE),
+                   ['someVar']))
+            .toEqual([
+              `import * as import0 from 'somePackage/someOtherPath';`,
+              `export var someVar:any = import0.someExternalId;`
+            ].join('\n'));
+      });
+
+      it('should create no reexport if the identifier has members', () => {
+        const externalModuleIdentifierWithMembers: CompileIdentifierMetadata = {
+          reference: new StaticSymbol(anotherModuleUrl, 'someExternalId', ['a'])
+        };
+        expect(emitStmt(
+                   someVar.set(o.importExpr(externalModuleIdentifierWithMembers)).toDeclStmt(),
+                   ['someVar']))
+            .toEqual([
+              `import * as import0 from 'somePackage/someOtherPath';`,
+              `export var someVar:any = import0.someExternalId.a;`
+            ].join('\n'));
+      });
+
+      it('should create a reexport', () => {
+        expect(
+            emitStmt(someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt(), ['someVar']))
+            .toEqual([
+              `export {someExternalId as someVar} from 'somePackage/someOtherPath';`, ``
+            ].join('\n'));
+      });
+
+      it('should create multiple reexports from the same file', () => {
+        const someVar2 = o.variable('someVar2');
+        const externalModuleIdentifier2: CompileIdentifierMetadata = {
+          reference: new StaticSymbol(anotherModuleUrl, 'someExternalId2', [])
+        };
+        expect(emitStmt(
+                   [
+                     someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt(),
+                     someVar2.set(o.importExpr(externalModuleIdentifier2)).toDeclStmt()
+                   ],
+                   ['someVar', 'someVar2']))
+            .toEqual([
+              `export {someExternalId as someVar,someExternalId2 as someVar2} from 'somePackage/someOtherPath';`,
+              ``
+            ].join('\n'));
+      });
+
+      it('should use `importAs` for reexports', () => {
+        spyOn(importResolver, 'getImportAs')
+            .and.returnValue(new StaticSymbol('somePackage/importAsModule', 'importAsName', []));
+        expect(
+            emitStmt(someVar.set(o.importExpr(externalModuleIdentifier)).toDeclStmt(), ['someVar']))
+            .toEqual([
+              `export {importAsName as someVar} from 'somePackage/importAsModule';`, ``
+            ].join('\n'));
+      });
+    });
+
     it('should read and write variables', () => {
       expect(emitStmt(someVar.toStmt())).toEqual(`someVar;`);
       expect(emitStmt(someVar.set(o.literal(1)).toStmt())).toEqual(`someVar = 1;`);
@@ -134,6 +212,14 @@ export function main() {
       ].join('\n'));
     });
 
+    it('should support `importAs` for external identifiers', () => {
+      spyOn(importResolver, 'getImportAs')
+          .and.returnValue(new StaticSymbol('somePackage/importAsModule', 'importAsName', []));
+      expect(emitStmt(o.importExpr(externalModuleIdentifier).toStmt())).toEqual([
+        `import * as import0 from 'somePackage/importAsModule';`, `import0.importAsName;`
+      ].join('\n'));
+    });
+
     it('should support operators', () => {
       const lhs = o.variable('lhs');
       const rhs = o.variable('rhs');
@@ -332,6 +418,16 @@ export function main() {
       ].join('\n'));
     });
 
+    it('should support `importAs` for external types', () => {
+      spyOn(importResolver, 'getImportAs')
+          .and.returnValue(new StaticSymbol('somePackage/importAsModule', 'importAsName', []));
+      const writeVarExpr = o.variable('a').set(o.NULL_EXPR);
+      expect(emitStmt(writeVarExpr.toDeclStmt(o.importType(externalModuleIdentifier)))).toEqual([
+        `import * as import0 from 'somePackage/importAsModule';`,
+        `var a:import0.importAsName = (null as any);`
+      ].join('\n'));
+    });
+
     it('should support expression types', () => {
       expect(emitStmt(o.variable('a')
                           .set(o.NULL_EXPR)

modules/@angular/compiler/test/template_parser/template_parser_spec.ts

@@ -1323,30 +1323,17 @@ Reference "#a" is defined several times ("<div #a></div><div [ERROR ->]#a></div>
 
         });
 
-
         it('should work with *... and use the attribute name as property binding name', () => {
           expect(humanizeTplAst(parse('<div *ngIf="test">', [ngIf]))).toEqual([
-            [EmbeddedTemplateAst],
-            [DirectiveAst, ngIf],
-            [BoundDirectivePropertyAst, 'ngIf', 'test'],
-            [ElementAst, 'div'],
-          ]);
-
-          // https://github.com/angular/angular/issues/13800
-          expect(humanizeTplAst(parse('<div *ngIf="-1">', [ngIf]))).toEqual([
-            [EmbeddedTemplateAst],
-            [DirectiveAst, ngIf],
-            [BoundDirectivePropertyAst, 'ngIf', '0 - 1'],
-            [ElementAst, 'div'],
+            [EmbeddedTemplateAst], [DirectiveAst, ngIf],
+            [BoundDirectivePropertyAst, 'ngIf', 'test'], [ElementAst, 'div']
           ]);
         });
 
         it('should work with *... and empty value', () => {
           expect(humanizeTplAst(parse('<div *ngIf>', [ngIf]))).toEqual([
-            [EmbeddedTemplateAst],
-            [DirectiveAst, ngIf],
-            [BoundDirectivePropertyAst, 'ngIf', 'null'],
-            [ElementAst, 'div'],
+            [EmbeddedTemplateAst], [DirectiveAst, ngIf],
+            [BoundDirectivePropertyAst, 'ngIf', 'null'], [ElementAst, 'div']
           ]);
         });
       });

modules/@angular/compiler/testing/index.ts

@@ -108,9 +108,12 @@ export const platformCoreDynamicTesting: (extraProviders?: any[]) => PlatformRef
         provide: COMPILER_OPTIONS,
         useValue: {
           providers: [
-            MockPipeResolver, {provide: PipeResolver, useExisting: MockPipeResolver},
-            MockDirectiveResolver, {provide: DirectiveResolver, useExisting: MockDirectiveResolver},
-            MockNgModuleResolver, {provide: NgModuleResolver, useExisting: MockNgModuleResolver}
+            MockPipeResolver,
+            {provide: PipeResolver, useExisting: MockPipeResolver},
+            MockDirectiveResolver,
+            {provide: DirectiveResolver, useExisting: MockDirectiveResolver},
+            MockNgModuleResolver,
+            {provide: NgModuleResolver, useExisting: MockNgModuleResolver},
           ]
         },
         multi: true