docs: add changelog for 4.3.3

fixes #18314

.bazelrc

@@ -0,0 +1,6 @@
+# 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

.circleci/README.md

@@ -1,19 +0,0 @@
-# Encryption
-
-Based on https://github.com/circleci/encrypted-files
-
-In the CircleCI web UI, we have a secret variable called `KEY`
-https://circleci.com/gh/angular/angular/edit#env-vars
-which is only exposed to non-fork builds
-(see "Pass secrets to builds from forked pull requests" under
-https://circleci.com/gh/angular/angular/edit#advanced-settings)
-
-We use this as a symmetric AES encryption key to encrypt tokens like
-a GitHub token that enables publishing snapshots.
-
-To create the github_token file, we take this approach:
-- Find the angular-builds:token in http://valentine
-- Go inside the ngcontainer docker image so you use the same version of openssl as we will at runtime: `docker run --rm -it angular/ngcontainer`
-- echo "https://[token]:@github.com" > credentials
-- openssl aes-256-cbc -e -in credentials -out .circleci/github_token -k $KEY
-- If needed, base64-encode the result so you can copy-paste it out of docker: `base64 github_token`

.circleci/bazel.rc

@@ -1,39 +0,0 @@
-# These options are enabled when running on CI
-# We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
-# See remote cache documentation in /docs/BAZEL.md
-
-# Don't be spammy in the logs
-build --noshow_progress
-
-# Don't run manual tests
-test --test_tag_filters=-manual
-
-# Print all the options that apply to the build.
-# This helps us diagnose which options override others
-# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
-build --announce_rc
-
-# Create dist/bin symlink to $(bazel info bazel-bin)
-# We use this when uploading artifacts after the build finishes
-build --symlink_prefix=dist/
-
-# Enable experimental CircleCI bazel remote cache proxy
-# See remote cache documentation in /docs/BAZEL.md
-build --experimental_remote_spawn_cache --remote_rest_cache=http://localhost:7643
-
-# Prevent unstable environment variables from tainting cache keys
-build --experimental_strict_action_env
-
-# Save downloaded repositories such as the go toolchain
-# This directory can then be included in the CircleCI cache
-# It should save time running the first build
-build --experimental_repository_cache=/home/circleci/bazel_repository_cache
-
-# Workaround https://github.com/bazelbuild/bazel/issues/3645
-# Bazel doesn't calculate the memory ceiling correctly when running under Docker.
-# Limit Bazel to consuming resources that fit in CircleCI "xlarge" class
-# https://circleci.com/docs/2.0/configuration-reference/#resource_class
-build --local_resources=14336,8.0,1.0
-
-# Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
-test --flaky_test_attempts=2

.circleci/config.yml

@@ -7,36 +7,17 @@
 # To validate changes, use an online parser, eg.
 # http://yaml-online-parser.appspot.com/
 
-# Variables
-
-## IMPORTANT
-# If you change the `docker_image` version, also change the `cache_key` suffix and the version of
-# `com_github_bazelbuild_buildtools` in the `/WORKSPACE` file.
-var_1: &docker_image angular/ngcontainer:0.3.0
-var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.0
-
-# Define common ENV vars
-var_3: &define_env_vars
-  run: echo "export PROJECT_ROOT=$(pwd)" >> $BASH_ENV
-
-# See remote cache documentation in /docs/BAZEL.md
-var_4: &setup-bazel-remote-cache
-  run:
-    name: Start up bazel remote cache proxy
-    command: ~/bazel-remote-proxy -backend circleci://
-    background: true
-
 # Settings common to each job
 anchor_1: &job_defaults
   working_directory: ~/ng
   docker:
-    - image: *docker_image
+    - image: angular/ngcontainer
 
 # After checkout, rebase on top of master.
 # Similar to travis behavior, but not quite the same.
 # See https://discuss.circleci.com/t/1662
 anchor_2: &post_checkout
-  post: git pull --ff-only origin "refs/pull/${CIRCLE_PULL_REQUEST//*pull\//}/merge"
+  post: git pull --ff-only origin "refs/pull/${CI_PULL_REQUEST//*pull\//}/merge"
 
 version: 2
 jobs:
@@ -45,185 +26,31 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-
-      # Check BUILD.bazel formatting before we have a node_modules directory
-      # Then we don't need any exclude pattern to avoid checking those files
-      - run: 'buildifier -mode=check $(find . -type f \( -name BUILD.bazel -or -name BUILD \)) ||
-              (echo "BUILD files not formatted. Please run ''yarn buildifier''" ; exit 1)'
-      # Run the skylark linter to check our Bazel rules
-      # deprecated-api is disabled because we use actions.new_file(genfiles_dir)
-      # which has no replacement, see https://github.com/bazelbuild/bazel/issues/4858
-      - run: 'find . -type f -name "*.bzl" |
-              xargs java -jar /usr/local/bin/Skylint_deploy.jar --disable-checks=deprecated-api ||
-              (echo -e "\n.bzl files have lint errors. Please run ''yarn skylint''"; exit 1)'
-
       - restore_cache:
-          key: *cache_key
+          key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
-      - run: yarn install --frozen-lockfile --non-interactive
+      - run: npm install
+      - run: npm run postinstall
       - run: ./node_modules/.bin/gulp lint
 
-  test:
+  build:
     <<: *job_defaults
-    resource_class: xlarge
     steps:
-      - *define_env_vars
       - checkout:
           <<: *post_checkout
-      # See remote cache documentation in /docs/BAZEL.md
-      - run: .circleci/setup_cache.sh
-      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
-      - *setup-bazel-remote-cache
-
       - restore_cache:
-          key: *cache_key
+          key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
-      - run: ls /home/circleci/bazel_repository_cache || true
-      - run: bazel info release
-      - run: bazel run @yarn//:yarn
-      # Use bazel query so that we explicitly ask for all buildable targets to be built as well
-      # This avoids waiting for the slowest build target to finish before running the first test
-      # See https://github.com/bazelbuild/bazel/issues/4257
-      # NOTE: Angular developers should typically just bazel build //packages/... or bazel test //packages/...
-      - run: bazel query --output=label //... | xargs bazel test
-
-      # CircleCI will allow us to go back and view/download these artifacts from past builds.
-      # Also we can use a service like https://buildsize.org/ to automatically track binary size of these artifacts.
-      # The destination keys need be format {projectName}/{context}/{fileName} so that the github-robot can process them for size calculations
-      # projectName should remain consistant to group files
-      # context and fileName can be almost anything (within usual URI rules)
-      # There should only be exactly 2 forward slashes in the path
-      # This is so they're backwards compatiable with the existing data we have on bundle sizes
-      - store_artifacts:
-          path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js
-          destination: core/hello_world/bundle
-      - store_artifacts:
-          path: dist/bin/packages/core/test/bundling/todo/bundle.min.js
-          destination: core/todo/bundle
-      - store_artifacts:
-          path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js.br
-          destination: core/hello_world/bundle.br
-      - store_artifacts:
-          path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.br
-          destination: core/todo/bundle.br
+      - run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
+      - run: bazel build ...
       - save_cache:
-          key: *cache_key
+          key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
           paths:
             - "node_modules"
-            - "~/bazel_repository_cache"
-
-  # This job exists only for backwards-compatibility with old scripts and tests
-  # that rely on the pre-Bazel dist/packages-dist layout.
-  # It duplicates some work with the job above: we build the bazel packages
-  # twice. Even though we have a remote cache, these jobs will typically run in
-  # parallel so up-to-date outputs will not be available at the time the build
-  # starts.
-  # No new jobs should depend on this one.
-  build-packages-dist:
-    <<: *job_defaults
-    resource_class: xlarge
-    steps:
-      - *define_env_vars
-      - checkout:
-          <<: *post_checkout
-      # See remote cache documentation in /docs/BAZEL.md
-      - run: .circleci/setup_cache.sh
-      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
-      - *setup-bazel-remote-cache
-
-      - run: bazel run @yarn//:yarn
-      - run: scripts/build-packages-dist.sh
-
-      # Save the npm packages from //packages/... for other workflow jobs to read
-      # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
-      - persist_to_workspace:
-          root: dist
-          paths:
-            - packages-dist
-
-  # We run the integration tests outside of Bazel for now.
-  # They are a separate workflow job so that they can be easily re-run.
-  # When the tests are ported to bazel test targets, they should move to the "test"
-  # job above, as part of the bazel test command. That has flaky_test_attempts so the
-  # need to re-run manually should be alleviated.
-  # See comments inside the integration/run_tests.sh script.
-  integration_test:
-    <<: *job_defaults
-    steps:
-      - *define_env_vars
-      - checkout:
-          <<: *post_checkout
-      - attach_workspace:
-          at: dist
-      - run: xvfb-run --auto-servernum ./integration/run_tests.sh
-
-  # This job updates the content of repos like github.com/angular/core-builds
-  # for every green build on angular/angular.
-  publish_snapshot:
-    <<: *job_defaults
-    steps:
-      # See below - ideally this job should not trigger for non-upstream builds.
-      # But since it does, we have to check this condition.
-      - run:
-          name: Skip this job for Pull Requests and Fork builds
-          # Note, `|| true` on the end makes this step always exit 0
-          command: '[[
-              -v CIRCLE_PR_NUMBER
-              || "$CIRCLE_PROJECT_USERNAME" != "angular"
-              || "$CIRCLE_PROJECT_REPONAME" != "angular"
-          ]] && circleci step halt || true'
-      - checkout:
-          <<: *post_checkout
-      - attach_workspace:
-          at: dist
-      # CircleCI has a config setting to force SSH for all github connections
-      # This is not compatible with our mechanism of using a Personal Access Token
-      # Clear the global setting
-      - run: git config --global --unset "url.ssh://git@github.com.insteadof"
-      - run:
-          name: Decrypt github credentials
-          command: 'openssl aes-256-cbc -d -in .circleci/github_token -k "${KEY}" -out ~/.git_credentials'
-      - run: ./scripts/ci/publish-build-artifacts.sh
-
-  aio_monitoring:
-    <<: *job_defaults
-    steps:
-      - checkout:
-          <<: *post_checkout
-      - restore_cache:
-          key: *cache_key
-      - run: xvfb-run --auto-servernum ./aio/scripts/test-production.sh
 
 workflows:
   version: 2
   default_workflow:
     jobs:
       - lint
-      - test
-      - build-packages-dist
-      - integration_test:
-          requires:
-            - build-packages-dist
-      - publish_snapshot:
-          # Note: no filters on this job because we want it to run for all upstream branches
-          # We'd really like to filter out pull requests here, but not yet available:
-          # https://discuss.circleci.com/t/workflows-pull-request-filter/14396/4
-          # Instead, the job just exits immediately at the first step.
-          requires:
-            # Only publish if tests and integration tests pass
-            - test
-            - integration_test
-            # Get the artifacts to publish from the build-packages-dist job
-            # since the publishing script expects the legacy outputs layout.
-            - build-packages-dist
-
-  aio_monitoring:
-    jobs:
-      - aio_monitoring
-    triggers:
-      - schedule:
-          cron: "0 0 * * *"
-          filters:
-            branches:
-              only:
-                - master
+      - build

.circleci/setup_cache.sh

@@ -1,11 +0,0 @@
-#!/bin/sh
-# Install bazel remote cache proxy
-# This is temporary until the feature is no longer experimental on CircleCI.
-# See remote cache documentation in /docs/BAZEL.md
-
-set -u -e
-
-readonly DOWNLOAD_URL="https://5-116431813-gh.circle-artifacts.com/0/pkg/bazel-remote-proxy-$(uname -s)_$(uname -m)"
-
-curl --fail -o ~/bazel-remote-proxy "$DOWNLOAD_URL"
-chmod +x ~/bazel-remote-proxy

.github/ISSUE_TEMPLATE.md

