docs: add changelog for 4.4.6

Prior behavior for HttpClient was to parse the body as JSON when
responseType was set to 'json', even if the response was
unsuccessful. This changed due to a recent bugfix, and
unsuccessful responses had their bodies treated as strings.

There is no guarantee that if a service returns JSON in the
successful case that it will do so for errors. However, users
indicate that most APIs in the wild do work this way. Therefore,
this commit changes the error case behavior to attempt a JSON
parsing of the response body, and falls back on returning it as
a string if that fails.

PR Close #19773

.bazelrc

@@ -1,18 +1,6 @@
-# Make compilation fast, by keeping a few copies of the compilers
-# running as daemons, and cache SourceFile AST's to reduce parse time.
-build --strategy=TypeScriptCompile=worker
-build --strategy=AngularTemplateCompile=worker
-
-# Don't create bazel-* symlinks in the WORKSPACE directory.
-# These require .gitignore and may scare users.
-# Also, it's a workaround for https://github.com/bazelbuild/rules_typescript/issues/12
-# which affects the common case of having `tsconfig.json` in the WORKSPACE directory.
-#
-# Instead, you should run `bazel info bazel-bin` to find out where the outputs went.
-build --symlink_prefix=/
+# Disable sandboxing because it's too slow.
+# https://github.com/bazelbuild/bazel/issues/2424
+build --spawn_strategy=standalone
 
 # Performance: avoid stat'ing input files
 build --watchfs
-
-# Don't print all the .d.ts output locations after builds
-build --show_result=0

.circleci/config.yml

@@ -29,7 +29,7 @@ jobs:
       - restore_cache:
           key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
 
-      - run: yarn install --frozen-lockfile --non-interactive
+      - run: yarn install --freeze-lockfile --non-interactive
       - run: ./node_modules/.bin/gulp lint
 
   build:
@@ -41,8 +41,7 @@ jobs:
           key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
 
       - run: bazel run @yarn//:yarn
-      - run: bazel build packages/...
-      - run: bazel test @angular//...
+      - run: bazel build ...
       - save_cache:
           key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:

.gitignore

@@ -5,7 +5,6 @@ bazel-*
 e2e_test.*
 node_modules
 bower_components
-tools/gulp-tasks/cldr/cldr-data/
 
 # Include when developing application packages.
 pubspec.lock

.pullapprove.yml

@@ -7,12 +7,9 @@
 #
 # alexeagle - Alex Eagle
 # alxhub - Alex Rickabaugh
-# brocco - Mike Brocchi
 # chuckjaz - Chuck Jazdzewski
-# filipesilva - Filipe Silva
 # Foxandxss - Jesús Rodríguez
 # gkalpak - George Kalpakas
-# hansl - Hans Larsen
 # IgorMinar - Igor Minar
 # jasonaden - Jason Aden
 # juleskremer - Jules Kremer
@@ -63,19 +60,6 @@ groups:
       - IgorMinar
       - mhevery
 
-  bazel:
-    conditions:
-      files:
-        include:
-          - "WORKSPACE"
-          - "*.bazel"
-          - "*.bzl"
-          - "packages/bazel/*"
-    users:
-      - alexeagle #primary
-      - chuckjaz
-      - vikerman #fallback
-
   build-and-ci:
     conditions:
       files:
@@ -85,6 +69,7 @@ groups:
           - "*.lock"
           - "tools/*"
         exclude:
+          - "tools/@angular/tsc-wrapped/*"
           - "tools/public_api_guard/*"
           - "aio/*"
     users:
@@ -104,6 +89,7 @@ groups:
       - vicb
       - IgorMinar #fallback
 
+
   core:
     conditions:
       files:
@@ -147,23 +133,11 @@ groups:
       - mhevery
       - IgorMinar #fallback
 
-  compiler-cli/ngtools:
-    conditions:
-      files:
-        - "packages/compiler-cli/src/ngtools*"
-    users:
-      - hansl
-      - filipesilva #fallback
-      - brocco #fallback
-
   compiler-cli:
     conditions:
       files:
-        include:
-          - "packages/compiler-cli/*"
-          - "packages/bazel/*"
-        exclude:
-          - "packages/compiler-cli/src/ngtools*"   
+        - "tools/@angular/tsc-wrapped/*"
+        - "packages/compiler-cli/*"
     users:
       - alexeagle
       - chuckjaz
@@ -175,10 +149,7 @@ groups:
   common:
     conditions:
       files:
-        include:
-          - "packages/common/*"
-        exclude:
-          - "packages/common/http/*"
+        - "packages/common/*"
     users:
       - pkozlowski-opensource #primary
       - vicb
@@ -198,7 +169,6 @@ groups:
   http:
     conditions:
       files:
-        - "packages/common/http/*"
         - "packages/http/*"
     users:
       - vikerman #primary
@@ -269,23 +239,7 @@ groups:
       - IgorMinar #fallback
       - mhevery #fallback
 
-  service-worker:
-    conditions:
-      files:
-        - "packages/service-worker/*"
-    users:
-      - alxhub #primary
-      - gkalpak
-      - IgorMinar #fallback
-      - mhevery #fallback
 
-  elements:
-    conditions:
-      files:
-        - "packages/elements/*"
-    users:
-      - mhevery #primary
-      - IgorMinar #fallback
 
   benchpress:
     conditions:

.travis.yml

@@ -1,10 +1,12 @@
 language: node_js
 sudo: false
+# force trusty as Google Chrome addon is not supported on Precise
 dist: trusty
 node_js:
   - '6.9.5'
 
 addons:
+  chrome: stable
 #  firefox: "38.0"
   apt:
     sources:

BUILD.bazel

@@ -6,26 +6,20 @@ exports_files(["tsconfig.json"])
 # https://github.com/bazelbuild/bazel/issues/374#issuecomment-296217940
 filegroup(
     name = "node_modules",
-    # Performance workaround: list individual files
-    # Reduces the number of files as inputs to nodejs_binary:
-    # bazel query "deps(:node_modules)" | wc -l
-    # This won't scale in the general case.
-    # TODO(alexeagle): figure out what to do
-    srcs = glob(["/".join(["node_modules", pkg, "**", ext]) for pkg in [
-        "jasmine",
-        "typescript",
-        "zone.js",
-        "rxjs",
-        "@types",
-        "tsickle",
-        "hammerjs",
-        "protobufjs",
-        "bytebuffer",
-        "reflect-metadata",
-        "minimist",
-    ] for ext in [
-        "*.js",
-        "*.json",
-        "*.d.ts",
-    ]]),
+    srcs = glob([
+        # Performance workaround: list individual files
+        # This won't scale in the general case.
+        # TODO(alexeagle): figure out what to do
+        "node_modules/typescript/**",
+        "node_modules/zone.js/**",
+        "node_modules/rxjs/**/*.d.ts",
+        "node_modules/rxjs/**/*.js",
+        "node_modules/@types/**/*.d.ts",
+        "node_modules/tsickle/**",
+        "node_modules/hammerjs/**/*.d.ts",
+        "node_modules/protobufjs/**",
+        "node_modules/bytebuffer/**",
+        "node_modules/reflect-metadata/**",
+        "node_modules/minimist/**/*.js",
+    ]),
 )

CHANGELOG.md

@@ -1,236 +1,3 @@
-<a name="5.0.0"></a>
-# [5.0.0](https://github.com/angular/angular/compare/5.0.0-rc.9...5.0.0) pentagonal-donut (2017-11-01)
-
-### Features
-
-* **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([2159342](https://github.com/angular/angular/commit/2159342))
-* **animations:** report errors when invalid CSS properties are detected ([#18718](https://github.com/angular/angular/issues/18718)) ([409688f](https://github.com/angular/angular/commit/409688f)), closes [#18701](https://github.com/angular/angular/issues/18701)
-* **animations:** support :increment and :decrement transition aliases ([6f45519](https://github.com/angular/angular/commit/6f45519))
-* **animations:** support negative query limit values ([86ffacf](https://github.com/angular/angular/commit/86ffacf)), closes [#19259](https://github.com/angular/angular/issues/19259)
-* **common:** accept object map for HttpClient headers & params ([#18490](https://github.com/angular/angular/issues/18490)) ([1b1d5f1](https://github.com/angular/angular/commit/1b1d5f1))
-* **common:** add an empty DeprecatedI18NPipesModule module ([#18737](https://github.com/angular/angular/issues/18737)) ([83713dd](https://github.com/angular/angular/commit/83713dd))
-* **common:** drop use of the Intl API to improve browser support ([#18284](https://github.com/angular/angular/issues/18284)) ([079d884](https://github.com/angular/angular/commit/079d884)), closes [#10809](https://github.com/angular/angular/issues/10809) [#9524](https://github.com/angular/angular/issues/9524) [#7008](https://github.com/angular/angular/issues/7008) [#9324](https://github.com/angular/angular/issues/9324) [#7590](https://github.com/angular/angular/issues/7590) [#6724](https://github.com/angular/angular/issues/6724) [#3429](https://github.com/angular/angular/issues/3429) [#17576](https://github.com/angular/angular/issues/17576) [#17478](https://github.com/angular/angular/issues/17478) [#17319](https://github.com/angular/angular/issues/17319) [#17200](https://github.com/angular/angular/issues/17200) [#16838](https://github.com/angular/angular/issues/16838) [#16624](https://github.com/angular/angular/issues/16624) [#16625](https://github.com/angular/angular/issues/16625) [#16591](https://github.com/angular/angular/issues/16591) [#14131](https://github.com/angular/angular/issues/14131) [#12632](https://github.com/angular/angular/issues/12632) [#11376](https://github.com/angular/angular/issues/11376) [#11187](https://github.com/angular/angular/issues/11187)
-* **common:** generate `closure-locale.ts` to tree shake locale data ([#18907](https://github.com/angular/angular/issues/18907)) ([4878936](https://github.com/angular/angular/commit/4878936))
-* **common:** mark NgTemplateOutlet API as stable ([0a73e8d](https://github.com/angular/angular/commit/0a73e8d))
-* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([06d01b2](https://github.com/angular/angular/commit/06d01b2))
-* **compiler-cli:** lower metadata `useValue` and `data` literal fields ([#18905](https://github.com/angular/angular/issues/18905)) ([0e64261](https://github.com/angular/angular/commit/0e64261))
-* **compiler:** add representation of placeholders to xliff & xmb ([b3085e9](https://github.com/angular/angular/commit/b3085e9)), closes [#17345](https://github.com/angular/angular/issues/17345)
-* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
-* **compiler:** deprecate i18n comments in favor of `ng-container` ([#18998](https://github.com/angular/angular/issues/18998)) ([66a5dab](https://github.com/angular/angular/commit/66a5dab))
-* **compiler:** enabled strict checking of parameters to an `@Injectable` ([#19412](https://github.com/angular/angular/issues/19412)) ([dfb8d21](https://github.com/angular/angular/commit/dfb8d21))
-* **compiler:** make `.ngsummary.json` files portable ([2572bf5](https://github.com/angular/angular/commit/2572bf5))
-* **compiler:** reuse the TypeScript typecheck for template typechecking. ([#19152](https://github.com/angular/angular/issues/19152)) ([996c7c2](https://github.com/angular/angular/commit/996c7c2))
-* **compiler:** set `enableLegacyTemplate` to false by default ([#18756](https://github.com/angular/angular/issues/18756)) ([56238fe](https://github.com/angular/angular/commit/56238fe))
-* **compiler:** use typescript for resolving resource paths ([43226cb](https://github.com/angular/angular/commit/43226cb))
-* **core:** Create StaticInjector which does not depend on Reflect polyfill. ([d9d00bd](https://github.com/angular/angular/commit/d9d00bd))
-* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
-* **core:** support for bootstrap with custom zone ([#17672](https://github.com/angular/angular/issues/17672)) ([344a5ca](https://github.com/angular/angular/commit/344a5ca))
-* **forms:** add default updateOn values for groups and arrays ([#18536](https://github.com/angular/angular/issues/18536)) ([ff5c58b](https://github.com/angular/angular/commit/ff5c58b))
-* **forms:** add options arg to abstract controls ([ebef5e6](https://github.com/angular/angular/commit/ebef5e6))
-* **forms:** add status to `AbstractControlDirective` ([233ef93](https://github.com/angular/angular/commit/233ef93))
-* **forms:** add updateOn and ngFormOptions to NgForm ([0d45828](https://github.com/angular/angular/commit/0d45828))
-* **forms:** add updateOn blur option to FormControls ([#18408](https://github.com/angular/angular/issues/18408)) ([333a708](https://github.com/angular/angular/commit/333a708)), closes [#7113](https://github.com/angular/angular/issues/7113)
-* **forms:** add updateOn submit option to FormControls ([#18514](https://github.com/angular/angular/issues/18514)) ([f69561b](https://github.com/angular/angular/commit/f69561b))
-* **forms:** add updateOn support to ngModelOptions ([1cfa79c](https://github.com/angular/angular/commit/1cfa79c))
-* **http**: deprecate @angular/http in favor of @angular/common/http ([#18906](https://github.com/angular/angular/issues/18906)) ([72c7b6e](https://github.com/angular/angular/commit/72c7b6e))
-* **platform-server:** add an API to transfer state from server ([#19134](https://github.com/angular/angular/issues/19134)) ([cfd9ca0](https://github.com/angular/angular/commit/cfd9ca0))
-* **platform-server:** provide a DOM implementation on the server ([2f2d5f3](https://github.com/angular/angular/commit/2f2d5f3)), closes [#14638](https://github.com/angular/angular/issues/14638)
-* **platform-server:** provide a way to hook into renderModule* ([#19023](https://github.com/angular/angular/issues/19023)) ([8dfc3c3](https://github.com/angular/angular/commit/8dfc3c3))
-* **router:** add ActivationStart/End events ([8f79150](https://github.com/angular/angular/commit/8f79150))
-* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
-* **service-worker:** introduce the [@angular](https://github.com/angular)/service-worker package ([#19274](https://github.com/angular/angular/issues/19274)) ([d442b68](https://github.com/angular/angular/commit/d442b68))
-* **upgrade:** propagate touched state of NgModelController ([59c23c7](https://github.com/angular/angular/commit/59c23c7))
-* **upgrade:** support lazy-loading Angular module into AngularJS app ([30e76fc](https://github.com/angular/angular/commit/30e76fc))
-* update angular to support TypeScript 2.4 ([ca5aeba](https://github.com/angular/angular/commit/ca5aeba))
-
-
-### Performance Improvements
-
-* **animations:** reduce size of bundle by removing AST classes ([#19539](https://github.com/angular/angular/issues/19539)) ([d5c9c5f](https://github.com/angular/angular/commit/d5c9c5f))
-* **compiler:** don’t emit summaries for jit by default ([b086891](https://github.com/angular/angular/commit/b086891))
-* **compiler:** fix perf issue in loading aot summaries in jit compiler ([fbc9537](https://github.com/angular/angular/commit/fbc9537))
-* **compiler:** make the creation of `ts.Program` faster. ([#19275](https://github.com/angular/angular/issues/19275)) ([edd5f5a](https://github.com/angular/angular/commit/edd5f5a))
-* **compiler:** only emit changed files for incremental compilation ([745b59f](https://github.com/angular/angular/commit/745b59f))
-* **compiler:** only type check input files when using bazel ([#19581](https://github.com/angular/angular/issues/19581)) ([0b06ea1](https://github.com/angular/angular/commit/0b06ea1))
-* **compiler:** only use tsickle if needed ([#19275](https://github.com/angular/angular/issues/19275)) ([8f95b75](https://github.com/angular/angular/commit/8f95b75))
-* **compiler:** skip type check and emit in bazel in some cases. ([#19646](https://github.com/angular/angular/issues/19646)) ([a22121d](https://github.com/angular/angular/commit/a22121d))
-* **compiler:** speed up loading of summaries for bazel. ([#19581](https://github.com/angular/angular/issues/19581)) ([81167d9](https://github.com/angular/angular/commit/81167d9))
-* **compiler:** speed up watch mode ([#19275](https://github.com/angular/angular/issues/19275)) ([6665d76](https://github.com/angular/angular/commit/6665d76))
-* **core:** Remove decorator DSL which depends on Reflect ([cac130e](https://github.com/angular/angular/commit/cac130e))
-* **core:** add option to remove blank text nodes from compiled templates ([d2c0d98](https://github.com/angular/angular/commit/d2c0d98))
-* **core:** use native addEventListener for faster rendering. ([#18107](https://github.com/angular/angular/issues/18107)) ([6279e50](https://github.com/angular/angular/commit/6279e50))
-* latest tsickle to tree shake: abstract class methods & interfaces ([#18236](https://github.com/angular/angular/issues/18236)) ([b7a6f52](https://github.com/angular/angular/commit/b7a6f52))
-* switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
-
-
-### BREAKING CHANGES
-
-* compiler: The method `ngGetContentSelectors()`, deprecated in Angular 4.0, has been removed.
-  Use `ComponentFactory.ngContentSelectors` instead.
-* - the Angular compiler now requires TypeScript 2.4.x.
-* router: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4.
-* compiler: the compiler option `enableLegacyTemplate` is now disabled by default as the `<template>` element has been deprecated since v4. Use `<ng-template>` instead. The option `enableLegacyTemplate` and the `<template>` element will both be removed in Angular v6.
-* core: `OpaqueToken` has been removed as it was deprecated since v4. Use `InjectionToken` instead.
-* `platformXXXX()` no longer accepts providers which depend on reflection.
-Specifically the method signature when from `Provider[]` to
-`StaticProvider[]`.
-
-Example:
-Before:
-```
-[
-  MyClass,
-  {provide: ClassA, useClass: SubClassA}
-]
-
-```
-
-After:
-```
-[
-  {provide: MyClass, deps: [Dep1,...]},
-  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
-]
-```
-
-NOTE: This only applies to platform creation and providers for the JIT
-compiler. It does not apply to `@Component` or `@NgModule` provides
-declarations.
-
-Benchpress note: Previously Benchpress also supported reflective
-provides, which now require static providers.
-
-
-#### I18n Changes (@angular/common)
-Because of multiple bugs and browser inconsistencies, we have dropped the intl api in favor of data exported from the Unicode Common Locale Data Repository (CLDR). Unfortunately we had to change the i18n pipes (date, number, currency, percent) and there are some breaking changes.
-
-  ##### I18n pipes:
-  - Breaking change:
-    - By default Angular now only contains locale data for the language `en-US`, if you set the value of `LOCALE_ID` to another locale, you will have to import new locale data for this language because we don't use the intl API anymore.
-  - Features:
-    - you don't need to use the intl polyfill for Angular anymore.
-    - all i18n pipes now have an additional last parameter `locale` which allows you to use a specific locale instead of the one defined in the token `LOCALE_ID` (whose default value is `en-US`).
-    - the new locale data extracted from CLDR are now available to developers as well and can be used through an API (which should be especially useful for library authors).
-    - you can still use the old pipes for now, but their names have been changed and they are no longer included in the `CommonModule`. To use them, you will have to import the `DeprecatedI18NPipesModule` after the `CommonModule` (the order is important):
-
-    ```ts
-    import { NgModule } from '@angular/core';
-    import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';
-
-    @NgModule({
-      imports: [
-        CommonModule,
-        // import deprecated module after
-        DeprecatedI18NPipesModule
-      ]
-    })
-    export class AppModule { }
-    ```
-
-    Don't forget that you will still need to import the intl API polyfill if you want to use those deprecated pipes.
-
-  ##### Date pipe
-  - Breaking changes:
-    - the predefined formats (`short`, `shortTime`, `shortDate`, `medium`, ...) now use the patterns given by CLDR (like it was in AngularJS) instead of the ones from the intl API. You might notice some changes, e.g. `shortDate` will be `8/15/17` instead of `8/15/2017` for `en-US`.
-    - the narrow version of eras is now `GGGGG` instead of `G`, the format `G` is now similar to `GG` and `GGG`.
-    - the narrow version of months is now `MMMMM` instead of `L`, the format `L` is now the short standalone version of months.
-    - the narrow version of the week day is now `EEEEE` instead of `E`, the format `E` is now similar to `EE` and `EEE`.
-    - the timezone `z` will now fallback to `O` and output `GMT+1` instead of the complete zone name (e.g. `Pacific Standard Time`), this is because the quantity of data required to have all the zone names in all of the existing locales is too big.
-    - the timezone `Z` will now output the ISO8601 basic format, e.g. `+0100`, you should now use `ZZZZ` to get `GMT+01:00`.
-
-    | Field type | Format        | Example value         | v4 | v5            |
-    |------------|---------------|-----------------------|----|---------------|
-    | Eras       | Narrow        | A for AD              | G  | GGGGG         |
-    | Months     | Narrow        | S for September       | L  | MMMMM         |
-    | Week day   | Narrow        | M for Monday          | E  | EEEEE         |
-    | Timezone   | Long location | Pacific Standard Time | z  | Not available |
-    | Timezone   | Long GMT      | GMT+01:00             | Z  | ZZZZ          |
-
-  - Features
-    - new predefined formats `long`, `full`, `longTime`, `fullTime`.
-    - the format `yyy` is now supported, e.g. the year `52` will be `052` and the year `2017` will be `2017`.
-    - standalone months are now supported with the formats `L` to `LLLLL`.
-    - week of the year is now supported with the formats `w` and `ww`, e.g. weeks `5` and `05`.
-    - week of the month is now supported with the format `W`, e.g. week `3`.
-    - fractional seconds are now supported with the format `S` to `SSS`.
-    - day periods for AM/PM now supports additional formats `aa`, `aaa`, `aaaa` and `aaaaa`. The formats `a` to `aaa` are similar, while `aaaa` is the wide version if available (e.g. `ante meridiem` for `am`), or equivalent to `a` otherwise, and `aaaaa` is the narrow version (e.g. `a` for `am`).
-    - extra day periods are now supported with the formats `b` to `bbbbb` (and `B` to `BBBBB` for the standalone equivalents), e.g. `morning`, `noon`, `afternoon`, ....
-    - the short non-localized timezones are now available with the format `O` to `OOOO`. The formats `O` to `OOO` will output `GMT+1` while the format `OOOO` will be `GMT+01:00`.
-    - the ISO8601 basic time zones are now available with the formats `Z` to `ZZZZZ`. The formats `Z` to `ZZZ` will output `+0100`, while the format `ZZZZ` will be `GMT+01:00` and `ZZZZZ` will be `+01:00`.
-
-  - Bug fixes
-    - the date pipe will now work exactly the same across all browsers, which will fix a lot of bugs for safari and IE.
-    - eras can now be used on their own without the date, e.g. the format `GG` will be `AD` instead of `8 15, 2017 AD`.
-
-  ##### Currency pipe
-  - Breaking change:
-    - the default value for `symbolDisplay` is now `symbol` instead of `code`. This means that by default you will see `$4.99` for `en-US` instead of `USD4.99` previously.
-
-  * Deprecation:
-    - the second parameter of the currency pipe (`symbolDisplay`) is no longer a boolean, it now takes the values `code`, `symbol` or `symbol-narrow`. A boolean value is still valid for now, but it is deprecated and it will print a warning message in the console.
-
-  - Features:
-    - you can now choose between `code`, `symbol` or `symbol-narrow` which gives you access to more options for some currencies (e.g. the canadian dollar with the code `CAD` has the symbol `CA$` and the symbol-narrow `$`).
-
-  ##### Percent pipe
-  - Breaking change
-    - if you don't specify the number of digits to round to, the local format will be used (and it usually rounds numbers to 0 digits, instead of not rounding previously), e.g. `{{ 3.141592 | percent }}` will output `314%` for the locale `en-US` instead of `314.1592%` previously.
-
-
-### Deprecated code
-* router: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4.
-* common: `NgFor` has been removed as it was deprecated since v4. Use `NgForOf` instead. This does not impact the use of`*ngFor` in your templates.
-* common: `NgTemplateOutlet#ngOutletContext` has been removed as it was deprecated since v4. Use `NgTemplateOutlet#ngTemplateOutletContext` instead.
-* core: `Testability#findBindings` has been removed as it was deprecated since v4. Use `Testability#findProviders` instead.
-* core: `DebugNode#source` has been removed as it was deprecated since v4.
-* router: the values `true`, `false`, `legacy_enabled` and `legacy_disabled` for the router parameter `initialNavigation` have been removed as they were deprecated. Use `enabled` or `disabled` instead.
-* core: `DifferFactory.create` no longer takes ChangeDetectionRef as a first argument as it was not used and deprecated since v4.
-* core: `TrackByFn` has been removed because it was deprecated since v4. Use `TrackByFunction` instead.
-* platform-webworker: `PRIMITIVE` has been removed as it was deprecated since v4. Use `SerializerTypes.PRIMITIVE` instead.
-* platform-browser: `NgProbeToken` has been removed from `@angular/platform-browser` as it was deprecated since v4. Import it from `@angular/core` instead.
-* core: `ErrorHandler` no longer takes a parameter as it was not used and deprecated since v4.
-* compiler: the option `useDebug` for the compiler has been removed as it had no effect and was deprecated since v4.
-* common: remove deprecated `NgFor` ([#18758](https://github.com/angular/angular/issues/18758)) ([ec56760](https://github.com/angular/angular/commit/ec56760))
-* common: remove deprecated `NgTemplateOutlet#ngOutletContext` ([#18780](https://github.com/angular/angular/issues/18780)) ([7522987](https://github.com/angular/angular/commit/7522987))
-* compiler: remove option `useDebug` ([#18778](https://github.com/angular/angular/issues/18778)) ([499d05d](https://github.com/angular/angular/commit/499d05d))
-* compiler: split compiler and core ([#18683](https://github.com/angular/angular/issues/18683)) ([0cc77b4](https://github.com/angular/angular/commit/0cc77b4))
-* compiler: - `@angular/platform-server` now additionally depends on
-  `@angular/platform-browser-dynamic` as a peer dependency.
-* core: remove deprecated `ChangeDetectionRef` argument in `DifferFactory#create` ([#18757](https://github.com/angular/angular/issues/18757)) ([be9713c](https://github.com/angular/angular/commit/be9713c))
-* core: remove deprecated `DebugNode#source` ([#18779](https://github.com/angular/angular/issues/18779)) ([d61b902](https://github.com/angular/angular/commit/d61b902))
-* core: remove deprecated `OpaqueToken` ([#18971](https://github.com/angular/angular/issues/18971)) ([3c4eef8](https://github.com/angular/angular/commit/3c4eef8))
-* core: remove deprecated `Testability#findBindings` ([#18782](https://github.com/angular/angular/issues/18782)) ([f2a2a6b](https://github.com/angular/angular/commit/f2a2a6b))
-* core: remove deprecated `TrackByFn` ([#18757](https://github.com/angular/angular/issues/18757)) ([596e9f4](https://github.com/angular/angular/commit/596e9f4))
-* core: remove deprecated parameter for `ErrorHandler` ([#18759](https://github.com/angular/angular/issues/18759)) ([8f41326](https://github.com/angular/angular/commit/8f41326))
-* platform-browser: remove deprecated `NgProbeToken` ([#18760](https://github.com/angular/angular/issues/18760)) ([d7f42bf](https://github.com/angular/angular/commit/d7f42bf))
-* platform-webworker: remove deprecated `PRIMITIVE` ([#18761](https://github.com/angular/angular/issues/18761)) ([a56468c](https://github.com/angular/angular/commit/a56468c))
-* router: remove deprecated `RouterOutlet` properties ([#18781](https://github.com/angular/angular/issues/18781)) ([d1c4a94](https://github.com/angular/angular/commit/d1c4a94))
-* router: remove deprecated `RouterOutlet` properties ([a9ef858](https://github.com/angular/angular/commit/a9ef858))
-* router: remove deprecated `initialNavigation` options ([#18781](https://github.com/angular/angular/issues/18781)) ([d76761b](https://github.com/angular/angular/commit/d76761b))
-- `ReflectiveInjector` is now deprecated as it will be remove. Use `Injector.create` as a replacement.
-
-
-
-<a name="4.3.1"></a>
-## [4.3.1](https://github.com/angular/angular/compare/4.3.0...4.3.1) (2017-07-19)
-
-
-### Bug Fixes
-
-* **animations:** always camelcase style property names that contain auto styles ([383d896](https://github.com/angular/angular/commit/383d896)), closes [#17938](https://github.com/angular/angular/issues/17938)
-* **animations:** capture cancelled animation styles within grouped animations ([333ffd8](https://github.com/angular/angular/commit/333ffd8)), closes [#17170](https://github.com/angular/angular/issues/17170)
-* **animations:** do not crash animations if a nested component fires CD during CD ([4c1f32b](https://github.com/angular/angular/commit/4c1f32b)), closes [#18193](https://github.com/angular/angular/issues/18193)
-* **animations:** make sure @.disabled works in non-animation components ([a5c4bb5](https://github.com/angular/angular/commit/a5c4bb5))
-* **common:** send flushed body as error instead of null ([17b7bc3](https://github.com/angular/angular/commit/17b7bc3)), closes [#18181](https://github.com/angular/angular/issues/18181)
-* **compiler:** ensure jit external id arguments names are unique ([4671168](https://github.com/angular/angular/commit/4671168))
-* **compiler-cli:** don't generate empty `<target/>` when extracting xliff ([f0476fc](https://github.com/angular/angular/commit/f0476fc)), closes [#15754](https://github.com/angular/angular/issues/15754)
-* **platform-server:** provide XhrFactory for HttpClient ([4ce29f3](https://github.com/angular/angular/commit/4ce29f3))
-* **router:** canDeactivate guards should run from bottom to top ([1ac78bf](https://github.com/angular/angular/commit/1ac78bf)), closes [#15657](https://github.com/angular/angular/issues/15657)
-* **router:** should navigate to the same url when config changes ([4340bea](https://github.com/angular/angular/commit/4340bea)), closes [#15535](https://github.com/angular/angular/issues/15535)
-* **router:** should run resolvers for the same route concurrently ([ec89f37](https://github.com/angular/angular/commit/ec89f37)), closes [#14279](https://github.com/angular/angular/issues/14279)
-* **router:** terminal route in custom matcher ([5d275e9](https://github.com/angular/angular/commit/5d275e9))
-
-
 <a name="4.4.6"></a>
 ## [4.4.6](https://github.com/angular/angular/compare/4.4.5...4.4.6) (2017-10-18)
 
@@ -262,6 +29,7 @@ Because of multiple bugs and browser inconsistencies, we have dropped the intl a
 * **tsc-wrapped:** don't rewrite imports when annotating for closure ([#19579](https://github.com/angular/angular/issues/19579)) ([c9f8718](https://github.com/angular/angular/commit/c9f8718))
 
 
+
 <a name="4.4.4"></a>
 ## [4.4.4](https://github.com/angular/angular/compare/4.4.3...4.4.4) (2017-09-28)
 
@@ -294,7 +62,8 @@ Because of multiple bugs and browser inconsistencies, we have dropped the intl a
 
 
 <a name="4.4.1"></a>
-## [4.4.1](https://github.com/angular/angular/compare/4.3.6...4.4.1) (2017-09-15)
+# [4.4.1](https://github.com/angular/angular/compare/4.3.6...4.4.1) (2017-09-15)
+
 
 
 ### Bug Fixes
@@ -362,7 +131,6 @@ Note: the 4.4.0 release on npm accidentally glitched-out midway, so we cut 4.4.1
 * **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([5e4054b](https://github.com/angular/angular/commit/5e4054b))
 * **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([e7e7622](https://github.com/angular/angular/commit/e7e7622)), closes [#18038](https://github.com/angular/angular/issues/18038)
 
-
 <a name="4.3.3"></a>
 ## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)
 
@@ -370,7 +138,6 @@ Note: the 4.4.0 release on npm accidentally glitched-out midway, so we cut 4.4.1
 
 * **compiler:** fix for element needing implicit parent placed in top-level ng-container ([f5cbc2e](https://github.com/angular/angular/commit/f5cbc2e)), closes [#18314](https://github.com/angular/angular/issues/18314)
 
-
 <a name="4.3.2"></a>
 ## [4.3.2](https://github.com/angular/angular/compare/4.3.1...4.3.2) (2017-07-26)
 

CONTRIBUTING.md

@@ -211,7 +211,6 @@ The following is the list of supported scopes:
 * **compiler**
 * **compiler-cli**
 * **core**
-* **elements**
 * **forms**
 * **http**
 * **language-service**
@@ -221,8 +220,8 @@ The following is the list of supported scopes:
 * **platform-webworker**
 * **platform-webworker-dynamic**
 * **router**
-* **service-worker**
 * **upgrade**
+* **tsc-wrapped**
 
 There are currently a few exceptions to the "use package name" rule:
 

README.md

@@ -1,6 +1,5 @@
 [![Build Status](https://travis-ci.org/angular/angular.svg?branch=master)](https://travis-ci.org/angular/angular)
 [![CircleCI](https://circleci.com/gh/angular/angular/tree/master.svg?style=shield)](https://circleci.com/gh/angular/angular/tree/master)
-[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)](https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)
 [![Join the chat at https://gitter.im/angular/angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Issue Stats](http://issuestats.com/github/angular/angular/badge/pr?style=flat)](http://issuestats.com/github/angular/angular)
 [![Issue Stats](http://issuestats.com/github/angular/angular/badge/issue?style=flat)](http://issuestats.com/github/angular/angular)
@@ -9,7 +8,7 @@
 
 [![Sauce Test Status](https://saucelabs.com/browser-matrix/angular2-ci.svg)](https://saucelabs.com/u/angular2-ci)
 
-*Safari (7+), iOS (7+) and IE mobile (11) are tested on [BrowserStack][browserstack].*
+*Safari (7+), iOS (7+), Edge (14) and IE mobile (11) are tested on [BrowserStack][browserstack].*
 
 # Angular
 
@@ -24,7 +23,7 @@ Angular is a development platform for building mobile and desktop web applicatio
 Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our
 guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help).
 
-[browserstack]: https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06
+[browserstack]: https://www.browserstack.com/
 [contributing]: http://github.com/angular/angular/blob/master/CONTRIBUTING.md
 [quickstart]: https://angular.io/docs/ts/latest/quickstart.html
 [ng]: http://angular.io

WORKSPACE

@@ -1,24 +1,17 @@
-workspace(name = "angular_src")
-
 load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
 git_repository(
-    name = "build_bazel_rules_nodejs",
-    remote = "https://github.com/bazelbuild/rules_nodejs.git",
-    # TODO(alexeagle): use the correct tag here.
-    commit = "2c6243df53fd33fdab283ebdd01582e4eb815db8",
+   name = "build_bazel_rules_typescript",
+   remote = "https://github.com/bazelbuild/rules_typescript.git",
+   tag = "0.0.5",
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
+load("@build_bazel_rules_typescript//:defs.bzl", "node_repositories")
 
-node_repositories(package_json = ["//:package.json"])
+node_repositories(package_json = "//:package.json")
 
-local_repository(
-    name = "build_bazel_rules_typescript",
-    path = "node_modules/@bazel/typescript",
-)
-
-local_repository(
-    name = "angular",
-    path = "packages/bazel",
-)
+git_repository(
+    name = "build_bazel_rules_angular",
+    remote = "https://github.com/bazelbuild/rules_angular.git",
+    tag = "0.0.1",
+)

aio/aio-builds-setup/dockerbuild/Dockerfile

@@ -156,7 +156,7 @@ RUN find $AIO_SCRIPTS_SH_DIR -maxdepth 1 -type f -printf "%P\n" \
 # Set up the Node.js scripts
 COPY scripts-js/ $AIO_SCRIPTS_JS_DIR/
 WORKDIR $AIO_SCRIPTS_JS_DIR/
-RUN yarn install --production --frozen-lockfile
+RUN yarn install --production --freeze-lockfile
 
 
 # Set up health check

aio/aio-builds-setup/scripts/create-image.sh

@@ -9,7 +9,7 @@ readonly defaultImageNameAndTag="aio-builds:latest"
 # (Necessary, because only `scripts-js/dist/` is copied to the docker image.)
 (
   cd "$SCRIPTS_JS_DIR"
-  yarn install --frozen-lockfile --non-interactive
+  yarn install --freeze-lockfile --non-interactive
   yarn build
 )
 

aio/aio-builds-setup/scripts/test.sh

@@ -7,6 +7,6 @@ source "`dirname $0`/_env.sh"
 # Test `scripts-js/`
 (
   cd "$SCRIPTS_JS_DIR"
-  yarn install --frozen-lockfile --non-interactive
+  yarn install --freeze-lockfile --non-interactive
   yarn test
 )

aio/aio-builds-setup/scripts/update-preview-server.sh

@@ -3,7 +3,7 @@
 set -eux -o pipefail
 exec 3>&1
 
-echo "\n\n[`date`] - Updating the preview server..."
+echo "[`date`] - Updating the preview server..."
 
 # Input
 readonly HOST_REPO_DIR=$1
@@ -37,7 +37,7 @@ readonly CONTAINER_NAME=aio
   fi
 
   # Create and verify a new docker image.
-  aio/aio-builds-setup/scripts/create-image.sh "$PROVISIONAL_IMAGE_NAME" --no-cache
+  aio/aio-builds-setup/scripts/create-image.sh "$PROVISIONAL_IMAGE_NAME"
   readonly imageVerified=$(sudo docker run --dns 127.0.0.1 --rm --volume $HOST_SECRETS_DIR:/aio-secrets:ro "$PROVISIONAL_IMAGE_NAME" /bin/bash -c "aio-init && aio-health-check && aio-verify-setup" >> /dev/fd/3 && echo "true" || echo "false")
 
   if [[ "$imageVerified" != "true" ]]; then

aio/content/examples/.gitignore

@@ -1,23 +1,8 @@
 # boilerplate files
-**/src/environments/environment.prod.ts
-**/src/environments/environment.ts
-**/src/assets/.gitkeep
-**/src/favicon.ico
 **/src/styles.css
 **/src/systemjs-angular-loader.js
 **/src/systemjs.config.js
 **/src/tsconfig.json
-**/src/favicon.ico
-**/src/polyfills.ts
-**/src/test.ts
-**/src/tsconfig.app.json
-**/src/tsconfig.spec.json
-**/src/typings.d.ts
-**/e2e/app.po.ts
-**/e2e/tsconfig.e2e.json
-**/.angular-cli.json
-**/.editorconfig
-**/tsconfig.json
 **/bs-config.e2e.json
 **/bs-config.json
 **/package.json
@@ -30,7 +15,11 @@
 # built files
 *.map
 _test-output
+protractor-helpers.js
+*/e2e-spec.js
 **/*.js
+**/ts/**/*.js
+**/js-es6*/**/*.js
 dist/
 
 
@@ -54,31 +43,24 @@ dist/
 **/app/**/*.ajs.js
 
 # aot
-**/*.ngsummary.json
+*/aot/**/*
+!*/aot/bs-config.json
+!*/aot/index.html
 !rollup-config.js
-aot-compiler/**/*.d.ts
-aot-compiler/**/*.factory.d.ts
 
 # i18n
 !i18n/src/systemjs-text-plugin.js
 
 # testing
 !testing/src/browser-test-shim.js
+!testing/karma*.js
 
 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js
-!webpack/src/polyfills.ts
 
 # styleguide
 !styleguide/src/systemjs.custom.js
 
-# universal
-!universal/webpack.server.config.js
-
 # plunkers
 *plnkr.no-link.html
-
-# ngUpgrade testing
-!upgrade-phonecat-*/**/karma.conf.js
-!upgrade-phonecat-*/**/karma-test-shim.js

aio/content/examples/ajs-quick-reference/e2e-spec.ts

@@ -83,7 +83,7 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
   }
 
   function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
-    let posterButton = element(by.css('app-movie-list tr > th > button'));
+    let posterButton = element(by.css('movie-list tr > th > button'));
     expect(posterButton.getText()).toBe(expectedButtonText);
 
     posterButton.click().then(function () {
@@ -92,11 +92,11 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
   }
 
   function getMovieRows() {
-    return element.all(by.css('app-movie-list tbody > tr'));
+    return element.all(by.css('movie-list tbody > tr'));
   }
 
   function testFavoriteHero(heroName: string, expectedLabel: string) {
-    let movieListComp = element(by.tagName('app-movie-list'));
+    let movieListComp = element(by.tagName('movie-list'));
     let heroInput = movieListComp.element(by.tagName('input'));
     let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
     let resultLabel = movieListComp.element(by.css('span > p'));

aio/content/examples/ajs-quick-reference/src/app/app.component.ts

@@ -4,7 +4,7 @@ import { MovieService } from './movie.service';
 import { IMovie } from './movie';
 
 @Component({
-  selector: 'app-root',
+  selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],
   providers: [ MovieService ]

aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts

@@ -8,7 +8,7 @@ import { MovieService } from './movie.service';
 
 // #docregion component
 @Component({
-  selector: 'app-movie-list',
+  selector: 'movie-list',
   templateUrl: './movie-list.component.html',
 // #docregion style-url
   styleUrls: [ './movie-list.component.css' ],

aio/content/examples/ajs-quick-reference/src/app/movie.service.ts

@@ -8,7 +8,7 @@ export class MovieService {
     return [
       {
         hero: 'Celeritas',
-        imageurl: 'assets/images/hero.png',
+        imageurl: 'images/hero.png',
         movieId: 1,
         mpaa: 'pg-13',
         releaseDate: '2015-12-19T00:00:00',
@@ -19,7 +19,7 @@ export class MovieService {
       },
       {
         hero: 'Mr. Nice',
-        imageurl: 'assets/images/villain.png',
+        imageurl: 'images/villain.png',
         movieId: 2,
         mpaa: 'pg-13',
         releaseDate: '2015-12-18T00:00:00',
@@ -30,7 +30,7 @@ export class MovieService {
       },
       {
         hero: 'Angular',
-        imageurl: 'assets/images/ng-logo.png',
+        imageurl: 'images/ng-logo.png',
         movieId: 3,
         mpaa: 'pg-13',
         releaseDate: '2015-12-17T00:00:00',

aio/content/examples/ajs-quick-reference/src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <base href="/">
     <meta charset="UTF-8">
@@ -8,10 +8,21 @@
     <!-- #docregion style -->
     <link rel="stylesheet" href="styles.css">
     <!-- #enddocregion style -->
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>
-    <app-root></app-root>
+    <my-app>Loading app...</my-app>
   </body>
 
 </html>

aio/content/examples/ajs-quick-reference/src/main.ts

@@ -1,12 +1,5 @@
 // #docregion
-import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/animations/e2e-spec.ts

@@ -29,7 +29,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(() => {
-      host = element(by.css('app-hero-list-basic'));
+      host = element(by.css('hero-list-basic'));
     });
 
     it('animates between active and inactive', () => {
@@ -58,7 +58,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(function() {
-      host = element(by.css('app-hero-list-inline-styles'));
+      host = element(by.css('hero-list-inline-styles'));
     });
 
     it('are not kept after animation', () => {
@@ -79,7 +79,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(() => {
-      host = element(by.css('app-hero-list-combined-transitions'));
+      host = element(by.css('hero-list-combined-transitions'));
     });
 
     it('animates between active and inactive', () => {
@@ -108,7 +108,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(() => {
-      host = element(by.css('app-hero-list-twoway'));
+      host = element(by.css('hero-list-twoway'));
     });
 
     it('animates between active and inactive', () => {
@@ -137,7 +137,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(() => {
-      host = element(by.css('app-hero-list-enter-leave'));
+      host = element(by.css('hero-list-enter-leave'));
     });
 
     it('adds and removes element', () => {
@@ -157,7 +157,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(function() {
-      host = element(by.css('app-hero-list-enter-leave-states'));
+      host = element(by.css('hero-list-enter-leave-states'));
     });
 
     it('adds and removes and animates between active and inactive', () => {
@@ -186,7 +186,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(function() {
-      host = element(by.css('app-hero-list-auto'));
+      host = element(by.css('hero-list-auto'));
     });
 
     it('adds and removes element', () => {
@@ -206,7 +206,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(() => {
-      host = element(by.css('app-hero-list-timings'));
+      host = element(by.css('hero-list-timings'));
     });
 
     it('adds and removes element', () => {
@@ -227,7 +227,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(() => {
-      host = element(by.css('app-hero-list-multistep'));
+      host = element(by.css('hero-list-multistep'));
     });
 
     it('adds and removes element', () => {
@@ -248,7 +248,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(() => {
-      host = element(by.css('app-hero-list-groups'));
+      host = element(by.css('hero-list-groups'));
     });
 
     it('adds and removes element', () => {
@@ -269,7 +269,7 @@ describe('Animation Tests', () => {
     let host: ElementFinder;
 
     beforeEach(() => {
-      host = element(by.css('app-hero-list-basic'));
+      host = element(by.css('hero-list-basic'));
     });
 
     it('animates between active and inactive', () => {

aio/content/examples/animations/src/app/hero-list-auto.component.ts

@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-auto',
+  selector: 'hero-list-auto',
   // #docregion template
   template: `
     <ul>

aio/content/examples/animations/src/app/hero-list-basic.component.ts

@@ -17,7 +17,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-basic',
+  selector: 'hero-list-basic',
   // #enddocregion
   /* The click event calls hero.toggleState(), which
    * causes the state of that hero to switch from

aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts

@@ -16,7 +16,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
- selector: 'app-hero-list-combined-transitions',
+ selector: 'hero-list-combined-transitions',
  // #docregion template
  template: `
    <ul>

aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts

@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-enter-leave-states',
+  selector: 'hero-list-enter-leave-states',
   // #docregion template
   template: `
     <ul>

aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts

@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-enter-leave',
+  selector: 'hero-list-enter-leave',
   // #docregion template
   template: `
     <ul>

aio/content/examples/animations/src/app/hero-list-groups.component.ts

@@ -14,7 +14,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-groups',
+  selector: 'hero-list-groups',
   template: `
     <ul>
       <li *ngFor="let hero of heroes"

aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts

@@ -15,7 +15,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
- selector: 'app-hero-list-inline-styles',
+ selector: 'hero-list-inline-styles',
  // #docregion template
  template: `
    <ul>

aio/content/examples/animations/src/app/hero-list-multistep.component.ts

@@ -15,7 +15,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-multistep',
+  selector: 'hero-list-multistep',
   // #docregion template
   template: `
     <ul>

aio/content/examples/animations/src/app/hero-list-timings.component.ts

@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-timings',
+  selector: 'hero-list-timings',
   template: `
     <ul>
       <li *ngFor="let hero of heroes"

aio/content/examples/animations/src/app/hero-list-twoway.component.ts

@@ -16,7 +16,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
- selector: 'app-hero-list-twoway',
+ selector: 'hero-list-twoway',
  // #docregion template
  template: `
    <ul>

aio/content/examples/animations/src/app/hero-team-builder.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { Hero, HeroService } from './hero.service';
 
 @Component({
-  selector: 'app-root',
+  selector: 'hero-team-builder',
   template: `
     <div class="buttons">
       <button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
@@ -15,27 +15,27 @@ import { Hero, HeroService } from './hero.service';
       <div class="column">
         <h4>Basic State</h4>
         <p>Switch between active/inactive on click.</p>
-        <app-hero-list-basic [heroes]="heroes"></app-hero-list-basic>
+        <hero-list-basic [heroes]="heroes"></hero-list-basic>
       </div>
       <div class="column">
         <h4>Styles inline in transitions</h4>
-        <p>Animated effect on click, no persistend end styles.</p>
-        <app-hero-list-inline-styles [heroes]="heroes"></app-hero-list-inline-styles>
+        <p>Animated effect on click, no persistent end styles.</p>
+        <hero-list-inline-styles [heroes]="heroes"></hero-list-inline-styles>
       </div>
       <div class="column">
         <h4>Combined transition syntax</h4>
         <p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
-        <app-hero-list-combined-transitions [heroes]="heroes"></app-hero-list-combined-transitions>
+        <hero-list-combined-transitions [heroes]="heroes"></hero-list-combined-transitions>
       </div>
       <div class="column">
         <h4>Two-way transition syntax</h4>
         <p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
-        <app-hero-list-twoway [heroes]="heroes"></app-hero-list-twoway>
+        <hero-list-twoway [heroes]="heroes"></hero-list-twoway>
       </div>
       <div class="column">
         <h4>Enter & Leave</h4>
         <p>Enter and leave animations using the void state.</p>
-        <app-hero-list-enter-leave [heroes]="heroes"></app-hero-list-enter-leave>
+        <hero-list-enter-leave [heroes]="heroes"></hero-list-enter-leave>
       </div>
     </div>
     <div class="columns">
@@ -45,27 +45,27 @@ import { Hero, HeroService } from './hero.service';
           Enter and leave animations combined with active/inactive state animations.
           Different enter and leave transitions depending on state.
         </p>
-        <app-hero-list-enter-leave-states [heroes]="heroes"></app-hero-list-enter-leave-states>
+        <hero-list-enter-leave-states [heroes]="heroes"></hero-list-enter-leave-states>
       </div>
       <div class="column">
         <h4>Auto Style Calc</h4>
         <p>Leave animation from the current computed height using the auto-style value *.</p>
-        <app-hero-list-auto [heroes]="heroes"></app-hero-list-auto>
+        <hero-list-auto [heroes]="heroes"></hero-list-auto>
       </div>
       <div class="column">
         <h4>Different Timings</h4>
         <p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
-        <app-hero-list-timings [heroes]="heroes"></app-hero-list-timings>
+        <hero-list-timings [heroes]="heroes"></hero-list-timings>
       </div>
       <div class="column">
         <h4>Multiple Keyframes</h4>
         <p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
-        <app-hero-list-multistep [heroes]="heroes"></app-hero-list-multistep>
+        <hero-list-multistep [heroes]="heroes"></hero-list-multistep>
       </div>
       <div class="column">
         <h4>Parallel Groups</h4>
         <p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
-        <app-hero-list-groups [heroes]="heroes"></app-hero-list-groups>
+        <hero-list-groups [heroes]="heroes"></hero-list-groups>
       </div>
     </div>
   `,

aio/content/examples/animations/src/index.html

@@ -5,11 +5,26 @@
     <title>Animations</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfill for Web Animations -->
+    <script src="https://unpkg.com/web-animations-js@2.2.1"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>
     <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
-    <app-root></app-root>
+    <hero-team-builder></hero-team-builder>
     <button style="visibility: hidden;">External button for E2E test</button>
     <ul style="visibility: hidden;">
       <li>External list for E2E test</li>

aio/content/examples/animations/src/main.ts

@@ -1,11 +1,4 @@
-import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/aot-compiler/example-config.json

@@ -1,4 +1,3 @@
 {
-  "build": "build:aot",
-  "projectType": "systemjs"
+  "build": "build:aot"
 }

aio/content/examples/aot-compiler/rollup-config.js

@@ -7,7 +7,7 @@ import uglify      from 'rollup-plugin-uglify';
 export default {
   entry: 'src/main.js',
   dest: 'src/build.js', // output a single application bundle
-  sourceMap: true,
+  sourceMap: false,
   format: 'iife',
   onwarn: function(warning) {
     // Skip certain warnings

aio/content/examples/aot-compiler/src/index-jit.html

@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <title>Ahead of time compilation (JIT)</title>
     <base href="/">

aio/content/examples/aot-compiler/src/index.html

@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <title>Ahead of time compilation</title>
     <base href="/">

aio/content/examples/aot-compiler/src/main.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { platformBrowser }    from '@angular/platform-browser';
-import { AppModuleNgFactory } from './app/app.module.ngfactory';
+import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
 
 console.log('Running AOT compiled');
 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

aio/content/examples/aot-compiler/tsconfig-aot.json

@@ -20,8 +20,7 @@
   ],
 
   "angularCompilerOptions": {
-    "annotationsAs": "decorators",
-    "genDir": ".",
-    "skipMetadataEmit" : true
-  }
+   "genDir": "aot",
+   "skipMetadataEmit" : true
+ }
 }

aio/content/examples/architecture/e2e-spec.ts

@@ -79,10 +79,10 @@ function salesTaxTests() {
 
 function getPageElts() {
   return {
-    heroes: element.all(by.css('app-root li')),
-    heroDetail: element(by.css('app-root app-hero-detail')),
-    salesTaxAmountInput: element(by.css('app-root app-sales-tax input')),
-    salesTaxDetail: element(by.css('app-root app-sales-tax div'))
+    heroes: element.all(by.css('my-app li')),
+    heroDetail: element(by.css('my-app hero-detail')),
+    salesTaxAmountInput: element(by.css('my-app sales-tax input')),
+    salesTaxDetail: element(by.css('my-app sales-tax div'))
   };
 }
 

aio/content/examples/architecture/src/app/app.component.ts

@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 // #enddocregion import
 
 @Component({
-  selector: 'app-root',
+  selector: 'my-app',
   template: `
-    <app-hero-list></app-hero-list>
-    <app-sales-tax></app-sales-tax>
+    <hero-list></hero-list>
+    <sales-tax></sales-tax>
   `
 })
 // #docregion export

aio/content/examples/architecture/src/app/hero-detail.component.ts

@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'app-hero-detail',
+  selector: 'hero-detail',
   templateUrl: './hero-detail.component.html'
 })
 export class HeroDetailComponent {

aio/content/examples/architecture/src/app/hero-list.component.1.html

@@ -1,9 +1,9 @@
 <!--#docregion binding  -->
 <li>{{hero.name}}</li>
-<app-hero-detail [hero]="selectedHero"></app-hero-detail>
+<hero-detail [hero]="selectedHero"></hero-detail>
 <li (click)="selectHero(hero)"></li>
 <!--#enddocregion binding -->
 
 <!--#docregion structural  -->
 <li *ngFor="let hero of heroes"></li>
-<app-hero-detail *ngIf="selectedHero"></app-hero-detail>
+<hero-detail *ngIf="selectedHero"></hero-detail>

aio/content/examples/architecture/src/app/hero-list.component.html

@@ -8,4 +8,4 @@
   </li>
 </ul>
 
-<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
+<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

aio/content/examples/architecture/src/app/hero-list.component.ts

@@ -5,7 +5,7 @@ import { HeroService }         from './hero.service';
 
 // #docregion metadata, providers
 @Component({
-  selector:    'app-hero-list',
+  selector:    'hero-list',
   templateUrl: './hero-list.component.html',
   providers:  [ HeroService ]
 })

aio/content/examples/architecture/src/app/sales-tax.component.ts

@@ -4,7 +4,7 @@ import { SalesTaxService } from './sales-tax.service';
 import { TaxRateService }  from './tax-rate.service';
 
 @Component({
-  selector:    'app-sales-tax',
+  selector:    'sales-tax',
   template: `
     <h2>Sales Tax Calculator</h2>
     Amount: <input #amountBox (change)="0">

aio/content/examples/architecture/src/index.html

@@ -1,13 +1,26 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <title>Architecture of Angular</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <base href="/">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
 
   <body>
-    <app-root></app-root>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>

aio/content/examples/architecture/src/main.ts

@@ -1,12 +1,5 @@
 // #docregion
-import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/attribute-directives/src/app/app.component.1.html

@@ -1,14 +1,14 @@
 <!-- #docregion -->
 <h1>My First Attribute Directive</h1>
 <!-- #docregion applied -->
-<p appHightlight>Highlight me!</p>
+<p myHighlight>Highlight me!</p>
 <!-- #enddocregion applied,  -->
 
 <!-- #docregion color-1 -->
-<p appHightlight highlightColor="yellow">Highlighted in yellow</p>
-<p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>
+<p myHighlight highlightColor="yellow">Highlighted in yellow</p>
+<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
 <!-- #enddocregion color-1 -->
 
 <!-- #docregion color-2 -->
-<p appHightlight [highlightColor]="color">Highlighted with parent component's color</p>
+<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
 <!-- #enddocregion color-2 -->

aio/content/examples/attribute-directives/src/app/app.component.1.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+  selector: 'my-app',
   templateUrl: './app.component.1.html'
 })
 // #docregion class

aio/content/examples/attribute-directives/src/app/app.component.html

@@ -8,11 +8,11 @@
   <input type="radio" name="colors" (click)="color='cyan'">Cyan
 </div>
 <!-- #docregion color -->
-<p [appHighlight]="color">Highlight me!</p>
+<p [myHighlight]="color">Highlight me!</p>
 <!-- #enddocregion color, v2 -->
 
 <!-- #docregion defaultColor -->
-<p [appHighlight]="color" defaultColor="violet">
+<p [myHighlight]="color" defaultColor="violet">
   Highlight me too!
 </p>
 <!-- #enddocregion defaultColor, -->
@@ -20,5 +20,5 @@
 <hr>
 <p><i>Mouse over the following lines to see fixed highlights</i></p>
 
-<p [appHighlight]="'yellow'">Highlighted in yellow</p>
-<p appHighlight="orange">Highlighted in orange</p>
+<p [myHighlight]="'yellow'">Highlighted in yellow</p>
+<p myHighlight="orange">Highlighted in orange</p>

aio/content/examples/attribute-directives/src/app/app.component.ts

@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+  selector: 'my-app',
   templateUrl: './app.component.html'
 })
 // #docregion class

aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { Directive, ElementRef, Input } from '@angular/core';
 
-@Directive({ selector: '[appHighlight]' })
+@Directive({ selector: '[myHighlight]' })
 export class HighlightDirective {
     constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';

aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts

@@ -4,7 +4,7 @@
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[appHighlight]'
+  selector: '[myHighlight]'
 })
 export class HighlightDirective {
   // #docregion ctor

aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts

@@ -3,13 +3,13 @@
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[appHighlight]'
+  selector: '[myHighlight]'
 })
 export class HighlightDirective {
 
   constructor(private el: ElementRef) { }
 
-  @Input('appHighlight') highlightColor: string;
+  @Input('myHighlight') highlightColor: string;
 
   // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {

aio/content/examples/attribute-directives/src/app/highlight.directive.ts

@@ -4,7 +4,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 // #enddocregion imports
 
 @Directive({
-  selector: '[appHighlight]'
+  selector: '[myHighlight]'
 })
 export class HighlightDirective {
 
@@ -15,7 +15,7 @@ export class HighlightDirective {
   // #enddocregion defaultColor
 
   // #docregion color
-  @Input('appHighlight') highlightColor: string;
+  @Input('myHighlight') highlightColor: string;
   // #enddocregion color
 
   // #docregion mouse-enter

aio/content/examples/attribute-directives/src/index.html

@@ -1,13 +1,25 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="UTF-8">
     <title>Attribute Directives</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
   <body>
-    <app-root></app-root>
+    <my-app>loading...</my-app>
   </body>
 </html>

aio/content/examples/attribute-directives/src/main.ts

@@ -1,12 +1,5 @@
 // #docregion
-import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/cli-quickstart/.angular-cli.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "angular.io-example"
+    "name": "master-project"
   },
   "apps": [
     {
@@ -36,16 +36,13 @@
   },
   "lint": [
     {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
+      "project": "src/tsconfig.app.json"
     },
     {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
+      "project": "src/tsconfig.spec.json"
     },
     {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
+      "project": "e2e/tsconfig.e2e.json"
     }
   ],
   "test": {

aio/content/examples/cli-quickstart/e2e-spec.ts

@@ -0,0 +1,14 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('cli-quickstart App', () => {
+  beforeEach(() => {
+    return browser.get('/');
+  });
+
+  it('should display message saying app works', () => {
+    let pageTitle = element(by.css('app-root h1')).getText();
+    expect(pageTitle).toEqual('Welcome to My First Angular App!!');
+  });
+});

aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts

@@ -1,14 +1,14 @@
-'use strict'; // necessary for es6 output in node
+import { MyAppPage } from './app.po';
 
-import { browser, element, by } from 'protractor';
+describe('my-app App', function() {
+  let page: MyAppPage;
 
-describe('cli-quickstart App', () => {
   beforeEach(() => {
-    return browser.get('/');
+    page = new MyAppPage();
   });
 
   it('should display message saying app works', () => {
-    let pageTitle = element(by.css('app-root h1')).getText();
-    expect(pageTitle).toEqual('Welcome to My First Angular App!!');
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!!');
   });
 });

aio/content/examples/cli-quickstart/e2e/app.po.ts

@@ -1,6 +1,6 @@
-import { browser, by, element } from 'protractor';
+import { browser, element, by } from 'protractor';
 
-export class AppPage {
+export class MyAppPage {
   navigateTo() {
     return browser.get('/');
   }

aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
-    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [

aio/content/examples/cli-quickstart/src/polyfills.ts

@@ -37,20 +37,16 @@
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-
 /** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 
 
 /**
- * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Required to support Web Animations `@angular/animation`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
  **/
-import 'web-animations-js';
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
 

aio/content/examples/cli-quickstart/src/test.ts

@@ -13,8 +13,8 @@ import {
 } from '@angular/platform-browser-dynamic/testing';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare const __karma__: any;
-declare const require: any;
+declare var __karma__: any;
+declare var require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};

aio/content/examples/cli-quickstart/src/tsconfig.app.json

@@ -2,13 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "baseUrl": "./",
     "module": "es2015",
+    "baseUrl": "",
     "types": []
   },
   "exclude": [
     "test.ts",
-    "**/*.spec.ts",
-    "testing/**"
+    "**/*.spec.ts"
   ]
 }

aio/content/examples/cli-quickstart/src/tsconfig.spec.json

@@ -2,9 +2,9 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
+    "baseUrl": "",
     "types": [
       "jasmine",
       "node"

aio/content/examples/cli-quickstart/tsconfig.json

@@ -2,6 +2,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
@@ -12,7 +13,7 @@
       "node_modules/@types"
     ],
     "lib": [
-      "es2017",
+      "es2016",
       "dom"
     ]
   }

aio/content/examples/cli-quickstart/zipper.json

@@ -5,5 +5,7 @@
     "!**/*.[0-9].*",
     ".angular-cli.json",
     "protractor.conf.js"
-  ]
+  ],
+  "removeSystemJsConfig": true,
+  "type": "cli"
 }

aio/content/examples/component-interaction/e2e-spec.ts

@@ -17,8 +17,8 @@ describe('Component Communication Cookbook Tests', function () {
     let _masterName = 'Master';
 
     it('should pass properties to children properly', function () {
-      let parent = element.all(by.tagName('app-hero-parent')).get(0);
-      let heroes = parent.all(by.tagName('app-hero-child'));
+      let parent = element.all(by.tagName('hero-parent')).get(0);
+      let heroes = parent.all(by.tagName('hero-child'));
 
       for (let i = 0; i < _heroNames.length; i++) {
         let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
@@ -37,8 +37,8 @@ describe('Component Communication Cookbook Tests', function () {
     it('should display trimmed, non-empty names', function () {
       let _nonEmptyNameIndex = 0;
       let _nonEmptyName = '"Mr. IQ"';
-      let parent = element.all(by.tagName('app-name-parent')).get(0);
-      let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
+      let parent = element.all(by.tagName('name-parent')).get(0);
+      let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex);
 
       let displayName = hero.element(by.tagName('h3')).getText();
       expect(displayName).toEqual(_nonEmptyName);
@@ -47,8 +47,8 @@ describe('Component Communication Cookbook Tests', function () {
     it('should replace empty name with default name', function () {
       let _emptyNameIndex = 1;
       let _defaultName = '"<no name set>"';
-      let parent = element.all(by.tagName('app-name-parent')).get(0);
-      let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
+      let parent = element.all(by.tagName('name-parent')).get(0);
+      let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex);
 
       let displayName = hero.element(by.tagName('h3')).getText();
       expect(displayName).toEqual(_defaultName);
@@ -73,7 +73,7 @@ describe('Component Communication Cookbook Tests', function () {
     });
 
     it('should set expected values after clicking \'Minor\' twice', function () {
-      let repoTag = element(by.tagName('app-version-parent'));
+      let repoTag = element(by.tagName('version-parent'));
       let newMinorButton = repoTag.all(by.tagName('button')).get(0);
 
       newMinorButton.click().then(function() {
@@ -91,7 +91,7 @@ describe('Component Communication Cookbook Tests', function () {
     });
 
     it('should set expected values after clicking \'Major\' once', function () {
-      let repoTag = element(by.tagName('app-version-parent'));
+      let repoTag = element(by.tagName('version-parent'));
       let newMajorButton = repoTag.all(by.tagName('button')).get(1);
 
       newMajorButton.click().then(function() {
@@ -107,7 +107,7 @@ describe('Component Communication Cookbook Tests', function () {
     });
 
     function getActual() {
-      let versionTag = element(by.tagName('app-version-child'));
+      let versionTag = element(by.tagName('version-child'));
       let label = versionTag.element(by.tagName('h3')).getText();
       let ul = versionTag.element((by.tagName('ul')));
       let logs = ul.all(by.tagName('li'));
@@ -127,26 +127,26 @@ describe('Component Communication Cookbook Tests', function () {
     // #docregion child-to-parent
     // ...
     it('should not emit the event initially', function () {
-      let voteLabel = element(by.tagName('app-vote-taker'))
+      let voteLabel = element(by.tagName('vote-taker'))
         .element(by.tagName('h3')).getText();
       expect(voteLabel).toBe('Agree: 0, Disagree: 0');
     });
 
     it('should process Agree vote', function () {
-      let agreeButton1 = element.all(by.tagName('app-voter')).get(0)
+      let agreeButton1 = element.all(by.tagName('my-voter')).get(0)
         .all(by.tagName('button')).get(0);
       agreeButton1.click().then(function() {
-        let voteLabel = element(by.tagName('app-vote-taker'))
+        let voteLabel = element(by.tagName('vote-taker'))
           .element(by.tagName('h3')).getText();
         expect(voteLabel).toBe('Agree: 1, Disagree: 0');
       });
     });
 
     it('should process Disagree vote', function () {
-      let agreeButton1 = element.all(by.tagName('app-voter')).get(1)
+      let agreeButton1 = element.all(by.tagName('my-voter')).get(1)
         .all(by.tagName('button')).get(1);
       agreeButton1.click().then(function() {
-        let voteLabel = element(by.tagName('app-vote-taker'))
+        let voteLabel = element(by.tagName('vote-taker'))
           .element(by.tagName('h3')).getText();
         expect(voteLabel).toBe('Agree: 1, Disagree: 1');
       });
@@ -170,7 +170,7 @@ describe('Component Communication Cookbook Tests', function () {
     // ...
     it('timer and parent seconds should match', function () {
       let parent = element(by.tagName(parentTag));
-      let message = parent.element(by.tagName('app-countdown-timer')).getText();
+      let message = parent.element(by.tagName('countdown-timer')).getText();
       browser.sleep(10); // give `seconds` a chance to catchup with `message`
       let seconds = parent.element(by.className('seconds')).getText();
       expect(message).toContain(seconds);
@@ -181,7 +181,7 @@ describe('Component Communication Cookbook Tests', function () {
       let stopButton = parent.all(by.tagName('button')).get(1);
 
       stopButton.click().then(function() {
-        let message = parent.element(by.tagName('app-countdown-timer')).getText();
+        let message = parent.element(by.tagName('countdown-timer')).getText();
         expect(message).toContain('Holding');
       });
     });
@@ -194,7 +194,7 @@ describe('Component Communication Cookbook Tests', function () {
     // #docregion bidirectional-service
     // ...
     it('should announce a mission', function () {
-      let missionControl = element(by.tagName('app-mission-control'));
+      let missionControl = element(by.tagName('mission-control'));
       let announceButton = missionControl.all(by.tagName('button')).get(0);
       announceButton.click().then(function () {
         let history = missionControl.all(by.tagName('li'));
@@ -217,7 +217,7 @@ describe('Component Communication Cookbook Tests', function () {
 
     function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
       let _confirmedLog = ' confirmed the mission';
-      let missionControl = element(by.tagName('app-mission-control'));
+      let missionControl = element(by.tagName('mission-control'));
       let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
       confirmButton.click().then(function () {
         let history = missionControl.all(by.tagName('li'));

aio/content/examples/component-interaction/src/app/app.component.html

@@ -9,43 +9,43 @@
 <a href="#bidirectional-service">Parent and children communicate via a service ("Mission Control")</a><br/>
 
 <div id="parent-to-child">
-  <app-hero-parent></app-hero-parent>
+  <hero-parent></hero-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 
 <hr>
 <div id="parent-to-child-setter">
-  <app-name-parent></app-name-parent>
+  <name-parent></name-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 
 <hr>
 <div id="parent-to-child-on-changes">
-  <app-version-parent></app-version-parent>
+  <version-parent></version-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 
 <hr>
 <div id="child-to-parent">
-  <app-vote-taker></app-vote-taker>
+  <vote-taker></vote-taker>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>
 
 <div id="parent-to-child-local-var">
-  <app-countdown-parent-lv></app-countdown-parent-lv>
+  <countdown-parent-lv></countdown-parent-lv>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>
 
 <div id="parent-to-view-child">
-  <app-countdown-parent-vc></app-countdown-parent-vc>
+  <countdown-parent-vc></countdown-parent-vc>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>
 
 <div id="bidirectional-service">
-  <app-mission-control></app-mission-control>
+  <mission-control></mission-control>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>

aio/content/examples/component-interaction/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+  selector: 'my-app',
   templateUrl: './app.component.html'
 })
 export class AppComponent { }

aio/content/examples/component-interaction/src/app/astronaut.component.ts

@@ -5,7 +5,7 @@ import { MissionService } from './mission.service';
 import { Subscription }   from 'rxjs/Subscription';
 
 @Component({
-  selector: 'app-astronaut',
+  selector: 'my-astronaut',
   template: `
     <p>
       {{astronaut}}: <strong>{{mission}}</strong>

aio/content/examples/component-interaction/src/app/countdown-parent.component.ts

@@ -11,15 +11,15 @@ import { CountdownTimerComponent }  from './countdown-timer.component';
 //// Local variable, #timer, version
 // #docregion lv
 @Component({
-  selector: 'app-countdown-parent-lv',
+  selector: 'countdown-parent-lv',
   template: `
   <h3>Countdown to Liftoff (via local variable)</h3>
   <button (click)="timer.start()">Start</button>
   <button (click)="timer.stop()">Stop</button>
   <div class="seconds">{{timer.seconds}}</div>
-  <app-countdown-timer #timer></app-countdown-timer>
+  <countdown-timer #timer></countdown-timer>
   `,
-  styleUrls: ['../assets/demo.css']
+  styleUrls: ['demo.css']
 })
 export class CountdownLocalVarParentComponent { }
 // #enddocregion lv
@@ -27,15 +27,15 @@ export class CountdownLocalVarParentComponent { }
 //// View Child version
 // #docregion vc
 @Component({
-  selector: 'app-countdown-parent-vc',
+  selector: 'countdown-parent-vc',
   template: `
   <h3>Countdown to Liftoff (via ViewChild)</h3>
   <button (click)="start()">Start</button>
   <button (click)="stop()">Stop</button>
   <div class="seconds">{{ seconds() }}</div>
-  <app-countdown-timer></app-countdown-timer>
+  <countdown-timer></countdown-timer>
   `,
-  styleUrls: ['../assets/demo.css']
+  styleUrls: ['demo.css']
 })
 export class CountdownViewChildParentComponent implements AfterViewInit {
 

aio/content/examples/component-interaction/src/app/countdown-timer.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-countdown-timer',
+  selector: 'countdown-timer',
   template: '<p>{{message}}</p>'
 })
 export class CountdownTimerComponent implements OnInit, OnDestroy {

aio/content/examples/component-interaction/src/app/hero-child.component.ts

@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'app-hero-child',
+  selector: 'hero-child',
   template: `
     <h3>{{hero.name}} says:</h3>
     <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>

aio/content/examples/component-interaction/src/app/hero-parent.component.ts

@@ -4,13 +4,13 @@ import { Component } from '@angular/core';
 import { HEROES } from './hero';
 
 @Component({
-  selector: 'app-hero-parent',
+  selector: 'hero-parent',
   template: `
     <h2>{{master}} controls {{heroes.length}} heroes</h2>
-    <app-hero-child *ngFor="let hero of heroes"
+    <hero-child *ngFor="let hero of heroes"
       [hero]="hero"
       [master]="master">
-    </app-hero-child>
+    </hero-child>
   `
 })
 export class HeroParentComponent {

aio/content/examples/component-interaction/src/app/missioncontrol.component.ts

@@ -4,13 +4,13 @@ import { Component }          from '@angular/core';
 import { MissionService }     from './mission.service';
 
 @Component({
-  selector: 'app-mission-control',
+  selector: 'mission-control',
   template: `
     <h2>Mission Control</h2>
     <button (click)="announce()">Announce mission</button>
-    <app-astronaut *ngFor="let astronaut of astronauts"
+    <my-astronaut *ngFor="let astronaut of astronauts"
       [astronaut]="astronaut">
-    </app-astronaut>
+    </my-astronaut>
     <h3>History</h3>
     <ul>
       <li *ngFor="let event of history">{{event}}</li>

aio/content/examples/component-interaction/src/app/name-child.component.ts

@@ -2,7 +2,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-name-child',
+  selector: 'name-child',
   template: '<h3>"{{name}}"</h3>'
 })
 export class NameChildComponent {

aio/content/examples/component-interaction/src/app/name-parent.component.ts

@@ -2,10 +2,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-name-parent',
+  selector: 'name-parent',
   template: `
   <h2>Master controls {{names.length}} names</h2>
-  <app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
+  <name-child *ngFor="let name of names" [name]="name"></name-child>
   `
 })
 export class NameParentComponent {

aio/content/examples/component-interaction/src/app/version-child.component.ts

@@ -3,7 +3,7 @@
 import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
 
 @Component({
-  selector: 'app-version-child',
+  selector: 'version-child',
   template: `
     <h3>Version {{major}}.{{minor}}</h3>
     <h4>Change log:</h4>

aio/content/examples/component-interaction/src/app/version-parent.component.ts

@@ -2,12 +2,12 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-version-parent',
+  selector: 'version-parent',
   template: `
     <h2>Source code version</h2>
     <button (click)="newMinor()">New minor version</button>
     <button (click)="newMajor()">New major version</button>
-    <app-version-child [major]="major" [minor]="minor"></app-version-child>
+    <version-child [major]="major" [minor]="minor"></version-child>
   `
 })
 export class VersionParentComponent {

aio/content/examples/component-interaction/src/app/voter.component.ts

@@ -2,7 +2,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-  selector: 'app-voter',
+  selector: 'my-voter',
   template: `
     <h4>{{name}}</h4>
     <button (click)="vote(true)"  [disabled]="voted">Agree</button>

aio/content/examples/component-interaction/src/app/votetaker.component.ts

@@ -2,14 +2,14 @@
 import { Component }      from '@angular/core';
 
 @Component({
-  selector: 'app-vote-taker',
+  selector: 'vote-taker',
   template: `
     <h2>Should mankind colonize the Universe?</h2>
     <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
-    <app-voter *ngFor="let voter of voters"
+    <my-voter *ngFor="let voter of voters"
       [name]="voter"
       (onVoted)="onVoted($event)">
-    </app-voter>
+    </my-voter>
   `
 })
 export class VoteTakerComponent {

aio/content/examples/component-interaction/src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="UTF-8">
     <title>Passing information from parent to child</title>
@@ -7,10 +7,23 @@
     <style>
       .to-top {margin-top: 8px; display: block;}
     </style>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="demo.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>
-    <app-root></app-root>
+    <my-app>loading...</my-app>
   </body>
 
 </html>

aio/content/examples/component-interaction/src/main.ts

@@ -1,11 +1,5 @@
-import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/component-styles/e2e-spec.ts

@@ -9,7 +9,7 @@ describe('Component Style Tests', function () {
   });
 
   it('scopes component styles to component view', function() {
-    let componentH1 = element(by.css('app-root > h1'));
+    let componentH1 = element(by.css('hero-app > h1'));
     let externalH1 = element(by.css('body > h1'));
 
     // Note: sometimes webdriver returns the fontWeight as "normal",
@@ -20,47 +20,47 @@ describe('Component Style Tests', function () {
 
 
   it('allows styling :host element', function() {
-    let host = element(by.css('app-hero-details'));
+    let host = element(by.css('hero-details'));
 
     expect(host.getCssValue('borderWidth')).toEqual('1px');
   });
 
   it('supports :host() in function form', function() {
-    let host = element(by.css('app-hero-details'));
+    let host = element(by.css('hero-details'));
 
     host.element(by.buttonText('Activate')).click();
     expect(host.getCssValue('borderWidth')).toEqual('3px');
   });
 
   it('allows conditional :host-context() styling', function() {
-    let h2 = element(by.css('app-hero-details h2'));
+    let h2 = element(by.css('hero-details h2'));
 
     expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
   });
 
   it('styles both view and content children with /deep/', function() {
-    let viewH3 = element(by.css('app-hero-team h3'));
-    let contentH3 = element(by.css('app-hero-controls h3'));
+    let viewH3 = element(by.css('hero-team h3'));
+    let contentH3 = element(by.css('hero-controls h3'));
 
     expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
     expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
   });
 
   it('includes styles loaded with CSS @import', function() {
-    let host = element(by.css('app-hero-details'));
+    let host = element(by.css('hero-details'));
 
     expect(host.getCssValue('padding')).toEqual('10px');
   });
 
   it('processes template inline styles', function() {
-    let button = element(by.css('app-hero-controls button'));
+    let button = element(by.css('hero-controls button'));
     let externalButton = element(by.css('body > button'));
     expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
     expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
   });
 
   it('processes template <link>s', function() {
-    let li = element(by.css('app-hero-team li:first-child'));
+    let li = element(by.css('hero-team li:first-child'));
     let externalLi = element(by.css('body > ul li'));
 
     expect(li.getCssValue('listStyleType')).toEqual('square');