@@ -9,11 +9,9 @@ ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
 <pre><code>
 [ ] Regression (a behavior that used to work and stopped working in a new release)
 [ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
-[ ] Performance issue
 [ ] Feature request
 [ ] Documentation issue or request
 [ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
-[ ] Other... Please describe:
 </code></pre>
 
 ## Current behavior
@@ -27,7 +25,7 @@ ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
 ## Minimal reproduction of the problem with instructions
 <!--
 For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
-https://stackblitz.com or similar (you can use this template as a starting point: https://stackblitz.com/fork/angular-gitter).
+https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
 -->
 
 ## What is the motivation / use case for changing the behavior?

.github/angular-robot.yml

@@ -1,119 +0,0 @@
-# Configuration for angular-robot
-
-#options for the size plugin
-size:
-  disabled: false
-  maxSizeIncrease: 1000
-  status:
-    disabled: false
-    context: "ci/angular: size"
-
-# options for the merge plugin
-merge:
-  # the status will be added to your pull requests
-  status:
-    # set to true to disable
-    disabled: false
-    # the name of the status
-    context: "ci/angular: merge status"
-    # text to show when all checks pass
-    successText: "All checks passed!"
-    # text to show when some checks are failing
-    failureText: "The following checks are failing:"
-
-  # the g3 status will be added to your pull requests if they include files that match the patterns
-  g3Status:
-    # set to true to disable
-    disabled: false
-    # the name of the status
-    context: "google3"
-    # text to show when the status is pending, {{PRNumber}} will be replaced by the PR number
-    pendingDesc: "Googler: run g3sync presubmit {{PRNumber}}"
-    # text to show when the status is success
-    successDesc: "Does not affect google3"
-    # link to use for the details
-    url: "http://go/angular-g3sync"
-    # list of patterns to check for the files changed by the PR
-    # this list must be manually kept in sync with google3/third_party/javascript/angular2/copy.bara.sky
-    include:
-      - "LICENSE"
-      - "modules/**"
-      - "packages/**"
-    # list of patterns to ignore for the files changed by the PR
-    exclude:
-      - "packages/language-service/**"
-      - "**/.gitignore"
-      - "**/.gitkeep"
-      - "**/tsconfig-build.json"
-      - "**/tsconfig.json"
-      - "**/rollup.config.js"
-      - "**/BUILD.bazel"
-      - "packages/**/test/**"
-
-  # comment that will be added to a PR when there is a conflict, leave empty or set to false to disable
-  mergeConflictComment: "Hi @{{PRAuthor}}! This PR has merge conflicts due to recent upstream merges.
-\nPlease help to unblock it by resolving these conflicts. Thanks!"
-
-  # label to monitor
-  mergeLabel: "PR action: merge"
-
-  # list of checks that will determine if the merge label can be added
-  checks:
-    # whether the PR shouldn't have a conflict with the base branch
-    noConflict: true
-    # list of labels that a PR needs to have, checked with a regexp (e.g. "PR target:" will work for the label "PR target: master")
-    requiredLabels:
-      - "PR target: *"
-      - "cla: yes"
-
-    # list of labels that a PR shouldn't have, checked after the required labels with a regexp
-    forbiddenLabels:
-      - "PR target: TBD"
-      - "PR action: cleanup"
-      - "PR action: review"
-      - "PR state: blocked"
-      - "cla: no"
-
-    # list of PR statuses that need to be successful
-    requiredStatuses:
-      - "continuous-integration/travis-ci/pr"
-      - "code-review/pullapprove"
-      - "ci/circleci: build"
-      - "ci/circleci: lint"
-
-  # the comment that will be added when the merge label is added despite failing checks, leave empty or set to false to disable
-  # {{MERGE_LABEL}} will be replaced by the value of the mergeLabel option
-  # {{PLACEHOLDER}} will be replaced by the list of failing checks
-  mergeRemovedComment: "I see that you just added the `{{MERGE_LABEL}}` label, but the following checks are still failing:
-\n{{PLACEHOLDER}}
-\n
-\n**If you want your PR to be merged, it has to pass all the CI checks.**
-\n
-\nIf you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help."
-
-# options for the triage plugin
-triage:
-  # number of the milestone to apply when the issue has not been triaged yet
-  needsTriageMilestone: 83,
-  # number of the milestone to apply when the issue is triaged
-  defaultMilestone: 82,
-  # arrays of labels that determine if an issue has been triaged by the caretaker
-  l1TriageLabels:
-    -
-      - "comp: *"
-  # arrays of labels that determine if an issue has been fully triaged
-  l2TriageLabels:
-    -
-      - "type: bug/fix"
-      - "severity*"
-      - "freq*"
-      - "comp: *"
-    -
-      - "type: feature"
-      - "comp: *"
-    -
-      - "type: refactor"
-      - "comp: *"
-    -
-      - "type: RFC / Discussion / question"
-      - "comp: *"

.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
@@ -14,7 +13,6 @@ pubspec.lock
 .settings/
 *.swo
 modules/.settings
-.bazelrc
 .vscode
 modules/.vscode
 

.mailmap

@@ -1 +0,0 @@
-Michał Gołębiowski-Owczarek <m.goleb@gmail.com>

.nvmrc

@@ -1 +1 @@
-8.9
+6.9.5

.pullapprove.yml

@@ -7,25 +7,23 @@
 #
 # alexeagle - Alex Eagle
 # alxhub - Alex Rickabaugh
-# andrewseguin - Andrew Seguin
-# brandonroberts - Brandon Roberts
-# brocco - Mike Brocchi
-# filipesilva - Filipe Silva
+# chuckjaz - Chuck Jazdzewski
+# Foxandxss - Jesús Rodríguez
 # gkalpak - George Kalpakas
-# hansl - Hans Larsen
 # IgorMinar - Igor Minar
 # jasonaden - Jason Aden
-# kapunahelewong - Kapunahele Wong
+# juleskremer - Jules Kremer
 # kara - Kara Erickson
-# kyliau - Keen Yee Liau
 # matsko - Matias Niemelä
 # mhevery - Misko Hevery
 # petebacondarwin - Pete Bacon Darwin
 # pkozlowski-opensource - Pawel Kozlowski
 # robwormald - Rob Wormald
+# tbosch - Tobias Bosch
 # tinayuangao - Tina Gao
 # vicb - Victor Berchet
 # vikerman - Vikram Subramanian
+# wardbell - Ward Bell
 
 
 version: 2
@@ -36,41 +34,20 @@ group_defaults:
     enabled: true
   approve_by_comment:
     enabled: false
-  # see http://docs.pullapprove.com/groups/author_approval/
-  author_approval:
-    # If the author is a reviewer on the PR, they will automatically have an "approved" status.
-    auto: true
 
 groups:
-  # Require all PRs to have at least one approval from *someone*
-  all:
-    users: all
-    required: 1
-    rejection_value: -999
-    # In this group, your self-approval does not count
-    author_approval:
-      auto: false
-      ignored: true
-    files:
-      include:
-        - "*"
-
   root:
     conditions:
       files:
         include:
           - "*"
         exclude:
-          - "WORKSPACE"
-          - "BUILD.bazel"
-          - ".circleci/*"
           - "aio/*"
           - "integration/*"
           - "modules/*"
           - "packages/*"
           - "tools/*"
     users:
-      - alexeagle
       - IgorMinar
       - mhevery
 
@@ -83,22 +60,6 @@ groups:
       - IgorMinar
       - mhevery
 
-  bazel:
-    conditions:
-      files:
-        include:
-          - "WORKSPACE"
-          - "*.bazel"
-          - "*.bzl"
-          - "packages/bazel/*"
-          - "tools/bazel.rc"
-    users:
-      - alexeagle #primary
-      - kyliau
-      - IgorMinar #fallback
-      - mhevery
-      - vikerman #fallback
-
   build-and-ci:
     conditions:
       files:
@@ -108,7 +69,7 @@ groups:
           - "*.lock"
           - "tools/*"
         exclude:
-          - "tools/bazel.rc"
+          - "tools/@angular/tsc-wrapped/*"
           - "tools/public_api_guard/*"
           - "aio/*"
     users:
@@ -124,27 +85,30 @@ groups:
     users:
       - alexeagle
       - mhevery
+      - tbosch
       - vicb
       - IgorMinar #fallback
 
+
   core:
     conditions:
       files:
         - "packages/core/*"
     users:
-      - mhevery #primary
-      - jasonaden
-      - kara
+      - tbosch #primary
+      - chuckjaz
+      - mhevery
       - vicb
       - IgorMinar #fallback
 
   animations:
     conditions:
       files:
-        - "packages/animations/*"
+        - "packages/animation/*"
         - "packages/platform-browser/animations/*"
     users:
       - matsko #primary
+      - chuckjaz #fallback
       - mhevery #fallback
       - IgorMinar #fallback
 
@@ -154,7 +118,7 @@ groups:
         - "packages/compiler/src/i18n/*"
     users:
       - vicb #primary
-      - alxhub
+      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -163,43 +127,29 @@ groups:
       files:
         - "packages/compiler/*"
     users:
-      - chuckjaz #primary
+      - tbosch #primary
       - vicb
+      - chuckjaz
       - mhevery
       - IgorMinar #fallback
 
-  compiler-cli/ngtools:
-    conditions:
-      files:
-        - "packages/compiler-cli/src/ngtools*"
-    users:
-      - hansl
-      - filipesilva #fallback
-      - brocco #fallback
-      - IgorMinar #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
-      - alxhub
+      - chuckjaz
       - vicb
+      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
   common:
     conditions:
       files:
-        include:
-          - "packages/common/*"
-        exclude:
-          - "packages/common/http/*"
+        - "packages/common/*"
     users:
       - pkozlowski-opensource #primary
       - vicb
@@ -210,12 +160,6 @@ groups:
     conditions:
       files:
         - "packages/forms/*"
-        - "aio/content/guide/forms.md"
-        - "aio/content/guide/form-validation.md"
-        - "aio/content/guide/reactive-forms.md"
-        - "aio/content/examples/forms/*"
-        - "aio/content/examples/form-validation/*"
-        - "aio/content/examples/reactive-forms/*"
     users:
       - kara #primary
       - tinayuangao #secondary
@@ -225,11 +169,11 @@ groups:
   http:
     conditions:
       files:
-        - "packages/common/http/*"
         - "packages/http/*"
     users:
-      - alxhub #primary
-      - IgorMinar
+      - vikerman #primary
+      - alxhub
+      - IgorMinar #fallback
       - mhevery #fallback
 
   language-service:
@@ -237,8 +181,8 @@ groups:
       files:
         - "packages/language-service/*"
     users:
-      - kyliau #primary
-      # needs secondary
+      - chuckjaz #primary
+      - tbosch #secondary
       - vicb
       - IgorMinar #fallback
       - mhevery #fallback
@@ -248,7 +192,7 @@ groups:
       files:
         - "packages/router/*"
     users:
-      - jasonaden #primary
+      - jasonaden
       - vicb
       - IgorMinar #fallback
       - mhevery #fallback
@@ -268,8 +212,8 @@ groups:
       files:
         - "packages/platform-browser/*"
     users:
-      - vicb #primary
-      # needs secondary
+      - tbosch #primary
+      - vicb #secondary
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -279,8 +223,9 @@ groups:
         - "packages/platform-server/*"
     users:
       - vikerman #primary
-      - alxhub #secondary
+      - alxhub
       - vicb
+      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -290,37 +235,18 @@ groups:
         - "packages/platform-webworker/*"
     users:
       - vicb #primary
-      # needs secondary
+      - tbosch #secondary
       - 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:
-      - andrewseguin #primary
-      - gkalpak
-      - robwormald
-      - IgorMinar #fallback
-      - mhevery #fallback
 
   benchpress:
     conditions:
       files:
         - "packages/benchpress/*"
     users:
-      - alxhub # primary
+      - tbosch #primary
       # needs secondary
       - IgorMinar #fallback
       - mhevery #fallback
@@ -348,12 +274,13 @@ groups:
           - "aio/content/navigation.json"
           - "aio/content/license.md"
     users:
-      - kapunahelewong
+      - juleskremer #primary
+      - Foxandxss
       - stephenfluin
+      - wardbell
       - petebacondarwin
       - gkalpak
-      - IgorMinar
-      - brandonroberts
+      - IgorMinar #fallback
       - mhevery #fallback
 
   angular.io-marketing:
@@ -364,9 +291,9 @@ groups:
           - "aio/content/navigation.json"
           - "aio/content/license.md"
     users:
+      - juleskremer #primary
       - stephenfluin
       - petebacondarwin
       - gkalpak
-      - IgorMinar
-      - robwormald
+      - IgorMinar #fallback
       - mhevery #fallback

.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:
-  - '8.9.1'
+  - '6.9.5'
 
 addons:
+  chrome: stable
 #  firefox: "38.0"
   apt:
     sources:
@@ -45,16 +47,17 @@ env:
   matrix:
     # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
     - CI_MODE=e2e
+    - CI_MODE=e2e_2
     - CI_MODE=js
     - CI_MODE=saucelabs_required
-    # deactivated, see #19768
-    # - CI_MODE=browserstack_required
+    - CI_MODE=browserstack_required
     - CI_MODE=saucelabs_optional
     - CI_MODE=browserstack_optional
-    - CI_MODE=aio_tools_test
+    - CI_MODE=docs_test
     - CI_MODE=aio
     - CI_MODE=aio_e2e AIO_SHARD=0
     - CI_MODE=aio_e2e AIO_SHARD=1
+    - CI_MODE=bazel
 
 matrix:
   fast_finish: true

BUILD.bazel

@@ -1,57 +1,25 @@
 package(default_visibility = ["//visibility:public"])
+exports_files(["tsconfig.json"])
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "node_modules_filegroup")
-
-exports_files([
-    "tsconfig.json",
-    "LICENSE",
-])
-
-# Developers should always run `bazel run :install`
-# This ensures that package.json in subdirectories get installed as well.
-alias(
-    name = "install",
-    actual = "@yarn//:yarn",
-)
-
-node_modules_filegroup(
+# This rule belongs in node_modules/BUILD
+# It's here as a workaround for
+# https://github.com/bazelbuild/bazel/issues/374#issuecomment-296217940
+filegroup(
     name = "node_modules",
-    packages = [
-        "bytebuffer",
-        "hammerjs",
-        "jasmine",
-        "minimist",
-        "protobufjs",
-        "reflect-metadata",
-        "source-map-support",
-        "tsickle",
-        "tslib",
-        "tsutils",
-        "typescript",
-        "zone.js",
-        "@angular-devkit/core",
-        "@angular-devkit/schematics",
-        "@types",
-        "@webcomponents/custom-elements",
-    ],
-)
-
-filegroup(
-    name = "web_test_bootstrap_scripts",
-    # do not sort
-    srcs = [
-        "//:node_modules/reflect-metadata/Reflect.js",
-        "//:node_modules/zone.js/dist/zone.js",
-        "//:node_modules/zone.js/dist/zone-testing.js",
-        "//:node_modules/zone.js/dist/task-tracking.js",
-    ],
-)
-
-filegroup(
-    name = "angularjs",
-    # do not sort
-    srcs = [
-        "//:node_modules/angular/angular.js",
-        "//:node_modules/angular-mocks/angular-mocks.js",
-    ],
+    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",
+    ]),
 )

CODE_OF_CONDUCT.md

@@ -1,12 +0,0 @@
-# Contributor Code of Conduct
-## Version 0.3b-angular
-
-As contributors and maintainers of the Angular project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
-
-Communication through any of Angular's channels (GitHub, Gitter, IRC, mailing lists, Google+, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
-
-We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Angular project to do the same.
-
-If any member of the community violates this code of conduct, the maintainers of the Angular project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
-
-If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at [conduct@angular.io](mailto:conduct@angular.io).

CONTRIBUTING.md

@@ -51,7 +51,7 @@ and help you to craft the change so that it is successfully accepted into the pr
 
 Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
 
-We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us a wealth of important information without going back & forth to you with additional questions like:
+We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
 
 - version of Angular used
 - 3rd-party libraries and their versions
@@ -61,7 +61,7 @@ A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm
 
 We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
 
-Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you we are going to close an issue that doesn't have enough info to be reproduced.
+Unfortunately we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
 
 You can file new issues by filling out our [new issue form](https://github.com/angular/angular/issues/new).
 
@@ -69,37 +69,36 @@ You can file new issues by filling out our [new issue form](https://github.com/a
 ### <a name="submit-pr"></a> Submitting a Pull Request (PR)
 Before you submit your Pull Request (PR) consider the following guidelines:
 
-1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
+* Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
   that relates to your submission. You don't want to duplicate effort.
-1. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
-  We cannot accept code without this. Make sure you sign with the primary email address of the Git identity that has been granted access to the Angular repository.
-1. Fork the angular/angular repo.
-1. Make your changes in a new git branch:
+* Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
+  We cannot accept code without this.
+* Make your changes in a new git branch:
 
      ```shell
      git checkout -b my-fix-branch master
      ```
 
-1. Create your patch, **including appropriate test cases**.
-1. Follow our [Coding Rules](#rules).
-1. Run the full Angular test suite, as described in the [developer documentation][dev-doc],
+* Create your patch, **including appropriate test cases**.
+* Follow our [Coding Rules](#rules).
+* Run the full Angular test suite, as described in the [developer documentation][dev-doc],
   and ensure that all tests pass.
-1. Commit your changes using a descriptive commit message that follows our
+* Commit your changes using a descriptive commit message that follows our
   [commit message conventions](#commit). Adherence to these conventions
   is necessary because release notes are automatically generated from these messages.
 
      ```shell
      git commit -a
      ```
-    Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
+  Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
 
-1. Push your branch to GitHub:
+* Push your branch to GitHub:
 
     ```shell
     git push origin my-fix-branch
     ```
 
-1. In GitHub, send a pull request to `angular:master`.
+* In GitHub, send a pull request to `angular:master`.
 * If we suggest changes then:
   * Make the required updates.
   * Re-run the Angular test suites to ensure tests are still passing.
@@ -173,12 +172,12 @@ The **header** is mandatory and the **scope** of the header is optional.
 Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
 to read on GitHub as well as in various git tools.
 
-The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
+Footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
 
 Samples: (even more [samples](https://github.com/angular/angular/commits/master))
 
 ```
-docs(changelog): update changelog to beta.5
+docs(changelog): update change log to beta.5
 ```
 ```
 fix(release): need to depend on latest rxjs and zone.js
@@ -203,7 +202,7 @@ Must be one of the following:
 * **test**: Adding missing tests or correcting existing tests
 
 ### Scope
-The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.
+The scope should be the name of the npm package affected (as perceived by person reading changelog generated from commit messages.
 
 The following is the list of supported scopes:
 
@@ -212,7 +211,6 @@ The following is the list of supported scopes:
 * **compiler**
 * **compiler-cli**
 * **core**
-* **elements**
 * **forms**
 * **http**
 * **language-service**
@@ -222,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:
 
@@ -233,10 +231,10 @@ There are currently a few exceptions to the "use package name" rule:
 * none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`)
 
 ### Subject
-The subject contains a succinct description of the change:
+The subject contains succinct description of the change:
 
 * use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize the first letter
+* don't capitalize first letter
 * no dot (.) at the end
 
 ### Body
@@ -260,19 +258,6 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
 * For corporations we'll need you to
   [print, sign and one of scan+email, fax or mail the form][corporate-cla].
 
-<hr>
-
-  If you have more than one Git identity, you must make sure that you sign the CLA using the primary email address associated with the ID that has been granted access to the Angular repository. Git identities can be associated with more than one email address, and only one is primary. Here are some links to help you sort out multiple Git identities and email addresses:
-
-  * https://help.github.com/articles/setting-your-commit-email-address-in-git/
-  * https://stackoverflow.com/questions/37245303/what-does-usera-committed-with-userb-13-days-ago-on-github-mean
-  * https://help.github.com/articles/about-commit-email-addresses/
-  * https://help.github.com/articles/blocking-command-line-pushes-that-expose-your-personal-email-address/
-
-  Note that if you have more than one Git identity, it is important to verify that you are logged in with the same ID with which you signed the CLA, before you commit changes. If not, your PR will fail the CLA check.  
-
-<hr>
-
 
 [angular-group]: https://groups.google.com/forum/#!forum/angular
 [coc]: https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md

LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2014-2018 Google, Inc. http://angular.io
+Copyright (c) 2014-2017 Google, Inc. http://angular.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,10 +1,15 @@
 [![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)
 [![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core)
 
 
+[![Sauce Test Status](https://saucelabs.com/browser-matrix/angular2-ci.svg)](https://saucelabs.com/u/angular2-ci)
+
+*Safari (7+), iOS (7+), Edge (14) and IE mobile (11) are tested on [BrowserStack][browserstack].*
+
 # Angular
 
 Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
@@ -13,19 +18,12 @@ Angular is a development platform for building mobile and desktop web applicatio
 
 [Get started in 5 minutes][quickstart].
 
-
-## Changelog
-
-[Learn about the latest improvements][changelog]. 
-
-
 ## Want to help?
 
 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
-[contributing]: https://github.com/angular/angular/blob/master/CONTRIBUTING.md
-[quickstart]: https://angular.io/guide/quickstart
-[changelog]: https://github.com/angular/angular/blob/master/CHANGELOG.md
-[ng]: https://angular.io
+[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,132 +1,17 @@
-workspace(name = "angular")
+load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
-#
-# Download Bazel toolchain dependencies as needed by build actions
-#
-
-http_archive(
-    name = "build_bazel_rules_nodejs",
-    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.8.0.zip",
-    strip_prefix = "rules_nodejs-0.8.0",
-    sha256 = "4e40dd49ae7668d245c3107645f2a138660fcfd975b9310b91eda13f0c973953",
+git_repository(
+   name = "build_bazel_rules_typescript",
+   remote = "https://github.com/bazelbuild/rules_typescript.git",
+   tag = "0.0.5",
 )
 
-http_archive(
-    name = "io_bazel_rules_webtesting",
-    url = "https://github.com/bazelbuild/rules_webtesting/archive/cfcaaf98553fee8e7063b5f5c11fd1b77e43d683.zip",
-    strip_prefix = "rules_webtesting-cfcaaf98553fee8e7063b5f5c11fd1b77e43d683",
-    sha256 = "636c7a9ac2ca13a04d982c2f9c874876ecc90a7b9ccfe4188156122b26ada7b3",
-)
+load("@build_bazel_rules_typescript//:defs.bzl", "node_repositories")
 
-http_archive(
-    name = "build_bazel_rules_typescript",
-    url = "https://github.com/bazelbuild/rules_typescript/archive/v0.13.0.zip",
-    strip_prefix = "rules_typescript-0.13.0",
-    sha256 = "8f2767ff56ad68c80c62e9a1cdc2ba2c2ba0b19d350f713365e5333045df02e3",
-)
+node_repositories(package_json = "//:package.json")
 
-http_archive(
-    name = "io_bazel_rules_go",
-    url = "https://github.com/bazelbuild/rules_go/releases/download/0.10.3/rules_go-0.10.3.tar.gz",
-    sha256 = "feba3278c13cde8d67e341a837f69a029f698d7a27ddbb2a202be7a10b22142a",
-)
-
-# This commit matches the version of buildifier in angular/ngcontainer
-# If you change this, also check if it matches the version in the angular/ngcontainer
-# version in /.circleci/config.yml
-BAZEL_BUILDTOOLS_VERSION = "fd9878fd5de921e0bbab3dcdcb932c2627812ee1"
-
-http_archive(
-    name = "com_github_bazelbuild_buildtools",
-    url = "https://github.com/bazelbuild/buildtools/archive/%s.zip" % BAZEL_BUILDTOOLS_VERSION,
-    strip_prefix = "buildtools-%s" % BAZEL_BUILDTOOLS_VERSION,
-    sha256 = "27bb461ade23fd44ba98723ad98f84ee9c83cd3540b773b186a1bc5037f3d862",
-)
-
-# Fetching the Bazel source code allows us to compile the Skylark linter
-http_archive(
-    name = "io_bazel",
-    url = "https://github.com/bazelbuild/bazel/archive/968f87900dce45a7af749a965b72dbac51b176b3.zip",
-    strip_prefix = "bazel-968f87900dce45a7af749a965b72dbac51b176b3",
-    sha256 = "e373d2ae24955c1254c495c9c421c009d88966565c35e4e8444c082cb1f0f48f",
-)
-
-# We have a source dependency on the Devkit repository, because it's built with
-# Bazel.
-# This allows us to edit sources and have the effect appear immediately without
-# re-packaging or "npm link"ing.
-# Even better, things like aspects will visit the entire graph including
-# ts_library rules in the devkit repository.
-http_archive(
-    name = "angular_devkit",
-    url = "https://github.com/angular/devkit/archive/v0.3.1.zip",
-    strip_prefix = "devkit-0.3.1",
-    sha256 = "31d4b597fe9336650acf13df053c1c84dcbe9c29c6a833bcac3819cd3fd8cad3",
-)
-
-http_archive(
-    name = "org_brotli",
-    url = "https://github.com/google/brotli/archive/c6333e1e79fb62ea088443f192293f964409b04e.zip",
-    strip_prefix = "brotli-c6333e1e79fb62ea088443f192293f964409b04e",
-    sha256 = "3f781988dee7dd3bcce2bf238294663cfaaf3b6433505bdb762e24d0a284d1dc",
-)
-
-#
-# Load and install our dependencies downloaded above.
-#
-
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
-
-check_bazel_version("0.13.0")
-node_repositories(package_json = ["//:package.json"])
-
-load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
-
-go_rules_dependencies()
-go_register_toolchains()
-
-load("@io_bazel_rules_webtesting//web:repositories.bzl", "browser_repositories", "web_test_repositories")
-
-web_test_repositories()
-browser_repositories(
-    chromium = True,
-    firefox = True,
-)
-
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
-
-ts_setup_workspace()
-
-#
-# Point Bazel to WORKSPACEs that live in subdirectories
-#
-
-local_repository(
-    name = "rxjs",
-    path = "node_modules/rxjs/src",
-)
-
-# Point to the integration test workspace just so that Bazel doesn't descend into it
-# when expanding the //... pattern
-local_repository(
-    name = "bazel_integration_test",
-    path = "integration/bazel",
-)
-
-#
-# Ask Bazel to manage these toolchain dependencies for us.
-# Bazel will run `yarn install` when one of these toolchains is requested during
-# a build.
-#
-
-yarn_install(
-    name = "ts-api-guardian_runtime_deps",
-    package_json = "//tools/ts-api-guardian:package.json",
-    yarn_lock = "//tools/ts-api-guardian:yarn.lock",
-)
-
-yarn_install(
-    name = "http-server_runtime_deps",
-    package_json = "//tools/http-server:package.json",
-    yarn_lock = "//tools/http-server:yarn.lock",
-)
+git_repository(
+    name = "build_bazel_rules_angular",
+    remote = "https://github.com/bazelbuild/rules_angular.git",
+    tag = "0.0.1",
+)

aio/.angular-cli.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "site"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "generated",
+        "app/search/search-worker.js",
+        "favicon.ico",
+        "pwa-manifest.json",
+        "google385281288605d160.html"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "aio",
+      "serviceWorker": false,
+      "styles": [
+        "styles.scss"
+      ],
+      "scripts": [
+      ],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "stage": "environments/environment.stage.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "component": {
+      "inlineStyle": true
+    }
+  }
+}

aio/.gitignore

@@ -30,7 +30,6 @@
 /connect.lock
 /coverage
 /libpeerconnection.log
-debug.log
 npm-debug.log
 testem.log
 /typings
@@ -46,4 +45,4 @@ protractor-results*.txt
 Thumbs.db
 
 # copied dependencies
-src/assets/js/lunr*
+src/assets/js/lunr*

aio/README.md

@@ -4,7 +4,7 @@ Everything in this folder is part of the documentation project. This includes
 
 * the web site for displaying the documentation
 * the dgeni configuration for converting source files to rendered files that can be viewed in the web site.
-* the tooling for setting up examples for development; and generating live-example and zip files from the examples.
+* the tooling for setting up examples for development; and generating plunkers and zip files from the examples.
 
 ## Developer tasks
 
@@ -13,17 +13,12 @@ You should run all these tasks from the `angular/aio` folder.
 Here are the most important tasks you might need to use:
 
 * `yarn` - install all the dependencies.
-* `yarn setup` - install all the dependencies, boilerplate, stackblitz, zips and run dgeni on the docs.
-* `yarn setup-local` - same as `setup`, but use the locally built Angular packages for aio and docs examples boilerplate.
-
-* `yarn build` - create a production build of the application (after installing dependencies, boilerplate, etc).
-* `yarn build-local` - same as `build`, but use `setup-local` instead of `setup`.
+* `yarn setup` - Install all the dependencies, boilerplate, plunkers, zips and runs dgeni on the docs.
 
 * `yarn start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
 * `yarn serve-and-sync` - run both the `docs-watch` and `start` in the same console.
 * `yarn lint` - check that the doc-viewer code follows our style rules.
-* `yarn test` - run all the unit tests once.
-* `yarn test --watch` - watch all the source files, for the doc-viewer, and run all the unit tests when any change.
+* `yarn test` - watch all the source files, for the doc-viewer, and run all the unit tests when any change.
 * `yarn e2e` - run all the e2e tests for the doc-viewer.
 
 * `yarn docs` - generate all the docs from the source files.
@@ -31,33 +26,32 @@ Here are the most important tasks you might need to use:
 * `yarn docs-lint` - check that the doc gen code follows our style rules.
 * `yarn docs-test` - run the unit tests for the doc generation code.
 
-* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally. Add the option `--local` to use your local version of Angular contained in the "dist" folder.
+* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
 * `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
-* `yarn generate-stackblitz` - generate the stackblitz files that are used by the `live-example` tags in the docs.
+* `yarn generate-plunkers` - generate the plunker files that are used by the `live-example` tags in the docs.
 * `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
 
 * `yarn example-e2e` - run all e2e tests for examples
-  - `yarn example-e2e --setup` - force webdriver update & other setup, then run tests
-  - `yarn example-e2e --filter=foo` - limit e2e tests to those containing the word "foo"
-  - `yarn example-e2e --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
+  - `yarn example-e2e -- --setup` - force webdriver update & other setup, then run tests
+  - `yarn example-e2e -- --filter=foo` - limit e2e tests to those containing the word "foo"
 
 * `yarn build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
 
 ## Using ServiceWorker locally
 
-Since abb36e3cb, running `yarn start --prod` will no longer set up the ServiceWorker, which
+Since abb36e3cb, running `yarn start -- --prod` will no longer set up the ServiceWorker, which
 would require manually running `yarn sw-manifest` and `yarn sw-copy` (something that is not possible
 with webpack serving the files from memory).
 
 If you want to test ServiceWorker locally, you can use `yarn build` and serve the files in `dist/`
-with `yarn http-server dist -p 4200`.
+with `yarn http-server -- dist -p 4200`.
 
 For more details see #16745.
 
 
 ## Guide to authoring
 
-There are two types of content in the documentation:
+There are two types of content in the documentatation:
 
 * **API docs**: descriptions of the modules, classes, interfaces, decorators, etc that make up the Angular platform.
 API docs are generated directly from the source code.
@@ -69,11 +63,6 @@ The content is written in markdown.
 All other content is written using markdown in text files, located in the `angular/aio/content` folder.
 More specifically, there are sub-folders that contain particular types of content: guides, tutorial and marketing.
 
-* **Code examples**: code examples need to be testable to ensure their accuracy.
-Also, our examples have a specific look and feel and allow the user to copy the source code. For larger
-examples they are rendered in a tabbed interface (e.g. template, HTML, and TypeScript on separate
-tabs). Additionally, some are live examples, which provide links where the code can be edited, executed, and/or downloaded. For details on working with code examples, please read the [Code snippets](https://angular.io/guide/docs-style-guide#code-snippets), [Source code markup](https://angular.io/guide/docs-style-guide#source-code-markup), and [Live examples](https://angular.io/guide/docs-style-guide#live-examples) pages of the [Authors Style Guide](https://angular.io/guide/docs-style-guide).
-
 We use the [dgeni](https://github.com/angular/dgeni) tool to convert these files into docs that can be viewed in the doc-viewer.
 
 The [Authors Style Guide](https://angular.io/guide/docs-style-guide) prescribes guidelines for
@@ -106,7 +95,8 @@ The general setup is as follows:
 * Open a terminal, ensure the dependencies are installed; run an initial doc generation; then start the doc-viewer:
 
 ```bash
-yarn setup
+yarn
+yarn docs
 yarn start
 ```
 
@@ -116,16 +106,8 @@ yarn start
 yarn docs-watch
 ```
 
->Alternatively, try the consolidated `serve-and-sync` command that builds, watches and serves in the same terminal window
-```bash
-yarn serve-and-sync
-```
-
 * Open a browser at https://localhost:4200/ and navigate to the document on which you want to work.
-You can automatically open the browser by using `yarn start -o` in the first terminal.
+You can automatically open the browser by using `yarn start -- -o` in the first terminal.
 
 * Make changes to the page's associated doc or example files. Every time a file is saved, the doc will
 be regenerated, the app will rebuild and the page will reload.
-
-* If you get a build error complaining about examples or any other odd behavior, be sure to consult
-the [Authors Style Guide](https://angular.io/guide/docs-style-guide).

aio/aio-builds-setup/dockerbuild/Dockerfile

@@ -19,8 +19,8 @@ ARG      AIO_DOMAIN_NAME=ngbuilds.io
 ARG TEST_AIO_DOMAIN_NAME=$AIO_DOMAIN_NAME.localhost
 ARG      AIO_GITHUB_ORGANIZATION=angular
 ARG TEST_AIO_GITHUB_ORGANIZATION=angular
-ARG      AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
-ARG TEST_AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
+ARG      AIO_GITHUB_TEAM_SLUGS=angular-core,aio-contributors
+ARG TEST_AIO_GITHUB_TEAM_SLUGS=angular-core,aio-contributors
 ARG      AIO_NGINX_HOSTNAME=$AIO_DOMAIN_NAME
 ARG TEST_AIO_NGINX_HOSTNAME=$TEST_AIO_DOMAIN_NAME
 ARG      AIO_NGINX_PORT_HTTP=80
@@ -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
 
 
 # Set up health check

aio/aio-builds-setup/dockerbuild/dnsmasq/dnsmasq.conf

@@ -6,7 +6,7 @@ server=8.8.4.4
 # Listen for DHCP and DNS requests only on this address.
 listen-address=127.0.0.1
 
-# Force an IP address for these domains.
+# Force an IP addres for these domains.
 address=/{{$AIO_NGINX_HOSTNAME}}/127.0.0.1
 address=/{{$AIO_UPLOAD_HOSTNAME}}/127.0.0.1
 address=/{{$TEST_AIO_NGINX_HOSTNAME}}/127.0.0.1

aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts

@@ -32,8 +32,7 @@ export class BuildCreator extends EventEmitter {
       then(() => Promise.all([this.exists(prDir), this.exists(shaDir)])).
       then(([prDirExisted, shaDirExisted]) => {
         if (shaDirExisted) {
-          const publicOrNot = isPublic ? 'public' : 'non-public';
-          throw new UploadError(409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
+          throw new UploadError(409, `Request to overwrite existing directory: ${shaDir}`);
         }
 
         dirToRemoveOnError = prDirExisted ? shaDir : prDir;

aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/index.ts

@@ -13,8 +13,10 @@ const AIO_REPO_SLUG = getEnvVar('AIO_REPO_SLUG');
 const AIO_TRUSTED_PR_LABEL = getEnvVar('AIO_TRUSTED_PR_LABEL');
 const AIO_UPLOAD_HOSTNAME = getEnvVar('AIO_UPLOAD_HOSTNAME');
 const AIO_UPLOAD_PORT = +getEnvVar('AIO_UPLOAD_PORT');
+const AIO_WWW_USER = getEnvVar('AIO_WWW_USER');
 
 // Run
+process.setuid(AIO_WWW_USER);   // TODO(gkalpak): Find more suitable way to run as `www-data`.
 _main();
 
 // Functions

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/helper.ts

@@ -18,7 +18,7 @@ const TEST_AIO_UPLOAD_PORT = +getEnvVar('TEST_AIO_UPLOAD_PORT');
 const WWW_USER = getEnvVar('AIO_WWW_USER');
 
 // Interfaces - Types
-export interface CmdResult { success: boolean; err: Error | null; stdout: string; stderr: string; }
+export interface CmdResult { success: boolean; err: Error; stdout: string; stderr: string; }
 export interface FileSpecs { content?: string; size?: number; }
 
 export type CleanUpFn = () => void;
@@ -143,7 +143,7 @@ class Helper {
       statusText = status[1];
     } else {
       statusCode = status;
-      statusText = http.STATUS_CODES[statusCode] || 'UNKNOWN_STATUS_CODE';
+      statusText = http.STATUS_CODES[statusCode];
     }
 
     return (result: CmdResult) => {
@@ -196,7 +196,7 @@ class Helper {
   }
 
   // Methods - Protected
-  protected createCleanUpFn(fn: () => void): CleanUpFn {
+  protected createCleanUpFn(fn: Function): CleanUpFn {
     const cleanUpFn = () => {
       const idx = this.cleanUpFns.indexOf(cleanUpFn);
       if (idx !== -1) {

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts

@@ -110,7 +110,6 @@ describe('upload-server (on HTTP)', () => {
       const authorizationHeader2 = isPublic ?
         authorizationHeader : `--header "Authorization: ${c.BV_verify_verifiedNotTrusted}"`;
       const cmdPrefix = curl('', `${authorizationHeader2} ${xFileHeader}`);
-      const overwriteRe = RegExp(`^Request to overwrite existing ${isPublic ? 'public' : 'non-public'} directory`);
 
 
       it('should not overwrite existing builds', done => {
@@ -121,7 +120,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
-          then(h.verifyResponse(409, overwriteRe)).
+          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -142,7 +141,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9Almost}`).
-          then(h.verifyResponse(409, overwriteRe)).
+          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -311,7 +310,7 @@ describe('upload-server (on HTTP)', () => {
           expect(h.buildExists(pr, sha0, isPublic)).toBe(false);
 
           uploadBuild(sha0).
-            then(h.verifyResponse(409, overwriteRe)).
+            then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
             then(() => {
               checkPrVisibility(isPublic);
               expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).toContain(pr);

aio/aio-builds-setup/dockerbuild/scripts-js/package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "prebuild": "yarn clean-dist",
     "build": "tsc",
-    "build-watch": "yarn tsc --watch",
+    "build-watch": "yarn tsc -- --watch",
     "clean-dist": "node --eval \"require('shelljs').rm('-rf', 'dist')\"",
     "dev": "concurrently --kill-others --raw --success first \"yarn build-watch\" \"yarn test-watch\"",
     "lint": "tslint --project tsconfig.json",
@@ -20,26 +20,26 @@
     "test-watch": "nodemon --exec \"yarn ~~test-only\" --watch dist"
   },
   "dependencies": {
-    "body-parser": "^1.18.2",
-    "express": "^4.15.4",
-    "jasmine": "^2.8.0",
-    "jsonwebtoken": "^8.0.1",
-    "shelljs": "^0.7.8",
-    "tslib": "^1.7.1"
+    "body-parser": "^1.17.2",
+    "express": "^4.14.1",
+    "jasmine": "^2.5.3",
+    "jsonwebtoken": "^7.3.0",
+    "shelljs": "^0.7.6"
   },
   "devDependencies": {
-    "@types/body-parser": "^1.16.5",
-    "@types/express": "^4.0.37",
-    "@types/jasmine": "^2.6.0",
-    "@types/jsonwebtoken": "^7.2.3",
-    "@types/node": "^8.0.30",
-    "@types/shelljs": "^0.7.4",
-    "@types/supertest": "^2.0.3",
-    "concurrently": "^3.5.0",
-    "nodemon": "^1.12.1",
+    "@types/body-parser": "^1.16.4",
+    "@types/express": "^4.0.35",
+    "@types/jasmine": "^2.5.43",
+    "@types/jsonwebtoken": "^7.2.0",
+    "@types/node": "^7.0.5",
+    "@types/shelljs": "^0.7.0",
+    "@types/supertest": "^2.0.0",
+    "concurrently": "^3.3.0",
+    "eslint": "^3.15.0",
+    "eslint-plugin-jasmine": "^2.2.0",
+    "nodemon": "^1.11.0",
     "supertest": "^3.0.0",
-    "tslint": "^5.7.0",
-    "tslint-jasmine-noSkipOrFocus": "^1.0.8",
-    "typescript": "^2.5.2"
+    "tslint": "^4.4.2",
+    "typescript": "^2.1.6"
   }
 }

aio/aio-builds-setup/dockerbuild/scripts-js/test/clean-up/build-cleaner.spec.ts

@@ -39,8 +39,8 @@ describe('BuildCleaner', () => {
     let cleanerGetExistingBuildNumbersSpy: jasmine.Spy;
     let cleanerGetOpenPrNumbersSpy: jasmine.Spy;
     let cleanerRemoveUnnecessaryBuildsSpy: jasmine.Spy;
-    let existingBuildsDeferred: {resolve: (v?: any) => void, reject: (e?: any) => void};
-    let openPrsDeferred: {resolve: (v?: any) => void, reject: (e?: any) => void};
+    let existingBuildsDeferred: {resolve: Function, reject: Function};
+    let openPrsDeferred: {resolve: Function, reject: Function};
     let promise: Promise<void>;
 
     beforeEach(() => {
@@ -195,7 +195,7 @@ describe('BuildCleaner', () => {
 
 
   describe('getOpenPrNumbers()', () => {
-    let prDeferred: {resolve: (v: any) => void, reject: (v: any) => void};
+    let prDeferred: {resolve: Function, reject: Function};
     let promise: Promise<number[]>;
 
     beforeEach(() => {
@@ -277,10 +277,7 @@ describe('BuildCleaner', () => {
 
     it('should catch errors and log them', () => {
       const consoleErrorSpy = spyOn(console, 'error');
-      shellRmSpy.and.callFake(() => {
-        // tslint:disable-next-line: no-string-throw
-        throw 'Test';
-      });
+      shellRmSpy.and.callFake(() => { throw 'Test'; });
 
       (cleaner as any).removeDir('/foo/bar');
 

aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-api.spec.ts

@@ -56,7 +56,7 @@ describe('GithubApi', () => {
 
 
     it('should not pass data to \'request()\'', () => {
-      (api.get as any)('foo', {}, {});
+      (api.get as Function)('foo', {}, {});
 
       expect(apiRequestSpy).toHaveBeenCalled();
       expect(apiRequestSpy.calls.argsFor(0)[2]).toBeUndefined();
@@ -144,7 +144,7 @@ describe('GithubApi', () => {
 
 
   describe('getPaginated()', () => {
-    let deferreds: {resolve: (v: any) => void, reject: (v: any) => void}[];
+    let deferreds: {resolve: Function, reject: Function}[];
 
     beforeEach(() => {
       deferreds = [];
@@ -292,7 +292,7 @@ describe('GithubApi', () => {
 
 
     describe('onResponse', () => {
-      let promise: Promise<object>;
+      let promise: Promise<Object>;
       let respond: (statusCode: number) => IncomingMessage;
 
       beforeEach(() => {

aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-pull-requests.spec.ts

@@ -22,7 +22,7 @@ describe('GithubPullRequests', () => {
 
   describe('addComment()', () => {
     let prs: GithubPullRequests;
-    let deferred: {resolve: (v: any) => void, reject: (v: any) => void};
+    let deferred: {resolve: Function, reject: Function};
 
     beforeEach(() => {
       prs = new GithubPullRequests('12345', 'foo/bar');

aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts

@@ -153,8 +153,7 @@ describe('BuildCreator', () => {
         it('should abort and skip further operations if the build does already exist', done => {
           existsValues[shaDir] = true;
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            const publicOrNot = isPublic ? 'public' : 'non-public';
-            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
+            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
@@ -170,8 +169,7 @@ describe('BuildCreator', () => {
           expect(bcExistsSpy(shaDir)).toBe(false);
 
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            const publicOrNot = isPublic ? 'public' : 'non-public';
-            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
+            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
@@ -223,7 +221,6 @@ describe('BuildCreator', () => {
 
 
         it('should reject with an UploadError', done => {
-          // tslint:disable-next-line: no-string-throw
           shellMkdirSpy.and.callFake(() => { throw 'Test'; });
           bc.create(pr, sha, archive, isPublic).catch(err => {
             expectToBeUploadError(err, 500, `Error while uploading to directory: ${shaDir}\nTest`);
@@ -408,7 +405,6 @@ describe('BuildCreator', () => {
 
 
         it('should reject with an UploadError', done => {
-          // tslint:disable-next-line: no-string-throw
           shellMvSpy.and.callFake(() => { throw 'Test'; });
           bc.updatePrVisibility(pr, makePublic).catch(err => {
             expectToBeUploadError(err, 500, `Error while making PR ${pr} ${makePublic ? 'public' : 'hidden'}.\nTest`);
@@ -436,11 +432,11 @@ describe('BuildCreator', () => {
 
   describe('exists()', () => {
     let fsAccessSpy: jasmine.Spy;
-    let fsAccessCbs: ((v?: any) => void)[];
+    let fsAccessCbs: Function[];
 
     beforeEach(() => {
       fsAccessCbs = [];
-      fsAccessSpy = spyOn(fs, 'access').and.callFake((_: string, cb: (v?: any) => void) => fsAccessCbs.push(cb));
+      fsAccessSpy = spyOn(fs, 'access').and.callFake((_: string, cb: Function) => fsAccessCbs.push(cb));
     });
 
 
@@ -484,7 +480,7 @@ describe('BuildCreator', () => {
     let shellChmodSpy: jasmine.Spy;
     let shellRmSpy: jasmine.Spy;
     let cpExecSpy: jasmine.Spy;
-    let cpExecCbs: ((...args: any[]) => void)[];
+    let cpExecCbs: Function[];
 
     beforeEach(() => {
       cpExecCbs = [];
@@ -492,7 +488,7 @@ describe('BuildCreator', () => {
       consoleWarnSpy = spyOn(console, 'warn');
       shellChmodSpy = spyOn(shell, 'chmod');
       shellRmSpy = spyOn(shell, 'rm');
-      cpExecSpy = spyOn(cp, 'exec').and.callFake((_: string, cb: (...args: any[]) => void) => cpExecCbs.push(cb));
+      cpExecSpy = spyOn(cp, 'exec').and.callFake((_: string, cb: Function) => cpExecCbs.push(cb));
     });
 
 
@@ -558,11 +554,7 @@ describe('BuildCreator', () => {
           done();
         });
 
-        shellChmodSpy.and.callFake(() => {
-          // tslint:disable-next-line: no-string-throw
-          throw 'Test';
-        });
-
+        shellChmodSpy.and.callFake(() => { throw 'Test'; });
         cpExecCbs[0]();
       });
 
@@ -575,11 +567,7 @@ describe('BuildCreator', () => {
           done();
         });
 
-        shellRmSpy.and.callFake(() => {
-          // tslint:disable-next-line: no-string-throw
-          throw 'Test';
-        });
-
+        shellRmSpy.and.callFake(() => { throw 'Test'; });
         cpExecCbs[0]();
       });
 

aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-server-factory.spec.ts

@@ -116,7 +116,7 @@ describe('uploadServerFactory', () => {
 
     it('should log the server address info on \'listening\'', () => {
       const consoleInfoSpy = spyOn(console, 'info');
-      const server = createUploadServer();
+      const server = createUploadServer('builds/dir');
       server.address = () => ({address: 'foo', family: '', port: 1337});
 
       expect(consoleInfoSpy).not.toHaveBeenCalled();

aio/aio-builds-setup/dockerbuild/scripts-js/tsconfig.json

@@ -1,66 +1,25 @@
 {
   "compilerOptions": {
-    /* Basic Options */
-    "target": "es5",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
-    "module": "commonjs",                        /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "alwaysStrict": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSourceMap": true,
     "lib": [
-      "es2015",
-      "es2016.array.include"
-    ],                                        /* Specify library files to be included in the compilation:  */
-    // "allowJs": true,                          /* Allow javascript files to be compiled. */
-    // "checkJs": true,                          /* Report errors in .js files. */
-    // "jsx": "preserve",                        /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,                      /* Generates corresponding '.d.ts' file. */
-    // "sourceMap": true,                        /* Generates corresponding '.map' file. */
-    // "outFile": "./",                          /* Concatenate and emit output to single file. */
-    "outDir": "dist",                         /* Redirect output structure to the directory. */
-    // "rootDir": "./",                          /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "removeComments": true,                   /* Do not emit comments to output. */
-    // "noEmit": true,                           /* Do not emit outputs. */
-    "importHelpers": true,                    /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,               /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-    /* Strict Type-Checking Options */
-    "strict": true,                              /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                    /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                 /* Enable strict null checks. */
-    // "noImplicitThis": true,                   /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                     /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    "noUnusedLocals": true,                   /* Report errors on unused locals. */
-    "noUnusedParameters": true,               /* Report errors on unused parameters. */
-    "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,       /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    // "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                              /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                           /* List of root folders whose combined content represents the structure of the project at runtime. */
+      "es2016"
+    ],
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "pretty": true,
+    "rootDir": ".",
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "target": "es5",
     "typeRoots": [
       "node_modules/@types"
-    ],                                        /* List of folders to include type definitions from. */
-    // "types": [],                              /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    // "preserveSymlinks": true,                 /* Do not resolve the real path of symlinks. */
-
-    /* Source Map Options */
-    // "sourceRoot": "./",                       /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "./",                          /* Specify the location where debugger should locate map files instead of generated locations. */
-    "inlineSourceMap": true,                  /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                    /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-    /* Experimental Options */
-    // "experimentalDecorators": true,           /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,            /* Enables experimental support for emitting type metadata for decorators. */
-
-    /* Other */
-    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
-    "newLine": "LF",                          /* Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix). */
-    "pretty": true,                           /* Stylize errors and messages using color and context. */
-    "skipLibCheck": true                      /* Skip type checking of all declaration files (*.d.ts). */
+    ]
   },
   "include": [
     "lib/**/*",

aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json

@@ -1,24 +1,15 @@
 {
-  "defaultSeverity": "error",
-  "extends": [
-    "tslint:recommended"
-  ],
-  "jsRules": {},
+  "extends": "tslint:recommended",
   "rules": {
     "array-type": [true, "array"],
     "arrow-parens": [true, "ban-single-arg-parens"],
     "interface-name": [true, "never-prefix"],
     "max-classes-per-file": [true, 4],
     "no-consecutive-blank-lines": [true, 2],
-    "no-console": [false],
-    "no-focused-test": true,
+    "no-console": false,
     "no-namespace": [true, "allow-declarations"],
-    "no-skipped-test": true,
     "no-string-literal": false,
     "quotemark": [true, "single"],
     "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"]
-  },
-  "rulesDirectory": [
-    "node_modules/tslint-jasmine-noSkipOrFocus"
-  ]
+  }
 }

aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-prod.sh

@@ -6,9 +6,10 @@ export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/GITHUB_TOKEN 2>/dev/null || ec
 export AIO_PREVIEW_DEPLOYMENT_TOKEN=$(head -c -1 /aio-secrets/PREVIEW_DEPLOYMENT_TOKEN 2>/dev/null || echo "MISSING_PREVIEW_DEPLOYMENT_TOKEN")
 
 # Start the upload-server instance
+# TODO(gkalpak): Ideally, the upload server should be run as a non-privileged user.
+#                (Currently, there doesn't seem to be a straight forward way.)
 action=$([ "$1" == "stop" ] && echo "stop" || echo "start")
 pm2 $action $AIO_SCRIPTS_JS_DIR/dist/lib/upload-server \
-  --uid $AIO_WWW_USER \
   --log /var/log/aio/upload-server-prod.log \
   --name aio-upload-server-prod \
   ${@:2}

aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-test.sh

@@ -15,12 +15,13 @@ export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/TEST_GITHUB_TOKEN 2>/dev/null
 export AIO_PREVIEW_DEPLOYMENT_TOKEN=$(head -c -1 /aio-secrets/TEST_PREVIEW_DEPLOYMENT_TOKEN 2>/dev/null || echo "TEST_PREVIEW_DEPLOYMENT_TOKEN")
 
 # Start the upload-server instance
+# TODO(gkalpak): Ideally, the upload server should be run as a non-privileged user.
+#                (Currently, there doesn't seem to be a straight forward way.)
 appName=aio-upload-server-test
 if [[ "$1" == "stop" ]]; then
   pm2 delete $appName
 else
   pm2 start $AIO_SCRIPTS_JS_DIR/dist/lib/verify-setup/start-test-upload-server.js \
-    --uid $AIO_WWW_USER \
     --log /var/log/aio/upload-server-test.log \
     --name $appName \
     --no-autorestart \

aio/aio-builds-setup/docs/overview--http-status-codes.md

@@ -46,8 +46,8 @@ with a bried explanation of what they mean:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing (public or non-public) directory (e.g. deploy existing build or
-  change PR visibility when the destination directory does already exist).
+  Request to overwrite existing directory (e.g. deploy existing build or change PR visibility when
+  the destination directory does already exist).
 
 - **413 (Payload Too Large)**:
   Payload larger than size specified in `AIO_UPLOAD_MAX_SIZE`.
@@ -71,8 +71,7 @@ with a bried explanation of what they mean:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing (public or non-public) directory (i.e. directories for both
-  visibilities exist).
+  Request to overwrite existing directory (i.e. directories for both visibilities exist).
   (Normally, this should not happen.)
 
 

aio/aio-builds-setup/docs/vm-setup--set-up-secrets.md

@@ -9,7 +9,7 @@ Necessary secrets:
    - Used for:
      - Retrieving open PRs without rate-limiting.
      - Retrieving PR author.
-     - Retrieving members of the trusted GitHub teams.
+     - Retrieving members of the `angular-core` team.
      - Posting comments with preview links on PRs.
 
 2. `PREVIEW_DEPLOYMENT_TOKEN`

aio/aio-builds-setup/docs/vm-setup--start-docker-container.md

@@ -74,7 +74,7 @@ sudo docker run \
 ## Example
 The following command would start a docker container based on the previously created `foobar-builds`
 docker image, alias it as 'foobar-builds-1' and map predefined directories on the host VM to be used
-by the container for accessing secrets and SSL certificates and keeping the build artifacts and logs.
+by the container for accesing secrets and SSL certificates and keeping the build artifacts and logs.
 
 ```
 sudo docker run \

aio/aio-builds-setup/docs/vm-setup--update-docker-container.md

@@ -9,7 +9,7 @@ VM host to update the preview server based on changes in the source code.
 The script will pull the latest changes from the origin's master branch and examine if there have
 been any changes in files inside the preview server source code directory (see below). If there are,
 it will create a new image and verify that is works as expected. Finally, it will stop and remove
-the old docker container and image, create a new container based on the new image and start it.
+the old docker container and image, create and new container based on the new image and start it.
 
 The script assumes that the preview server source code is in the repository's
 `aio/aio-builds-setup/` directory and expects the following inputs:

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
   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
   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/angular.json

@@ -1,189 +0,0 @@
-{
-  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "yarn"
-  },
-  "newProjectRoot": "projects",
-  "projects": {
-    "site": {
-      "root": "",
-      "sourceRoot": "src",
-      "projectType": "application",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
-            "aot": true,
-            "optimization": true,
-            "buildOptimizer": true,
-            "outputHashing": "all",
-            "sourceMap": true,
-            "statsJson": true,
-            "extractCss": true,
-            "extractLicenses": true,
-            "namedChunks": true,
-            "vendorChunk": false,
-            "polyfills": "src/polyfills.ts",
-            "assets": [
-              "src/assets",
-              "src/generated",
-              "src/app/search/search-worker.js",
-              "src/favicon.ico",
-              "src/pwa-manifest.json",
-              "src/google385281288605d160.html",
-              {
-                "glob": "custom-elements.min.js",
-                "input": "node_modules/@webcomponents/custom-elements",
-                "output": "/assets/js"
-              },
-              {
-                "glob": "native-shim.js",
-                "input": "node_modules/@webcomponents/custom-elements/src",
-                "output": "/assets/js"
-              }
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "fast": {
-              "optimization": false
-            },
-            "next": {
-              "fileReplacements": [
-                {
-                  "src": "src/environments/environment.ts",
-                  "replaceWith": "src/environments/environment.next.ts"
-                }
-              ]
-            },
-            "stable": {
-              "fileReplacements": [
-                {
-                  "src": "src/environments/environment.ts",
-                  "replaceWith": "src/environments/environment.stable.ts"
-                }
-              ]
-            },
-            "archive": {
-              "fileReplacements": [
-                {
-                  "src": "src/environments/environment.ts",
-                  "replaceWith": "src/environments/environment.archive.ts"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "site:build"
-          },
-          "configurations": {
-            "fast": {
-              "browserTarget": "site:build:fast"
-            },
-            "next": {
-              "browserTarget": "site:build:next"
-            },
-            "stable": {
-              "browserTarget": "site:build:stable"
-            },
-            "archive": {
-              "browserTarget": "site:build:archive"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "site:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "src/karma.conf.js",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "scripts": [],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "assets": [
-              "src/assets",
-              "src/generated",
-              "src/app/search/search-worker.js",
-              "src/favicon.ico",
-              "src/pwa-manifest.json",
-              "src/google385281288605d160.html",
-              {
-                "glob": "custom-elements.min.js",
-                "input": "node_modules/@webcomponents/custom-elements",
-                "output": "/assets/js"
-              },
-              {
-                "glob": "native-shim.js",
-                "input": "node_modules/@webcomponents/custom-elements/src",
-                "output": "/assets/js"
-              }
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": []
-          }
-        }
-      }
-    },
-    "site-e2e": {
-      "root": "",
-      "projectType": "application",
-      "cli": {},
-      "schematics": {},
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "tests/e2e/protractor.conf.js",
-            "devServerTarget": "site:serve"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tests/e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
-          }
-        }
-      }
-    }
-  },
-  "schematics": {
-    "@schematics/angular:component": {
-      "inlineStyle": true,
-      "prefix": "aio",
-      "styleext": "scss"
-    },
-    "@schematics/angular:directive": {
-      "prefix": "aio"
-    }
-  }
-}

aio/content/examples/.gitignore

@@ -1,38 +1,25 @@
 # 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/src/app.po.ts
-**/e2e/tsconfig.e2e.json
-**/src/karma.conf.js
-**/.angular-cli.json
-**/.editorconfig
-**/angular.json
-**/tsconfig.json
 **/bs-config.e2e.json
 **/bs-config.json
 **/package.json
 **/tslint.json
+**/karma.conf.js
 **/karma-test-shim.js
 **/browser-test-shim.js
-**/browserslist
 **/node_modules
 
 # built files
 *.map
 _test-output
+protractor-helpers.js
+*/e2e-spec.js
 **/*.js
+**/ts/**/*.js
+**/js-es6*/**/*.js
 dist/
 
 
@@ -56,31 +43,28 @@ 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
+
+# TS to JS
+!ts-to-js/js*/**/*.js
+ts-to-js/js*/**/system*.js
 
 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js
-!webpack/src/polyfills.ts
 
 # styleguide
 !styleguide/src/systemjs.custom.js
 
-# universal
-!universal/webpack.server.config.js
-
-# stackblitz
-*stackblitz.no-link.html
-
-# ngUpgrade testing
-!upgrade-phonecat-*/**/karma.conf.js
-!upgrade-phonecat-*/**/karma-test-shim.js
+# plunkers
+*plnkr.no-link.html

aio/content/examples/ajs-quick-reference/.angular-cli.1.json

@@ -1,62 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "angular.io-example"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      // #docregion styles
-      "styles": [
-        "styles.css"
-      ],
-      // #enddocregion styles
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}

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

@@ -0,0 +1,115 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('AngularJS to Angular Quick Reference Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display no poster images after bootstrap', function () {
+    testImagesAreDisplayed(false);
+  });
+
+  it('should display proper movie data', function () {
+    // We check only a few samples
+    let expectedSamples: any[] = [
+      {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
+      {row: 0, column: 2, value: 'Celeritas'},
+      {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format
+      {row: 1, column: 5, value: '$14.95'},
+      {row: 2, column: 4, value: 'PG-13'},
+      {row: 2, column: 7, value: '100%'},
+      {row: 2, column: 0, element: 'img', attr: 'src', value: 'images/ng-logo.png', contains: true},
+    ];
+
+    // Go through the samples
+    let movieRows = getMovieRows();
+    for (let i = 0; i < expectedSamples.length; i++) {
+      let sample = expectedSamples[i];
+      let tableCell = movieRows.get(sample.row)
+        .all(by.tagName('td')).get(sample.column);
+      // Check the cell or its nested element
+      let elementToCheck = sample.element
+        ? tableCell.element(by.tagName(sample.element))
+        : tableCell;
+
+      // Check element attribute or text
+      let valueToCheck = sample.attr
+        ? elementToCheck.getAttribute(sample.attr)
+        : elementToCheck.getText();
+
+      // Test for equals/contains/match
+      if (sample.contains) {
+        expect(valueToCheck).toContain(sample.value);
+      } else if (sample.matches) {
+        expect(valueToCheck).toMatch(sample.matches);
+      } else {
+        expect(valueToCheck).toEqual(sample.value);
+      }
+    }
+  });
+
+  it('should display images after Show Poster', function () {
+    testPosterButtonClick('Show Poster', true);
+  });
+
+  it('should hide images after Hide Poster', function () {
+    testPosterButtonClick('Hide Poster', false);
+  });
+
+  it('should display no movie when no favorite hero is specified', function () {
+    testFavoriteHero(null, 'Please enter your favorite hero.');
+  });
+
+  it('should display no movie for Magneta', function () {
+    testFavoriteHero('Magneta', 'No movie, sorry!');
+  });
+
+  it('should display a movie for Mr. Nice', function () {
+    testFavoriteHero('Mr. Nice', 'Excellent choice!');
+  });
+
+  function testImagesAreDisplayed(isDisplayed: boolean) {
+    let expectedMovieCount = 3;
+
+    let movieRows = getMovieRows();
+    expect(movieRows.count()).toBe(expectedMovieCount);
+    for (let i = 0; i < expectedMovieCount; i++) {
+      let movieImage = movieRows.get(i).element(by.css('td > img'));
+      expect(movieImage.isDisplayed()).toBe(isDisplayed);
+    }
+  }
+
+  function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
+    let posterButton = element(by.css('movie-list tr > th > button'));
+    expect(posterButton.getText()).toBe(expectedButtonText);
+
+    posterButton.click().then(function () {
+      testImagesAreDisplayed(isDisplayed);
+    });
+  }
+
+  function getMovieRows() {
+    return element.all(by.css('movie-list tbody > tr'));
+  }
+
+  function testFavoriteHero(heroName: string, expectedLabel: string) {
+    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'));
+
+    heroInput.clear().then(function () {
+      heroInput.sendKeys(heroName || '');
+      expect(resultLabel.getText()).toBe(expectedLabel);
+      if (heroName) {
+        expect(favoriteHeroLabel.isDisplayed()).toBe(true);
+        expect(favoriteHeroLabel.getText()).toContain(heroName);
+      } else {
+        expect(favoriteHeroLabel.isDisplayed()).toBe(false);
+      }
+    });
+  }
+});

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

@@ -1,115 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('AngularJS to Angular Quick Reference Tests', function () {
-
-  beforeAll(function () {
-    browser.get('');
-  });
-
-  it('should display no poster images after bootstrap', function () {
-    testImagesAreDisplayed(false);
-  });
-
-  it('should display proper movie data', function () {
-    // We check only a few samples
-    let expectedSamples: any[] = [
-      {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
-      {row: 0, column: 2, value: 'Celeritas'},
-      {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format
-      {row: 1, column: 5, value: '$14.95'},
-      {row: 2, column: 4, value: 'PG-13'},
-      {row: 2, column: 7, value: '100%'},
-      {row: 2, column: 0, element: 'img', attr: 'src', value: 'images/ng-logo.png', contains: true},
-    ];
-
-    // Go through the samples
-    let movieRows = getMovieRows();
-    for (let i = 0; i < expectedSamples.length; i++) {
-      let sample = expectedSamples[i];
-      let tableCell = movieRows.get(sample.row)
-        .all(by.tagName('td')).get(sample.column);
-      // Check the cell or its nested element
-      let elementToCheck = sample.element
-        ? tableCell.element(by.tagName(sample.element))
-        : tableCell;
-
-      // Check element attribute or text
-      let valueToCheck = sample.attr
-        ? elementToCheck.getAttribute(sample.attr)
-        : elementToCheck.getText();
-
-      // Test for equals/contains/match
-      if (sample.contains) {
-        expect(valueToCheck).toContain(sample.value);
-      } else if (sample.matches) {
-        expect(valueToCheck).toMatch(sample.matches);
-      } else {
-        expect(valueToCheck).toEqual(sample.value);
-      }
-    }
-  });
-
-  it('should display images after Show Poster', function () {
-    testPosterButtonClick('Show Poster', true);
-  });
-
-  it('should hide images after Hide Poster', function () {
-    testPosterButtonClick('Hide Poster', false);
-  });
-
-  it('should display no movie when no favorite hero is specified', function () {
-    testFavoriteHero(null, 'Please enter your favorite hero.');
-  });
-
-  it('should display no movie for Magneta', function () {
-    testFavoriteHero('Magneta', 'No movie, sorry!');
-  });
-
-  it('should display a movie for Mr. Nice', function () {
-    testFavoriteHero('Mr. Nice', 'Excellent choice!');
-  });
-
-  function testImagesAreDisplayed(isDisplayed: boolean) {
-    let expectedMovieCount = 3;
-
-    let movieRows = getMovieRows();
-    expect(movieRows.count()).toBe(expectedMovieCount);
-    for (let i = 0; i < expectedMovieCount; i++) {
-      let movieImage = movieRows.get(i).element(by.css('td > img'));
-      expect(movieImage.isDisplayed()).toBe(isDisplayed);
-    }
-  }
-
-  function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
-    let posterButton = element(by.css('app-movie-list tr > th > button'));
-    expect(posterButton.getText()).toBe(expectedButtonText);
-
-    posterButton.click().then(function () {
-      testImagesAreDisplayed(isDisplayed);
-    });
-  }
-
-  function getMovieRows() {
-    return element.all(by.css('app-movie-list tbody > tr'));
-  }
-
-  function testFavoriteHero(heroName: string, expectedLabel: string) {
-    let movieListComp = element(by.tagName('app-movie-list'));
-    let heroInput = movieListComp.element(by.tagName('input'));
-    let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
-    let resultLabel = movieListComp.element(by.css('span > p'));
-
-    heroInput.clear().then(function () {
-      heroInput.sendKeys(heroName || '');
-      expect(resultLabel.getText()).toBe(expectedLabel);
-      if (heroName) {
-        expect(favoriteHeroLabel.isDisplayed()).toBe(true);
-        expect(favoriteHeroLabel.getText()).toContain(heroName);
-      } else {
-        expect(favoriteHeroLabel.isDisplayed()).toBe(false);
-      }
-    });
-  }
-});

aio/content/examples/ajs-quick-reference/plnkr.json

@@ -0,0 +1,10 @@
+{
+  "description": "AngularJS to Angular Quick Reference",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags":["cookbook", "angularjs"]
+}

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,14 +1,28 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <base href="/">
     <meta charset="UTF-8">
     <title>AngularJS to Angular Quick Reference</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- #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/ajs-quick-reference/stackblitz.json

@@ -1,9 +0,0 @@
-{
-  "description": "AngularJS to Angular Quick Reference",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[1].*"
-  ],
-  "tags":["cookbook", "angularjs"]
-}

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

@@ -0,0 +1,351 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { logging, promise } from 'selenium-webdriver';
+
+/**
+ * The tests here basically just checking that the end styles
+ * of each animation are in effect.
+ *
+ * Relies on the Angular testability only becoming stable once
+ * animation(s) have finished.
+ *
+ * Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations
+ * but they're not supported in Chrome at the moment. The upcoming nganimate polyfill
+ * may also add some introspection support.
+ */
+describe('Animation Tests', () => {
+
+  const INACTIVE_COLOR = 'rgba(238, 238, 238, 1)';
+  const ACTIVE_COLOR = 'rgba(207, 216, 220, 1)';
+  const NO_TRANSFORM_MATRIX_REGEX = /matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*0\)/;
+
+  beforeEach(() => {
+    browser.get('');
+  });
+
+  describe('basic states', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-basic'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('styles inline in transitions', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('hero-list-inline-styles'));
+    });
+
+    it('are not kept after animation', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('combined transition syntax', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-combined-transitions'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('two-way transition syntax', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-twoway'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('enter & leave', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-enter-leave'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('enter & leave & states', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('hero-list-enter-leave-states'));
+    });
+
+    it('adds and removes and animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('auto style calc', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('hero-list-auto'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('height')).toBe('50px');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('different timings', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-timings'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('multiple keyframes', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-multistep'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('parallel groups', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-groups'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero(700);
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('adding active heroes', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-basic'));
+    });
+
+    it('animates between active and inactive', () => {
+      addActiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+    });
+  });
+
+  describe('callbacks', () => {
+    it('fires a callback on start and done', () => {
+      addActiveHero();
+      browser.manage().logs().get(logging.Type.BROWSER)
+        .then((logs: logging.Entry[]) => {
+          const animationMessages = logs.filter((log) => {
+            return log.message.indexOf('Animation') !== -1 ? true : false;
+          });
+
+          expect(animationMessages.length).toBeGreaterThan(0);
+        });
+    });
+  });
+
+  function addActiveHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Add active hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function addInactiveHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Add inactive hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function removeHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Remove hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function getScaleX(el: ElementFinder) {
+    return Promise.all([
+      getBoundingClientWidth(el),
+      getOffsetWidth(el)
+    ]).then(function(promiseResolutions) {
+      let clientWidth = promiseResolutions[0];
+      let offsetWidth = promiseResolutions[1];
+      return clientWidth / offsetWidth;
+    });
+  }
+
+  function getBoundingClientWidth(el: ElementFinder): promise.Promise<number> {
+    return browser.executeScript(
+      'return arguments[0].getBoundingClientRect().width',
+      el.getWebElement()
+    );
+  }
+
+  function getOffsetWidth(el: ElementFinder): promise.Promise<number> {
+    return browser.executeScript(
+      'return arguments[0].offsetWidth',
+      el.getWebElement()
+    );
+  }
+});

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

@@ -1,351 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by, ElementFinder } from 'protractor';
-import { logging, promise } from 'selenium-webdriver';
-
-/**
- * The tests here basically just checking that the end styles
- * of each animation are in effect.
- *
- * Relies on the Angular testability only becoming stable once
- * animation(s) have finished.
- *
- * Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations
- * but they're not supported in Chrome at the moment. The upcoming nganimate polyfill
- * may also add some introspection support.
- */
-describe('Animation Tests', () => {
-
-  const INACTIVE_COLOR = 'rgba(238, 238, 238, 1)';
-  const ACTIVE_COLOR = 'rgba(207, 216, 220, 1)';
-  const NO_TRANSFORM_MATRIX_REGEX = /matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*0\)/;
-
-  beforeEach(() => {
-    browser.get('');
-  });
-
-  describe('basic states', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(() => {
-      host = element(by.css('app-hero-list-basic'));
-    });
-
-    it('animates between active and inactive', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-
-      expect(getScaleX(li)).toBe(1.0);
-      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.1);
-      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.0);
-      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
-    });
-
-  });
-
-  describe('styles inline in transitions', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(function() {
-      host = element(by.css('app-hero-list-inline-styles'));
-    });
-
-    it('are not kept after animation', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.0);
-      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
-    });
-
-  });
-
-  describe('combined transition syntax', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(() => {
-      host = element(by.css('app-hero-list-combined-transitions'));
-    });
-
-    it('animates between active and inactive', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-
-      expect(getScaleX(li)).toBe(1.0);
-      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.1);
-      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.0);
-      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
-    });
-
-  });
-
-  describe('two-way transition syntax', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(() => {
-      host = element(by.css('app-hero-list-twoway'));
-    });
-
-    it('animates between active and inactive', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-
-      expect(getScaleX(li)).toBe(1.0);
-      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.1);
-      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.0);
-      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
-    });
-
-  });
-
-  describe('enter & leave', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(() => {
-      host = element(by.css('app-hero-list-enter-leave'));
-    });
-
-    it('adds and removes element', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
-
-      removeHero();
-      expect(li.isPresent()).toBe(false);
-    });
-
-  });
-
-  describe('enter & leave & states', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(function() {
-      host = element(by.css('app-hero-list-enter-leave-states'));
-    });
-
-    it('adds and removes and animates between active and inactive', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-
-      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.1);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
-
-      removeHero();
-      expect(li.isPresent()).toBe(false);
-    });
-
-  });
-
-  describe('auto style calc', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(function() {
-      host = element(by.css('app-hero-list-auto'));
-    });
-
-    it('adds and removes element', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-      expect(li.getCssValue('height')).toBe('50px');
-
-      removeHero();
-      expect(li.isPresent()).toBe(false);
-    });
-
-  });
-
-  describe('different timings', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(() => {
-      host = element(by.css('app-hero-list-timings'));
-    });
-
-    it('adds and removes element', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
-      expect(li.getCssValue('opacity')).toMatch('1');
-
-      removeHero();
-      expect(li.isPresent()).toBe(false);
-    });
-
-  });
-
-  describe('multiple keyframes', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(() => {
-      host = element(by.css('app-hero-list-multistep'));
-    });
-
-    it('adds and removes element', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
-      expect(li.getCssValue('opacity')).toMatch('1');
-
-      removeHero();
-      expect(li.isPresent()).toBe(false);
-    });
-
-  });
-
-  describe('parallel groups', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(() => {
-      host = element(by.css('app-hero-list-groups'));
-    });
-
-    it('adds and removes element', () => {
-      addInactiveHero();
-
-      let li = host.element(by.css('li'));
-      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
-      expect(li.getCssValue('opacity')).toMatch('1');
-
-      removeHero(700);
-      expect(li.isPresent()).toBe(false);
-    });
-
-  });
-
-  describe('adding active heroes', () => {
-
-    let host: ElementFinder;
-
-    beforeEach(() => {
-      host = element(by.css('app-hero-list-basic'));
-    });
-
-    it('animates between active and inactive', () => {
-      addActiveHero();
-
-      let li = host.element(by.css('li'));
-
-      expect(getScaleX(li)).toBe(1.1);
-      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.0);
-      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
-
-      li.click();
-      browser.driver.sleep(300);
-      expect(getScaleX(li)).toBe(1.1);
-      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
-    });
-  });
-
-  describe('callbacks', () => {
-    it('fires a callback on start and done', () => {
-      addActiveHero();
-      browser.manage().logs().get(logging.Type.BROWSER)
-        .then((logs: logging.Entry[]) => {
-          const animationMessages = logs.filter((log) => {
-            return log.message.indexOf('Animation') !== -1 ? true : false;
-          });
-
-          expect(animationMessages.length).toBeGreaterThan(0);
-        });
-    });
-  });
-
-  function addActiveHero(sleep?: number) {
-    sleep = sleep || 500;
-    element(by.buttonText('Add active hero')).click();
-    browser.driver.sleep(sleep);
-  }
-
-  function addInactiveHero(sleep?: number) {
-    sleep = sleep || 500;
-    element(by.buttonText('Add inactive hero')).click();
-    browser.driver.sleep(sleep);
-  }
-
-  function removeHero(sleep?: number) {
-    sleep = sleep || 500;
-    element(by.buttonText('Remove hero')).click();
-    browser.driver.sleep(sleep);
-  }
-
-  function getScaleX(el: ElementFinder) {
-    return Promise.all([
-      getBoundingClientWidth(el),
-      getOffsetWidth(el)
-    ]).then(function(promiseResolutions) {
-      let clientWidth = promiseResolutions[0];
-      let offsetWidth = promiseResolutions[1];
-      return clientWidth / offsetWidth;
-    });
-  }
-
-  function getBoundingClientWidth(el: ElementFinder) {
-    return browser.executeScript(
-      'return arguments[0].getBoundingClientRect().width',
-      el.getWebElement()
-    ) as PromiseLike<number>;
-  }
-
-  function getOffsetWidth(el: ElementFinder) {
-    return browser.executeScript(
-      'return arguments[0].offsetWidth',
-      el.getWebElement()
-    ) as PromiseLike<number>;
-  }
-});

aio/content/examples/animations/plnkr.json

@@ -0,0 +1,8 @@
+{
+  "description": "Angular Animations",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ]
+}

aio/content/examples/animations/src/app/app.module.ts

@@ -1,6 +1,5 @@
-// #docplaster
-import { NgModule } from '@angular/core';
 // #docregion animations-module
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 // #enddocregion animations-module
@@ -16,12 +15,11 @@ import { HeroListAutoComponent } from './hero-list-auto.component';
 import { HeroListGroupsComponent } from './hero-list-groups.component';
 import { HeroListMultistepComponent } from './hero-list-multistep.component';
 import { HeroListTimingsComponent } from './hero-list-timings.component';
-// #docregion animations-module
 
+// #docregion animation-module
 @NgModule({
   imports: [ BrowserModule, BrowserAnimationsModule ],
-  // ... more stuff ...
-// #enddocregion animations-module
+  // #enddocregion animation-module
   declarations: [
     HeroTeamBuilderComponent,
     HeroListBasicComponent,
@@ -36,8 +34,5 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
     HeroListGroupsComponent
   ],
   bootstrap: [ HeroTeamBuilderComponent ]
-// #docregion animations-module
 })
 export class AppModule { }
-// #enddocregion animations-module
-

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

@@ -10,10 +10,10 @@ import {
   transition
 } from '@angular/animations';
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-auto',
+  selector: 'hero-list-auto',
   // #docregion template
   template: `
     <ul>
@@ -43,5 +43,5 @@ import { Hero } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListAutoComponent {
-   @Input() heroes: Hero[];
+  @Input() heroes: Heroes;
 }

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

@@ -14,10 +14,10 @@ import {
 } from '@angular/animations';
 // #enddocregion imports
 
-import { Hero } from './hero.service';
+import { Heroes } 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
@@ -66,5 +66,5 @@ import { Hero } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListBasicComponent {
-   @Input() heroes: Hero[];
+  @Input() heroes: Heroes;
 }

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

@@ -13,10 +13,10 @@ import {
 } from '@angular/animations';
 // #enddocregion imports
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
- selector: 'app-hero-list-combined-transitions',
+ selector: 'hero-list-combined-transitions',
  // #docregion template
  template: `
    <ul>
@@ -55,5 +55,5 @@ import { Hero } from './hero.service';
  // #enddocregion animationdef
 })
 export class HeroListCombinedTransitionsComponent {
-  @Input() heroes: Hero[];
+ @Input() heroes: Heroes;
 }

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

@@ -10,10 +10,10 @@ import {
   transition
 } from '@angular/animations';
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-enter-leave-states',
+  selector: 'hero-list-enter-leave-states',
   // #docregion template
   template: `
     <ul>
@@ -59,5 +59,5 @@ import { Hero } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListEnterLeaveStatesComponent {
-   @Input() heroes: Hero[];
+  @Input() heroes: Heroes;
 }

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

@@ -10,10 +10,10 @@ import {
   transition
 } from '@angular/animations';
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-enter-leave',
+  selector: 'hero-list-enter-leave',
   // #docregion template
   template: `
     <ul>
@@ -47,5 +47,5 @@ import { Hero } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListEnterLeaveComponent {
-   @Input() heroes: Hero[];
+  @Input() heroes: Heroes;
 }

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

@@ -11,10 +11,10 @@ import {
   group
 } from '@angular/animations';
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-groups',
+  selector: 'hero-list-groups',
   template: `
     <ul>
       <li *ngFor="let hero of heroes"
@@ -76,5 +76,5 @@ import { Hero } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListGroupsComponent {
-   @Input() heroes: Hero[];
+  @Input() heroes: Heroes;
 }

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

@@ -12,10 +12,10 @@ import {
 } from '@angular/animations';
 // #enddocregion imports
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
- selector: 'app-hero-list-inline-styles',
+ selector: 'hero-list-inline-styles',
  // #docregion template
  template: `
    <ul>
@@ -56,5 +56,5 @@ import { Hero } from './hero.service';
  // #enddocregion animationdef
 })
 export class HeroListInlineStylesComponent {
-  @Input() heroes: Hero[];
+ @Input() heroes: Heroes;
 }

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

@@ -12,10 +12,10 @@ import {
   AnimationEvent
 } from '@angular/animations';
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-multistep',
+  selector: 'hero-list-multistep',
   // #docregion template
   template: `
     <ul>
@@ -59,7 +59,7 @@ import { Hero } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListMultistepComponent {
-   @Input() heroes: Hero[];
+  @Input() heroes: Heroes;
 
   animationStarted(event: AnimationEvent) {
     console.warn('Animation started: ', event);

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

@@ -10,10 +10,10 @@ import {
   transition
 } from '@angular/animations';
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
-  selector: 'app-hero-list-timings',
+  selector: 'hero-list-timings',
   template: `
     <ul>
       <li *ngFor="let hero of heroes"
@@ -54,5 +54,5 @@ import { Hero } from './hero.service';
   // #enddocregion animationdef
 })
 export class HeroListTimingsComponent {
-   @Input() heroes: Hero[];
+  @Input() heroes: Heroes;
 }

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

@@ -13,10 +13,10 @@ import {
 } from '@angular/animations';
 // #enddocregion imports
 
-import { Hero } from './hero.service';
+import { Heroes } from './hero.service';
 
 @Component({
- selector: 'app-hero-list-twoway',
+ selector: 'hero-list-twoway',
  // #docregion template
  template: `
    <ul>
@@ -54,5 +54,5 @@ import { Hero } from './hero.service';
  // #enddocregion animationdef
 })
 export class HeroListTwowayComponent {
-  @Input() heroes: Hero[];
+ @Input() heroes: Heroes;
 }

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

@@ -1,41 +1,40 @@
 import { Component } from '@angular/core';
 
-import { Hero, HeroService } from './hero.service';
+import { Heroes } 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>
-      <button [disabled]="!heroService.canAdd()" (click)="heroService.addActive()">Add active hero</button>
-      <button [disabled]="!heroService.canRemove()" (click)="heroService.remove()">Remove hero</button>
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addInactive()">Add inactive hero</button>
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addActive()">Add active hero</button>
+      <button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button>
     </div>
-
     <div class="columns">
       <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>
+        <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 +44,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>
   `,
@@ -88,12 +87,8 @@ import { Hero, HeroService } from './hero.service';
       min-height: 6em;
     }
   `],
-  providers: [HeroService]
+  providers: [Heroes]
 })
 export class HeroTeamBuilderComponent {
-  heroes: Hero[];
-
-  constructor(private heroService: HeroService) {
-    this.heroes = heroService.heroes;
-  }
+  constructor(private heroes: Heroes) { }
 }

aio/content/examples/animations/src/app/hero.service.ts

@@ -1,16 +1,16 @@
 import { Injectable } from '@angular/core';
 
-// #docregion hero
-export class Hero {
-  constructor(public name: string, public state = 'inactive') { }
+class Hero {
+  constructor(public name: string,
+              public state = 'inactive') {
+  }
 
   toggleState() {
-    this.state = this.state === 'active' ? 'inactive' : 'active';
+    this.state = (this.state === 'active' ? 'inactive' : 'active');
   }
 }
-// #enddocregion hero
 
-const ALL_HEROES = [
+let ALL_HEROES = [
   'Windstorm',
   'RubberMan',
   'Bombasto',
@@ -25,30 +25,36 @@ const ALL_HEROES = [
 ].map(name => new Hero(name));
 
 @Injectable()
-export class HeroService {
+export class Heroes implements Iterable<Hero> {
 
-  heroes: Hero[] = [];
+  currentHeroes: Hero[] = [];
+
+  [Symbol.iterator]() {
+    return this.currentHeroes.values();
+  }
 
   canAdd() {
-    return this.heroes.length < ALL_HEROES.length;
+    return this.currentHeroes.length < ALL_HEROES.length;
   }
 
   canRemove() {
-    return this.heroes.length > 0;
+    return this.currentHeroes.length > 0;
   }
 
-  addActive(active = true) {
-    let hero = ALL_HEROES[this.heroes.length];
-    hero.state = active ? 'active' : 'inactive';
-    this.heroes.push(hero);
+  addActive() {
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'active';
+    this.currentHeroes.push(hero);
   }
 
   addInactive() {
-    this.addActive(false);
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'inactive';
+    this.currentHeroes.push(hero);
   }
 
   remove() {
-    this.heroes.length -= 1;
+    this.currentHeroes.splice(this.currentHeroes.length - 1, 1);
   }
 
 }

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/animations/stackblitz.json

@@ -1,7 +0,0 @@
-{
-  "description": "Angular Animations",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js"
-  ]
-}

aio/content/examples/aot-compiler/e2e-spec.ts

@@ -0,0 +1,27 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('AOT Compilation', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    it('should load page and click button', function (done: any) {
+      let headingSelector = element.all(by.css('h1')).get(0);
+      expect(headingSelector.getText()).toEqual('Hello Angular');
+
+      expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true);
+      expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true);
+      expect(element.all(by.xpath('//div[text()="Magma"]')).get(0).isPresent()).toBe(true);
+      expect(element.all(by.xpath('//div[text()="Tornado"]')).get(0).isPresent()).toBe(true);
+
+      let toggleButton = element.all(by.css('button')).get(0);
+      toggleButton.click().then(function() {
+        expect(headingSelector.isPresent()).toBe(false);
+        done();
+      });
+    });
+});

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

@@ -0,0 +1,3 @@
+{
+  "build": "build:aot"
+}

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

@@ -0,0 +1,33 @@
+// #docregion
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs    from 'rollup-plugin-commonjs';
+import uglify      from 'rollup-plugin-uglify';
+
+// #docregion config
+export default {
+  entry: 'src/main.js',
+  dest: 'src/build.js', // output a single application bundle
+  sourceMap: false,
+  format: 'iife',
+  onwarn: function(warning) {
+    // Skip certain warnings
+
+    // should intercept ... but doesn't in some rollup versions
+    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+
+    // console.warn everything else
+    console.warn( warning.message );
+  },
+  plugins: [
+      nodeResolve({jsnext: true, module: true}),
+      // #docregion commonjs
+      commonjs({
+        include: 'node_modules/rxjs/**',
+      }),
+      // #enddocregion commonjs
+      // #docregion uglify
+      uglify()
+      // #enddocregion uglify
+  ]
+};
+// #enddocregion config

aio/content/examples/aot-compiler/src/app/app.component.html

@@ -0,0 +1,7 @@
+<!-- #docregion -->
+<button (click)="toggleHeading()">Toggle Heading</button>
+<h1 *ngIf="showHeading">Hello Angular</h1>
+
+<h3>List of Heroes</h3>
+<div *ngFor="let hero of heroes">{{hero}}</div>
+

aio/content/examples/aot-compiler/src/app/app.component.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  showHeading = true;
+  heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
+
+  toggleHeading() {
+    this.showHeading = !this.showHeading;
+  }
+}

aio/content/examples/aot-compiler/src/app/app.module.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }  from './app.component';
+
+@NgModule({
+  imports:      [ BrowserModule ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }

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

@@ -0,0 +1,24 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ahead of time compilation (JIT)</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+  <!-- #docregion jit -->
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main-jit.js').catch(function(err){ console.error(err); });
+    </script>
+  <!-- #enddocregion jit -->
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>

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

@@ -0,0 +1,20 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ahead of time compilation</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+  <!-- #docregion bundle -->
+  <script src="build.js"></script>
+  <!-- #enddocregion bundle -->
+</html>

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

@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule }              from './app/app.module';
+
+console.log('Running JIT compiled');
+platformBrowserDynamic().bootstrapModule(AppModule);

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

@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowser }    from '@angular/platform-browser';
+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

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
+  },
+
+  "files": [
+    "src/app/app.module.ts",
+    "src/main.ts"
+  ],
+
+  "angularCompilerOptions": {
+   "genDir": "aot",
+   "skipMetadataEmit" : true
+ }
+}

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

@@ -0,0 +1,100 @@
+'use strict'; // necessary for es6 output in node
+
+import { protractor, browser, element, by, ElementFinder } from 'protractor';
+
+const nameSuffix = 'X';
+
+class Hero {
+  id: number;
+  name: string;
+}
+
+describe('Architecture', () => {
+
+  const expectedTitle = 'Architecture of Angular';
+  const expectedH2 = ['Hero List', 'Sales Tax Calculator'];
+
+  beforeAll(() => browser.get(''));
+
+  it(`has title '${expectedTitle}'`, () => {
+    expect(browser.getTitle()).toEqual(expectedTitle);
+  });
+
+  it(`has h2 '${expectedH2}'`, () => {
+    let h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
+    expect(h2).toEqual(expectedH2);
+  });
+
+  describe('Hero', heroTests);
+  describe('Salex tax', salesTaxTests);
+});
+
+function heroTests() {
+
+  const targetHero: Hero = { id: 2, name: 'Mr. Nice' };
+
+  it('has the right number of heroes', () => {
+    let page = getPageElts();
+    expect(page.heroes.count()).toEqual(3);
+  });
+
+  it('has no hero details initially', function () {
+    let page = getPageElts();
+    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+  });
+
+  it('shows selected hero details', async () => {
+    await element(by.cssContainingText('li', targetHero.name)).click();
+    let page = getPageElts();
+    let hero = await heroFromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name);
+  });
+
+  it(`shows updated hero name in details`, async () => {
+    let input = element.all(by.css('input')).first();
+    input.sendKeys(nameSuffix);
+    let page = getPageElts();
+    let hero = await heroFromDetail(page.heroDetail);
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName);
+  });
+}
+
+function salesTaxTests() {
+  it('has no sales tax initially', function () {
+    let page = getPageElts();
+    expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
+  });
+
+  it('shows sales tax', async function () {
+    let page = getPageElts();
+    page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
+    expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
+  });
+}
+
+// Helper functions
+
+function getPageElts() {
+  return {
+    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'))
+  };
+}
+
+async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
+  // Get hero id from the first <div>
+  // let _id = await detail.all(by.css('div')).first().getText();
+  let _id = await detail.all(by.css('div')).first().getText();
+  // Get name from the h2
+  // let _name = await detail.element(by.css('h4')).getText();
+  let _name = await detail.element(by.css('h4')).getText();
+  return {
+    id: +_id.substr(_id.indexOf(' ') + 1),
+    name: _name.substr(0, _name.lastIndexOf(' '))
+  };
+}

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

@@ -1,100 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { protractor, browser, element, by, ElementFinder } from 'protractor';
-
-const nameSuffix = 'X';
-
-class Hero {
-  id: number;
-  name: string;
-}
-
-describe('Architecture', () => {
-
-  const expectedTitle = 'Architecture of Angular';
-  const expectedH2 = ['Hero List', 'Sales Tax Calculator'];
-
-  beforeAll(() => browser.get(''));
-
-  it(`has title '${expectedTitle}'`, () => {
-    expect(browser.getTitle()).toEqual(expectedTitle);
-  });
-
-  it(`has h2 '${expectedH2}'`, () => {
-    let h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
-    expect(h2).toEqual(expectedH2);
-  });
-
-  describe('Hero', heroTests);
-  describe('Salex tax', salesTaxTests);
-});
-
-function heroTests() {
-
-  const targetHero: Hero = { id: 2, name: 'Mr. Nice' };
-
-  it('has the right number of heroes', () => {
-    let page = getPageElts();
-    expect(page.heroes.count()).toEqual(3);
-  });
-
-  it('has no hero details initially', function () {
-    let page = getPageElts();
-    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
-  });
-
-  it('shows selected hero details', async () => {
-    await element(by.cssContainingText('li', targetHero.name)).click();
-    let page = getPageElts();
-    let hero = await heroFromDetail(page.heroDetail);
-    expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(targetHero.name);
-  });
-
-  it(`shows updated hero name in details`, async () => {
-    let input = element.all(by.css('input')).first();
-    input.sendKeys(nameSuffix);
-    let page = getPageElts();
-    let hero = await heroFromDetail(page.heroDetail);
-    let newName = targetHero.name + nameSuffix;
-    expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(newName);
-  });
-}
-
-function salesTaxTests() {
-  it('has no sales tax initially', function () {
-    let page = getPageElts();
-    expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
-  });
-
-  it('shows sales tax', async function () {
-    let page = getPageElts();
-    page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
-    expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
-  });
-}
-
-// Helper functions
-
-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'))
-  };
-}
-
-async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
-  // Get hero id from the first <div>
-  // let _id = await detail.all(by.css('div')).first().getText();
-  let _id = await detail.all(by.css('div')).first().getText();
-  // Get name from the h2
-  // let _name = await detail.element(by.css('h4')).getText();
-  let _name = await detail.element(by.css('h4')).getText();
-  return {
-    id: +_id.substr(_id.indexOf(' ') + 1),
-    name: _name.substr(0, _name.lastIndexOf(' '))
-  };
-}

aio/content/examples/architecture/plnkr.json

@@ -0,0 +1,9 @@
+{
+  "description": "Intro to Angular",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!app/hero-list.component.1.*"
+  ]
+}

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/backend.service.ts

@@ -15,7 +15,7 @@ export class BackendService {
 
   getAll(type: Type<any>): PromiseLike<any[]> {
     if (type === Hero) {
-      // TODO: get from the database
+      // TODO get from the database
       return Promise.resolve<Hero[]>(HEROES);
     }
     let err = new Error('Cannot get object of this type');

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

@@ -1,10 +1,9 @@
 <hr>
 <h4>{{hero.name}} Detail</h4>
 <div>Id: {{hero.id}}</div>
-<label>Name:
+<div>Name:
   <!-- #docregion ngModel -->
   <input [(ngModel)]="hero.name">
   <!-- #enddocregion ngModel -->
-</label>
-<br />
-<label>Power: <input [(ngModel)]="hero.power"></label>
+</div>
+<div>Power:<input [(ngModel)]="hero.power"></div>

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>