release: cut the v16.2.2 release

ci: correctly check aio job results (#51464 )
Correctly check the aio job result to determine if we should deploy. PR Close #51464
2026-09-14 13:54:52 +08:00 · 2023-08-23 10:35:53 -07:00 · 2023-08-22 11:41:31 -07:00 · 2023-08-22 10:39:24 -07:00 · 2023-08-22 08:04:01 -07:00 · 2023-08-22 08:02:55 -07:00
155 changed files with 1933 additions and 737 deletions
@@ -249,6 +249,7 @@ jobs:
            - ./ng
            - ./bazel_repository_cache

+  # TODO: Remove test job after confirmation that the GHA version is stable.
  test:
    executor:
      name: test-browser-executor
@@ -312,48 +313,6 @@ jobs:
      - notify_webhook_on_fail:
          webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL

-  test_aio:
-    executor:
-      name: test-browser-executor
-      resource_class: 2xlarge+
-    steps:
-      - custom_attach_workspace
-      - init_environment
-
-        # Run all aio tests
-      - run:
-          command: yarn --cwd aio test:ci
-          no_output_timeout: 20m
-
-        # Check the bundle sizes.
-      - run: yarn --cwd aio payload-size
-
-  deploy_aio:
-    executor:
-      name: test-browser-executor
-      resource_class: 2xlarge+
-    steps:
-      - custom_attach_workspace
-      - init_environment
-        # Deploy angular.io to production (if necessary)
-      - run: setPublicVar_CI_STABLE_BRANCH
-      - run: yarn --cwd aio deploy-production
-
-  test_aio_local:
-    executor:
-      name: test-browser-executor
-      resource_class: 2xlarge+
-    steps:
-      - custom_attach_workspace
-      - init_environment
-        # Run all aio tests (with local Angular packages)
-      - run:
-          command: yarn --cwd aio test-local:ci
-          no_output_timeout: 20m
-
-        # Check the bundle sizes.
-      - run: yarn --cwd aio payload-size aio-local
-
  # The `build-npm-packages` tasks exist for backwards-compatibility with old scripts and
  # tests that rely on the pre-Bazel `dist/packages-dist` output structure (build.sh).
  # Having multiple jobs that independently build in this manner duplicates some work; we build
@@ -593,15 +552,6 @@ workflows:
      - legacy-unit-tests-saucelabs:
          requires:
            - setup
-      - test_aio:
-          requires:
-            - setup
-      - deploy_aio:
-          requires:
-            - test_aio
-      - test_aio_local:
-          requires:
-            - setup
      - publish_packages_as_artifacts:
          requires:
            - build-npm-packages
@@ -610,8 +560,6 @@ workflows:
          requires:
            # Only publish if tests and integration tests pass
            - test
-            # Only publish if `aio`/`docs` tests using the locally built Angular packages pass
-            - test_aio_local
            # Get the artifacts to publish from the build-packages-dist job
            # since the publishing script expects the legacy outputs layout.
            - build-npm-packages
@@ -89,3 +89,83 @@ jobs:
        run: yarn install --frozen-lockfile --network-timeout 100000
      - name: Test all windows CI targets
        run: bazel test --test_tag_filters="-browser:chromium-local" //packages/compiler-cli/...
+
+  test:
+    runs-on: ubuntu-latest-4core
+    steps:
+      - name: Initialize environment
+        uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+        with:
+          cache-node-modules: true
+      - name: Setup Bazel
+        uses: angular/dev-infra/github-actions/bazel/setup@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+      - name: Setup Bazel Remote Caching
+        uses: angular/dev-infra/github-actions/bazel/configure-remote@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+      - name: Install node modules
+        run: yarn install --frozen-lockfile --network-timeout 100000
+      - name: Run CI tests for framework
+        run: yarn test:ci
+
+  aio:
+    runs-on: ubuntu-latest-4core
+    steps:
+      - name: Initialize environment
+        uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+        with:
+          cache-node-modules: true
+          node-module-directories: |
+            ./aio/node_modules
+      - name: Setup Bazel
+        uses: angular/dev-infra/github-actions/bazel/setup@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+      - name: Setup Bazel RBE
+        uses: angular/dev-infra/github-actions/bazel/configure-remote@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+      - name: Install node modules for aio
+        run: yarn install --cwd aio --frozen-lockfile
+      - name: Run AIO tests with upstream packages
+        run: yarn --cwd aio test:ci
+      - name: Check generated bundle sizes
+        run: yarn --cwd aio payload-size
+
+  aio-local:
+    runs-on:
+      labels: ubuntu-latest-4core
+    steps:
+      - name: Initialize environment
+        uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+        with:
+          cache-node-modules: true
+          node-module-directories: |
+            ./aio/node_modules
+      - name: Setup Bazel
+        uses: angular/dev-infra/github-actions/bazel/setup@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+      - name: Setup Bazel RBE
+        uses: angular/dev-infra/github-actions/bazel/configure-remote@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+      - name: Install node modules
+        run: yarn install --cwd aio --frozen-lockfile
+      - name: Run AIO tests with local packages
+        run: yarn --cwd aio test-local:ci
+      - name: Check generated bundle sizes
+        run: yarn --cwd aio payload-size aio-local
+
+  aio-deploy:
+    needs: [aio]
+    if: needs.aio.result == 'success' && github.event_name == 'push'
+    runs-on:
+      labels: ubuntu-latest
+    steps:
+      - name: Initialize environment
+        uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+        with:
+          cache-node-modules: true
+          node-module-directories: |
+            ./aio/node_modules
+      - name: Setup Bazel
+        uses: angular/dev-infra/github-actions/bazel/setup@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+      - name: Setup Bazel RBE
+        uses: angular/dev-infra/github-actions/bazel/configure-remote@45de46d9ba0e0689b7a846fd31ec9e241807ca71
+      - name: Install node modules for aio
+        run: yarn install --cwd aio --frozen-lockfile
+      - name: Set the stable branch environment variable
+        run: export CI_STABLE_BRANCH=$(npm info @angular/core dist-tags.latest | sed -r 's/^\\s*([0-9]+\\.[0-9]+)\\.[0-9]+.*$/\\1.x/')
+      - name: Deploy aio to production
+        run: yarn --cwd aio deploy-production
@@ -57,9 +57,7 @@
 version: 3

 availability:
-  users_unavailable:
-    - atscott
-    - devversion
+  users_unavailable: []

 # Meta field that goes unused by PullApprove to allow for defining aliases to be
 # used throughout the config.
@@ -1124,6 +1122,7 @@ groups:
      users:
        - AleksanderBodurri
        - devversion
+        - dgp1130
        - josephperrott
        - mgechev
        - twerske
@@ -1,3 +1,66 @@
+<a name="16.2.2"></a>
+# 16.2.2 (2023-08-23)
+### common
+| Commit | Type | Description |
+| -- | -- | -- |
+| [a43c0772ea](https://github.com/angular/angular/commit/a43c0772ea74410b0492a178c656268a465d3b09) | fix | Allow safeUrl for ngSrc in NgOptimizedImage ([#51351](https://github.com/angular/angular/pull/51351)) |
+### compiler-cli
+| Commit | Type | Description |
+| -- | -- | -- |
+| [39ace8664b](https://github.com/angular/angular/commit/39ace8664b843225a75dd706236ae13e171126d3) | fix | enforce a minimum version to be used when a library uses input transform ([#51413](https://github.com/angular/angular/pull/51413)) |
+### core
+| Commit | Type | Description |
+| -- | -- | -- |
+| [36f434e49d](https://github.com/angular/angular/commit/36f434e49d24f0393950299486141a121d42e044) | fix | guard the jasmine hooks ([#51394](https://github.com/angular/angular/pull/51394)) |
+### router
+| Commit | Type | Description |
+| -- | -- | -- |
+| [b0396e7164](https://github.com/angular/angular/commit/b0396e7164c08e01d24d2d8411edf1ccf4b52826) | fix | Ensure `canceledNavigationResolution: 'computed'` works on first page ([#51441](https://github.com/angular/angular/pull/51441)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
+<a name="16.2.1"></a>
+# 16.2.1 (2023-08-16)
+### router
+| Commit | Type | Description |
+| -- | -- | -- |
+| [232a8c1b8d](https://github.com/angular/angular/commit/232a8c1b8dadf3f886b4bd0142613d116c865759) | fix | Apply named outlets to children empty paths not appearing in the URL ([#51292](https://github.com/angular/angular/pull/51292)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
+<a name="16.2.0"></a>
+# 16.2.0 (2023-08-09)
+### benchpress
+| Commit | Type | Description |
+| -- | -- | -- |
+| [dd850b2ab7](https://github.com/angular/angular/commit/dd850b2ab781f24065550f8a948ced498e0f1e99) | fix | correctly report GC memory amounts ([#50760](https://github.com/angular/angular/pull/50760)) |
+### common
+| Commit | Type | Description |
+| -- | -- | -- |
+| [29d358170b](https://github.com/angular/angular/commit/29d358170b046f4a6773dfdfbbd1050f54deb301) | feat | add component input binding support for NgComponentOutlet ([#51148](https://github.com/angular/angular/pull/51148)) |
+| [1837efb9da](https://github.com/angular/angular/commit/1837efb9daf5c8e86a99a06ecc77bb42bc60dbb0) | feat | Allow ngSrc to be changed post-init ([#50683](https://github.com/angular/angular/pull/50683)) |
+### compiler
+| Commit | Type | Description |
+| -- | -- | -- |
+| [c27a1e61d6](https://github.com/angular/angular/commit/c27a1e61d64a67aa169086f7db11bcfd5bb7d2fc) | feat | scope selectors in @scope queries ([#50747](https://github.com/angular/angular/pull/50747)) |
+### compiler-cli
+| Commit | Type | Description |
+| -- | -- | -- |
+| [12bad6576d](https://github.com/angular/angular/commit/12bad6576d2ffe4667118b214d9c7598ed3d8edb) | fix | libraries compiled with v16.1+ breaking with Angular framework v16.0.x ([#50714](https://github.com/angular/angular/pull/50714)) |
+### core
+| Commit | Type | Description |
+| -- | -- | -- |
+| [e53d4ecf4c](https://github.com/angular/angular/commit/e53d4ecf4cfd9e64d6ba8c8b19adbb7df9cfc047) | feat | add afterRender and afterNextRender ([#50607](https://github.com/angular/angular/pull/50607)) |
+| [98d262fd27](https://github.com/angular/angular/commit/98d262fd27795014ee3988b08d3c48a0dfb63c40) | feat | create injector debugging APIs ([#48639](https://github.com/angular/angular/pull/48639)) |
+| [cdaa2a8a9e](https://github.com/angular/angular/commit/cdaa2a8a9eab490b55bbb841ede4f54a2656df30) | feat | support Provider type in Injector.create ([#49587](https://github.com/angular/angular/pull/49587)) |
+| [9f490da7e2](https://github.com/angular/angular/commit/9f490da7e27e495cb45d2064af9091731422a6b1) | fix | handle hydration of view containers for root components ([#51247](https://github.com/angular/angular/pull/51247)) |
+### router
+| Commit | Type | Description |
+| -- | -- | -- |
+| [0b14e4ef74](https://github.com/angular/angular/commit/0b14e4ef742b1c0f73d873e2c337683b60f46845) | feat | exposes the `fixture` of the `RouterTestingHarness` ([#50280](https://github.com/angular/angular/pull/50280)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="16.1.8"></a>
 # 16.1.8 (2023-08-02)
 ### compiler
@@ -7,19 +70,6 @@

 <!-- CHANGELOG SPLIT MARKER -->

-<a name="16.2.0-next.4"></a>
-# 16.2.0-next.4 (2023-07-26)
-### common
-| Commit | Type | Description |
-| -- | -- | -- |
-| [29d358170b](https://github.com/angular/angular/commit/29d358170b046f4a6773dfdfbbd1050f54deb301) | feat | add component input binding support for NgComponentOutlet ([#51148](https://github.com/angular/angular/pull/51148)) |
-### http
-| Commit | Type | Description |
-| -- | -- | -- |
-| [57e8412e53](https://github.com/angular/angular/commit/57e8412e53229b0671df02c55be52e88b66a6865) | fix | check whether `Zone` is defined ([#51119](https://github.com/angular/angular/pull/51119)) |
-
-<!-- CHANGELOG SPLIT MARKER -->
-
 <a name="16.1.7"></a>
 # 16.1.7 (2023-07-26)
 ### http
@@ -29,15 +79,6 @@

 <!-- CHANGELOG SPLIT MARKER -->

-<a name="16.2.0-next.3"></a>
-# 16.2.0-next.3 (2023-07-19)
-### http
-| Commit | Type | Description |
-| -- | -- | -- |
-| [c5608e5ca9](https://github.com/angular/angular/commit/c5608e5ca99805af1a3a7caf4ce28a35f3a13ebf) | fix | Run fetch request out the angular zone ([#50981](https://github.com/angular/angular/pull/50981)) |
-
-<!-- CHANGELOG SPLIT MARKER -->
-
 <a name="16.1.6"></a>
 # 16.1.6 (2023-07-19)
 ### http
@@ -47,38 +88,6 @@

 <!-- CHANGELOG SPLIT MARKER -->

-<a name="16.2.0-next.2"></a>
-# 16.2.0-next.2 (2023-07-13)
-### animations
-| Commit | Type | Description |
-| -- | -- | -- |
-| [a14bdfe859](https://github.com/angular/angular/commit/a14bdfe8591a33d359bf4940f4efa828499a6373) | fix | Ensure elements are removed from the cache after leave animation. ([#50929](https://github.com/angular/angular/pull/50929)) |
-### common
-| Commit | Type | Description |
-| -- | -- | -- |
-| [1837efb9da](https://github.com/angular/angular/commit/1837efb9daf5c8e86a99a06ecc77bb42bc60dbb0) | feat | Allow ngSrc to be changed post-init ([#50683](https://github.com/angular/angular/pull/50683)) |
-### compiler
-| Commit | Type | Description |
-| -- | -- | -- |
-| [c27a1e61d6](https://github.com/angular/angular/commit/c27a1e61d64a67aa169086f7db11bcfd5bb7d2fc) | feat | scope selectors in @scope queries ([#50747](https://github.com/angular/angular/pull/50747)) |
-### core
-| Commit | Type | Description |
-| -- | -- | -- |
-| [031b599a55](https://github.com/angular/angular/commit/031b599a5528e1df5779695eb75b738a5a3076fe) | fix | ensure that standalone components get correct injector instances ([#50954](https://github.com/angular/angular/pull/50954)) |
-| [5d6ec0336b](https://github.com/angular/angular/commit/5d6ec0336bdea22735d0ca2bbd7cfad958efbdda) | fix | handle `deref` returning `null` on `RefactiveNode`. ([#50992](https://github.com/angular/angular/pull/50992)) |
-| [b66a16ec4c](https://github.com/angular/angular/commit/b66a16ec4cf42f47efeafa711ec301efeda272be) | fix | use `setTimeout` when coalescing tasks in Node.js ([#50820](https://github.com/angular/angular/pull/50820)) |
-### platform-browser
-| Commit | Type | Description |
-| -- | -- | -- |
-| [f1b629961f](https://github.com/angular/angular/commit/f1b629961f75d535982a6196e70b82f177587ebf) | perf | do not remove renderer from cache when `REMOVE_STYLES_ON_COMPONENT_DESTROY` is enabled. ([#51005](https://github.com/angular/angular/pull/51005)) |
-### upgrade
-| Commit | Type | Description |
-| -- | -- | -- |
-| [a19a87df6c](https://github.com/angular/angular/commit/a19a87df6c30a60ca997083b979a8e1e185e5b43) | fix | allow for downgraded components to work with component-router ([#50871](https://github.com/angular/angular/pull/50871)) |
-| [253d756464](https://github.com/angular/angular/commit/253d7564647607804d45404152d1253993177aea) | fix | Use `takeUntil` on leaky subscription. ([#50901](https://github.com/angular/angular/pull/50901)) |
-
-<!-- CHANGELOG SPLIT MARKER -->
-
 <a name="16.1.5"></a>
 # 16.1.5 (2023-07-13)
 ### animations
@@ -114,28 +123,6 @@

 <!-- CHANGELOG SPLIT MARKER -->

-<a name="16.2.0-next.1"></a>
-# 16.2.0-next.1 (2023-06-28)
-### benchpress
-| Commit | Type | Description |
-| -- | -- | -- |
-| [dd850b2ab7](https://github.com/angular/angular/commit/dd850b2ab781f24065550f8a948ced498e0f1e99) | fix | correctly report GC memory amounts ([#50760](https://github.com/angular/angular/pull/50760)) |
-### core
-| Commit | Type | Description |
-| -- | -- | -- |
-| [29340a0678](https://github.com/angular/angular/commit/29340a06789652e359e61b32f1814dcd20d9bd26) | fix | expose input transform function on ComponentFactory and ComponentMirror ([#50713](https://github.com/angular/angular/pull/50713)) |
-### elements
-| Commit | Type | Description |
-| -- | -- | -- |
-| [d64864e95e](https://github.com/angular/angular/commit/d64864e95e193e46180aeaf0d634152327650871) | fix | support input transform functions ([#50713](https://github.com/angular/angular/pull/50713)) |
-### platform-browser
-| Commit | Type | Description |
-| -- | -- | -- |
-| [2b55103e94](https://github.com/angular/angular/commit/2b55103e94578ab1cb765147077e82e1228b0dbb) | fix | wait until animation completion before destroying renderer ([#50677](https://github.com/angular/angular/pull/50677)) |
-| [0380564f85](https://github.com/angular/angular/commit/0380564f8562f5971cff671319439ad0f2b40a7e) | fix | wait until animation completion before destroying renderer ([#50860](https://github.com/angular/angular/pull/50860)) |
-
-<!-- CHANGELOG SPLIT MARKER -->
-
 <a name="16.1.3"></a>
 # 16.1.3 (2023-06-28)
 ### core
@@ -154,19 +141,6 @@

 <!-- CHANGELOG SPLIT MARKER -->

-<a name="16.2.0-next.0"></a>
-# 16.2.0-next.0 (2023-06-21)
-### compiler-cli
-| Commit | Type | Description |
-| -- | -- | -- |
-| [12bad6576d](https://github.com/angular/angular/commit/12bad6576d2ffe4667118b214d9c7598ed3d8edb) | fix | libraries compiled with v16.1+ breaking with Angular framework v16.0.x ([#50714](https://github.com/angular/angular/pull/50714)) |
-### router
-| Commit | Type | Description |
-| -- | -- | -- |
-| [0b14e4ef74](https://github.com/angular/angular/commit/0b14e4ef742b1c0f73d873e2c337683b60f46845) | feat | exposes the `fixture` of the `RouterTestingHarness` ([#50280](https://github.com/angular/angular/pull/50280)) |
-
-<!-- CHANGELOG SPLIT MARKER -->
-
 <a name="16.1.2"></a>
 # 16.1.2 (2023-06-21)
 ### http
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
  <head>
    <title>Your first Angular app</title>
  </head>
@@ -0,0 +1,12 @@
+@name HTML content was altered after server-side rendering
+@category runtime
+@shortDescription HTML content was altered after server-side rendering
+
+@description
+Angular throws this error when it detects that the content generated by server-side rendering (SSR) was altered after the rendering. The process of hydration relies on the content to be untouched after SSR, which also includes whitespaces and comment nodes. Those whitespaces and comment nodes must be retained in the HTML generated by the SSR process. Learn more in the [Hydration guide](guide/hydration#constraints).
+
+@debugging
+
+Typically this happens in the following cases:
+* Some CDN providers have a built-in feature to remove whitespaces and comment nodes from HTML as an optimization. Please verify if there is such an option in CDN configuration and turn it off.
+* If you use custom post-processing of HTML generated by SSR (as a build step), make sure that this process doesn't remove whitespaces and comment nodes.
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';

@Component({
+  standalone: true,
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
@@ -31,15 +31,15 @@ export const slideInAnimation =
 // #docregion query
      query(':enter', [
        style({ left: '-100%' })
-      ]),
-      query(':leave', animateChild()),
+      ], { optional: true }),
+      query(':leave', animateChild(), { optional: true }),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%' }))
-        ]),
+        ], { optional: true }),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
-        ]),
+        ], { optional: true }),
      ]),
    ]),
    transition('* <=> *', [
@@ -51,19 +51,19 @@ export const slideInAnimation =
          left: 0,
          width: '100%'
        })
-      ]),
+      ], { optional: true }),
      query(':enter', [
        style({ left: '-100%' })
-      ]),
-      query(':leave', animateChild()),
+      ], { optional: true }),
+      query(':leave', animateChild(), { optional: true }),
      group([
        query(':leave', [
          animate('200ms ease-out', style({ left: '100%', opacity: 0 }))
-        ]),
+        ], { optional: true }),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
-        ]),
-        query('@*', animateChild())
+        ], { optional: true }),
+        query('@*', animateChild(), { optional: true })
      ]),
    ])
    // #enddocregion query
@@ -2,6 +2,7 @@
 import { Component, HostBinding } from '@angular/core';

@Component({
+  standalone: true,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
@@ -11,14 +11,16 @@ import {
 } from '@angular/animations';

 // #enddocregion imports
-import { ChildrenOutletContexts, RouterOutlet } from '@angular/router';
+import { ChildrenOutletContexts, RouterLink, RouterOutlet } from '@angular/router';
 import { slideInAnimation } from './animations';

 // #docregion decorator, toggle-app-animations, define
@Component({
+  standalone: true,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
+  imports: [RouterLink, RouterOutlet],
  animations: [
 // #enddocregion decorator
    slideInAnimation
@@ -0,0 +1,15 @@
+import { ApplicationConfig } from '@angular/core';
+import { routes } from './app.routes';
+import { provideRouter } from '@angular/router';
+import { provideProtractorTestingSupport } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        // needed for supporting e2e tests
+        provideProtractorTestingSupport(),
+        provideRouter(routes),
+        provideAnimations(),
+    ]
+};
@@ -1,112 +1,73 @@
-// #docregion route-animation-data
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
-import { AppComponent } from './app.component';
-import { OpenCloseComponent } from './open-close.component';
+import { Routes } from '@angular/router';
 import { OpenClosePageComponent } from './open-close-page.component';
-import { OpenCloseChildComponent } from './open-close.component.4';
-import { ToggleAnimationsPageComponent } from './toggle-animations-page.component';
-import { StatusSliderComponent } from './status-slider.component';
 import { StatusSliderPageComponent } from './status-slider-page.component';
+import { ToggleAnimationsPageComponent } from './toggle-animations-page.component';
 import { HeroListPageComponent } from './hero-list-page.component';
 import { HeroListGroupPageComponent } from './hero-list-group-page.component';
-import { HeroListGroupsComponent } from './hero-list-groups.component';
 import { HeroListEnterLeavePageComponent } from './hero-list-enter-leave-page.component';
-import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
 import { HeroListAutoCalcPageComponent } from './hero-list-auto-page.component';
-import { HeroListAutoComponent } from './hero-list-auto.component';
-import { HomeComponent } from './home.component';
-import { AboutComponent } from './about.component';
 import { InsertRemoveComponent } from './insert-remove.component';
 import { QueryingComponent } from './querying.component';
+import { HomeComponent } from './home.component';
+import { AboutComponent } from './about.component';

-
-@NgModule({
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    RouterModule.forRoot([
-      { path: '', pathMatch: 'full', redirectTo: '/enter-leave' },
-      {
+// #docregion route-animation-data
+export const routes: Routes = [
+    { path: '', pathMatch: 'full', redirectTo: '/enter-leave' },
+    {
        path: 'open-close',
        component: OpenClosePageComponent,
        data: { animation: 'openClosePage' }
-      },
-      {
+    },
+    {
        path: 'status',
        component: StatusSliderPageComponent,
        data: { animation: 'statusPage' }
-      },
-      {
+    },
+    {
        path: 'toggle',
        component: ToggleAnimationsPageComponent,
        data: { animation: 'togglePage' }
-      },
-      {
+    },
+    {
        path: 'heroes',
        component: HeroListPageComponent,
        data: { animation: 'filterPage' }
-      },
-      {
+    },
+    {
        path: 'hero-groups',
        component: HeroListGroupPageComponent,
        data: { animation: 'heroGroupPage' }
-      },
-      {
+    },
+    {
        path: 'enter-leave',
        component: HeroListEnterLeavePageComponent,
        data: { animation: 'enterLeavePage' }
-      },
-      {
+    },
+    {
        path: 'auto',
        component: HeroListAutoCalcPageComponent,
        data: { animation: 'autoPage' }
-      },
-      {
+    },
+    {
        path: 'insert-remove',
        component: InsertRemoveComponent,
        data: { animation: 'insertRemovePage' }
-      },
-      {
+    },
+    {
        path: 'querying',
        component: QueryingComponent,
        data: { animation: 'queryingPage' }
-      },
-      {
+    },
+    {
        path: 'home',
        component: HomeComponent,
        data: { animation: 'HomePage' }
-      },
-      {
+    },
+    {
        path: 'about',
        component: AboutComponent,
        data: { animation: 'AboutPage' }
-      },
-    ])
-  ],
-  // #enddocregion route-animation-data
-  declarations: [
-    AppComponent,
-    StatusSliderComponent,
-    OpenCloseComponent,
-    OpenCloseChildComponent,
-    OpenClosePageComponent,
-    StatusSliderPageComponent,
-    ToggleAnimationsPageComponent,
-    HeroListPageComponent,
-    HeroListGroupsComponent,
-    HeroListGroupPageComponent,
-    HeroListEnterLeavePageComponent,
-    HeroListEnterLeaveComponent,
-    HeroListAutoCalcPageComponent,
-    HeroListAutoComponent,
-    HomeComponent,
-    InsertRemoveComponent,
-    QueryingComponent,
-    AboutComponent
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+    },
+];
+// #enddocregion route-animation-data
@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 import { HEROES } from './mock-heroes';
+import { HeroListAutoComponent } from './hero-list-auto.component';

@Component({
+  standalone: true,
  selector: 'app-hero-list-auto-page',
  template: `
    <section>
@@ -9,7 +11,8 @@ import { HEROES } from './mock-heroes';

      <app-hero-list-auto [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-auto>
    </section>
-  `
+  `,
+  imports: [HeroListAutoComponent]
 })
 export class HeroListAutoCalcPageComponent {
  heroes = HEROES.slice();
@@ -13,11 +13,14 @@ import {
 } from '@angular/animations';

 import { Hero } from './hero';
+import { NgFor } from '@angular/common';

@Component({
+  standalone: true,
  selector: 'app-hero-list-auto',
  templateUrl: 'hero-list-auto.component.html',
  styleUrls: ['./hero-list-page.component.css'],
+  imports: [NgFor],
  // #docregion auto-calc
  animations: [
    trigger('shrinkOut', [
@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 import { HEROES } from './mock-heroes';
+import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';

@Component({
+  standalone: true,
  selector: 'app-hero-list-enter-leave-page',
  template: `
    <section>
@@ -9,7 +11,8 @@ import { HEROES } from './mock-heroes';

      <app-hero-list-enter-leave [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-enter-leave>
    </section>
-  `
+  `,
+  imports: [HeroListEnterLeaveComponent]
 })
 export class HeroListEnterLeavePageComponent {
  heroes = HEROES.slice();
@@ -13,8 +13,10 @@ import {
 } from '@angular/animations';

 import { Hero } from './hero';
+import { NgFor } from '@angular/common';

@Component({
+  standalone: true,
  selector: 'app-hero-list-enter-leave',
  template: `
    <ul class="heroes">
@@ -28,6 +30,7 @@ import { Hero } from './hero';
    </ul>
  `,
  styleUrls: ['./hero-list-page.component.css'],
+  imports: [NgFor],
  // #docregion animationdef
  animations: [
    trigger('flyInOut', [
@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 import { HEROES } from './mock-heroes';
+import { HeroListGroupsComponent } from './hero-list-groups.component';

@Component({
+  standalone: true,
  selector: 'app-hero-list-groups-page',
  template: `
    <section>
@@ -9,7 +11,8 @@ import { HEROES } from './mock-heroes';

      <app-hero-list-groups [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-groups>
    </section>
-  `
+  `,
+  imports: [HeroListGroupsComponent]
 })
 export class HeroListGroupPageComponent {
  heroes = HEROES.slice();
@@ -14,8 +14,10 @@ import {
 } from '@angular/animations';

 import { Hero } from './hero';
+import { NgFor } from '@angular/common';

@Component({
+  standalone: true,
  selector: 'app-hero-list-groups',
  template: `
    <ul class="heroes">
@@ -28,6 +30,7 @@ import { Hero } from './hero';
    </ul>
  `,
  styleUrls: ['./hero-list-page.component.css'],
+  imports: [NgFor],
  // #docregion animationdef
  animations: [
    trigger('flyInOut', [
@@ -4,10 +4,13 @@ import { Component, HostBinding, OnInit } from '@angular/core';
 import { trigger, transition, animate, style, query, stagger } from '@angular/animations';
 import { HEROES } from './mock-heroes';
 import { Hero } from './hero';
+import { NgFor } from '@angular/common';

 // #docregion filter-animations
@Component({
 // #enddocregion filter-animations
+  standalone: true,
+  imports: [NgFor],
  selector: 'app-hero-list-page',
  templateUrl: 'hero-list-page.component.html',
  styleUrls: ['hero-list-page.component.css'],
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';

@Component({
+  standalone: true,
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
@@ -1,9 +1,12 @@
 // #docplaster
 import { Component } from '@angular/core';
 import { trigger, transition, animate, style } from '@angular/animations';
+import { NgIf } from '@angular/common';

@Component({
+  standalone: true,
  selector: 'app-insert-remove',
+  imports: [NgIf],
  animations: [
 // #docregion enter-leave-trigger
    trigger('myInsertRemoveTrigger', [
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
+import { OpenCloseComponent } from './open-close.component';

@Component({
+  standalone: true,
  selector: 'app-open-close-page',
  template: `
    <section>
@@ -10,7 +12,8 @@ import { Component } from '@angular/core';

      <app-open-close [logging]="logging"></app-open-close>
    </section>
-  `
+  `,
+  imports: [OpenCloseComponent]
 })
 export class OpenClosePageComponent {
  logging = false;
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { trigger, transition, state, animate, style, keyframes } from '@angular/animations';

@Component({
+  standalone: true,
  selector: 'app-open-close',
  animations: [
 // #docregion trigger
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { trigger, transition, state, animate, style } from '@angular/animations';

@Component({
+  standalone: true,
  selector: 'app-open-close-boolean',
 // #docregion trigger-boolean
  animations: [
@@ -5,6 +5,7 @@ import { transition, trigger, useAnimation } from '@angular/animations';
 import { transitionAnimation } from './animations';

@Component({
+  standalone: true,
  selector: 'app-open-close-reusable',
  animations: [
    trigger('openClose', [
@@ -6,6 +6,7 @@ import { trigger, transition, state, animate, style } from '@angular/animations'
 // #docregion toggle-animation
@Component({
 // #enddocregion toggle-animation
+  standalone: true,
  selector: 'app-open-close-toggle',
  templateUrl: 'open-close.component.4.html',
  styleUrls: ['open-close.component.css'],
@@ -4,6 +4,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang

 // #docregion component, events1
@Component({
+  standalone: true,
  selector: 'app-open-close',
 // #docregion trigger-wildcard1, trigger-transition
  animations: [
@@ -13,8 +13,10 @@ import {
 } from '@angular/animations';

 import { HEROES } from './mock-heroes';
+import { NgIf } from '@angular/common';

@Component({
+  standalone: true,
  selector: 'app-querying',
  template: `
    <nav>
@@ -31,6 +33,7 @@ import { HEROES } from './mock-heroes';
    </section>
  `,
  styleUrls: ['./querying.component.css'],
+  imports: [NgIf],
  animations: [
    trigger('query', [
      transition(':enter', [
@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
+import { StatusSliderComponent } from './status-slider.component';

@Component({
+  standalone: true,
  selector: 'app-status-slider-page',
  template: `
    <section>
      <h2>Status Slider</h2>
      <app-status-slider></app-status-slider>
    </section>
-  `
+  `,
+  imports: [StatusSliderComponent]
 })
 export class StatusSliderPageComponent {}
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { trigger, transition, state, animate, style, keyframes } from '@angular/animations';

@Component({
+  standalone: true,
  selector: 'app-status-slider',
  templateUrl: 'status-slider.component.html',
  styleUrls: ['status-slider.component.css'],
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
+import { OpenCloseChildComponent } from './open-close.component.4';

@Component({
+  standalone: true,
  selector: 'app-toggle-animations-child-page',
  template: `
    <section>
@@ -8,6 +10,7 @@ import { Component } from '@angular/core';

      <app-open-close-toggle></app-open-close-toggle>
    </section>
-  `
+  `,
+  imports: [OpenCloseChildComponent]
 })
 export class ToggleAnimationsPageComponent {}
@@ -1,6 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';

-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig);
@@ -1,18 +1,22 @@
 <div class="tax-return">
  <div class="msg" [class.canceled]="message==='Canceled'">{{message}}</div>
  <fieldset>
+    <legend>Tax Return</legend>
    <span  id=name>{{taxReturn.name}}</span>
    <span id=tid>TID: {{taxReturn.tid}}</span>
  </fieldset>
  <fieldset>
+    <legend>Tax Return</legend>
    <label for="income">
      Income: <input id="income" [(ngModel)]="taxReturn.income" class="num">
    </label>
  </fieldset>
  <fieldset>
+    <legend>Tax Return</legend>
    <span>Tax: {{taxReturn.tax}}</span>
  </fieldset>
  <fieldset>
+    <legend>Tax Return</legend>
    <button type="button" (click)="onSaved()">Save</button>
    <button type="button" (click)="onCanceled()">Cancel</button>
    <button type="button" (click)="onClose()">Close</button>
@@ -1,6 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-compose-message',
@@ -12,7 +12,7 @@ export class ComposeMessageComponent {
  message = '';
  sending = false;

-  constructor(private router: Router) {}
+  constructor(private router: Router, private route: ActivatedRoute) {}

  send() {
    this.sending = true;
@@ -32,7 +32,7 @@ export class ComposeMessageComponent {
  closePopup() {
    // Providing a `null` value to the named outlet
    // clears the contents of the named outlet
-    this.router.navigate([{ outlets: { popup: null }}]);
+    this.router.navigate([{outlets: {popup: null}}], {relativeTo: this.route.parent});
  }
  // #enddocregion closePopup
 }
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
  <head>
    <base href="/">
    <title>Angular App</title>
@@ -6,4 +7,4 @@
  <body>
  <app-root>loading</app-root>
  </body>
-</html>
+</html>
@@ -2,6 +2,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
  <head>
+    <title>Index</title>
    <base href="/">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="app/ajs-bootstrap/app.module.js"></script>
@@ -1,23 +1,25 @@
 # Add an animation

 The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`.
-When you create a new project using the Angular framework, these dependencies are automatically added to your project.

 To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular capability.

 ## Step 1: Enabling the animations module

-Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
+Import `provideAnimations` from `@angular/platform-browser/animations` and add it to the providers list in the `bootstrapApplication` function call.
+
+```ts
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAnimations(),
+  ]
+});
+```
+
+For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.

 <code-example header="src/app/app.module.ts" path="animations/src/app/app.module.1.ts"></code-example>

-<div class="alert is-helpful">
-
-**NOTE**: <br />
-When you use the Angular framework to create your application, the root application module `app.module.ts` is placed in the `src/app` directory.  If you are using standalone components, look at main.ts or look at your root application component.
-
-</div>
-
 ## Step 2: Importing animation functions into component files

 If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
@@ -31,4 +33,4 @@ You put the trigger that defines an animation within the `animations` metadata p

 <code-example header="src/app/app.component.ts" path="animations/src/app/app.component.ts" region="decorator"></code-example>

-@reviewed 2022-12-19
+@reviewed 2023-08-15
@@ -32,13 +32,21 @@ The guide assumes that you're familiar with building basic Angular apps, as desc
 ## Getting started

 The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`.
-When you create a new project using the CLI, these dependencies are automatically added to your project.

 To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.

 ### Step 1: Enabling the animations module

-Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
+Import `provideAnimations` from `@angular/platform-browser/animations` and add it to the providers list in the `bootstrapApplication` function call.
+```ts
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAnimations(),
+  ]
+});
+```
+
+For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.

 <code-example header="src/app/app.module.ts" path="animations/src/app/app.module.1.ts"></code-example>

@@ -337,4 +345,4 @@ Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), show

 <!-- end links -->

-@reviewed 2022-02-28
+@reviewed 2023-08-16
@@ -1,6 +1,6 @@
 # Injection context

-The dependency injection (DI) system relies internaly on a runtime context where the current injector is available. 
+The dependency injection (DI) system relies internally on a runtime context where the current injector is available. 
 This means that injectors can only work when code is executed in this context. 

 The injection context is available in these situations: 
@@ -9,7 +9,7 @@ The injection context is available in these situations:
 * In the initializer for fields of such classes.
 * In the factory function specified for `useFactory` of a `Provider` or an `@Injectable`.
 * In the `factory` function specified for an `InjectionToken`.
-* Within a stack frame that is run in a injection context.
+* Within a stack frame that is run in an injection context.

 Knowing when your are in an injection context, will allow you to use the [`inject`](api/core/inject) function to inject instances.

@@ -60,4 +60,4 @@ Calling [`inject`](api/core/inject) or calling `assertInInjectionContext` outsid



-@reviewed 2023-04-11
+@reviewed 2023-04-11
@@ -124,6 +124,13 @@ v16 - v19
 | `@angular/platform-browser`         | [`BrowserModule.withServerTransition`](api/platform-browser/BrowserModule#withservertransition)            | v16           | v18         |
 | `@angular/platform-browser`         | [`makeStateKey`, `StateKey` and `TransferState`](#platform-browser), symbols were moved to `@angular/core`                                        | v16           | v18         |

+
+### Deprecated features that can be removed in v19 or later
+
+| Area                                | API or Feature                                                                                             | Deprecated in | May be removed in |
+|:---                                 |:---                                                                                                        |:---           |:---               |
+| `@angular/core` | `PACKAGE_ROOT_URL` | v17 | v19 |
+
 ### Deprecated features with no planned removal version

 | Area                                | API or Feature                                                                                             | Deprecated in | May be removed in |
@@ -58,7 +58,7 @@ The `<ng-template>` element is a good choice for dynamic components because it d
 Take a closer look at the methods in `ad-banner.component.ts`.

 `AdBannerComponent` takes an array of `AdItem` objects as input, which ultimately comes from `AdService`.
-`AdItem` objects specify the type of component to load and any data to bind to the component.`AdService` returns the actual ads making up the ad campaign.
+`AdItem` objects specify the type of component to load and any data to bind to the component. `AdService` returns the actual ads making up the ad campaign.

 Passing an array of components to `AdBannerComponent` allows for a dynamic list of ads without static elements in the template.

@@ -12,7 +12,7 @@ For the sample application that this page describes, see the <live-example></liv
 A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code.
 The browser maintains a `CustomElementRegistry` of defined custom elements, which maps an instantiable JavaScript class to an HTML tag.

-The `@angular/elements` package exports a `createCustomElement()` API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.
+The `@angular/elements` package exports a `createCustomElement()` API function that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.

 Transforming a component to a custom element makes all of the required Angular infrastructure available to the browser.
 Creating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding built-in HTML equivalents.
@@ -33,7 +33,7 @@ Once a custom element is added to the DOM for any page, it looks and behaves lik
 |                                                | Details |
 |:---                                            |:---     |
 | Easy dynamic content in an Angular application | Transforming a component to a custom element provides a straightforward path to creating dynamic HTML content in your Angular application. HTML content that you add directly to the DOM in an Angular application is normally displayed without Angular processing, unless you define a *dynamic component*, adding your own code to connect the HTML tag to your application data, and participate in change detection. With a custom element, all of that wiring is taken care of automatically.                                                                                                                                        |
-| Content-rich applications                      | If you have a content-rich application, such as the Angular app that presents this documentation, custom elements let you give your content providers sophisticated Angular functionality without requiring knowledge of Angular. For example, an Angular guide like this one is added directly to the DOM by the Angular navigation tools, but can include special elements like `<code-snippet>` that perform complex operations. All you need to tell your content provider is the syntax of your custom element. They don't need to know anything about Angular, or anything about your component's data structures or implementation. |
+| Content-rich applications                      | If you have a content-rich application, such as the Angular application described in this guide, custom elements let you give your content providers sophisticated Angular functionality without requiring knowledge of Angular. For example, an Angular guide like this one is added directly to the DOM by the Angular navigation tools, but can include special elements like `<code-snippet>` that perform complex operations. All you need to tell your content provider is the syntax of your custom element. They don't need to know anything about Angular, or anything about your component's data structures or implementation. |

 ### How it works

@@ -92,8 +92,8 @@ Component properties and logic maps directly into HTML attributes and the browse
    For example, for a component with `@Input('myInputProp') inputProp`, the corresponding custom element defines an attribute `my-input-prop`.

 *   Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/docs/Web/API/CustomEvent), with the name of the custom event matching the output name.
-    For example, for a component with `@Output() valueChanged = new EventEmitter()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property.
-    If you provide an alias, that value is used; for example, `@Output('myClick') clicks = new EventEmitter<string>();` results in dispatch events with the name "myClick".
+    For example, for a component with `@Output() valueChanged = new EventEmitter()`, the corresponding custom element dispatches events with the name `valueChanged`, and the emitted data is stored on the event's `detail` property.
+    If you provide an alias, that value will be used instead; for example, `@Output('myClick') clicks = new EventEmitter<string>();` results in dispatch events with the name `myClick`.

 For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events).

@@ -124,14 +124,17 @@ npm install @angular/elements --save
 Previously, when you wanted to add a component to an application at runtime, you had to define a *dynamic component*, and then you would have to load it, attach it to an element in the DOM, and wire up all of the dependencies, change detection, and event handling, as described in [Dynamic Component Loader](guide/dynamic-component-loader).

 Using an Angular custom element makes the process much simpler and more transparent, by providing all of the infrastructure and framework automatically &mdash;all you have to do is define the kind of event handling you want.
-\(You do still have to exclude the component from compilation, if you are not going to use it in your application.\)
+
+<div class="alert is-helpful">
+  You do still have to exclude the component from compilation, if you are not going to use it in your application.
+</div>

 The following Popup Service example application defines a component that you can either load dynamically or convert to a custom element.

 | Files                | Details |
 |:---                  |:---     |
 | `popup.component.ts` | Defines a simple pop-up element that displays an input message, with some animation and styling.                                                                                                                             |
-| `popup.service.ts`   | Creates an injectable service that provides two different ways to invoke the `PopupComponent`; as a dynamic component, or as a custom element Notice how much more setup is required for the dynamic-loading method.         |
+| `popup.service.ts`   | Creates an injectable service that provides two different ways to invoke the `PopupComponent`; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method.         |
 | `app.module.ts`      | Adds the `PopupComponent` in the module's `declarations` list.                                                                                                                                                               |
 | `app.component.ts`   | Defines the application's root component, which uses the `PopupService` to add the pop-up to the DOM at run time. When the application runs, the root component's constructor converts `PopupComponent` to a custom element. |

@@ -159,7 +162,7 @@ Additionally, these custom elements will have a property for each input of the c
 For example, our `popup-element` has a `message` property of type `string`.

 There are a few options if you want to get correct types for your custom elements.
-Assume you create a `my-dialog` custom element based on the following component:
+Assuming you create a `my-dialog` custom element based on the following component:

 <code-example format="typescript" language="typescript">

@@ -216,4 +219,4 @@ document.querySelector('my-other-element')  //--&gt; NgElement &amp; WithPropert

 <!-- end links -->

-@reviewed 2022-02-28
+@reviewed 2023-04-27
@@ -97,7 +97,7 @@ Angular components, templates, and styles go here.
 | `app/app.component.html` | Defines the HTML template associated with the root `AppComponent`. |
 | `app/app.component.css` | Defines the base CSS stylesheet for the root `AppComponent`. |
 | `app/app.component.spec.ts` | Defines a unit test for the root `AppComponent`. |
-| `app/app.module.ts` | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here.<br><br>_Only generated when using the `--standalone` option._ |
+| `app/app.module.ts` | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here.<br><br>_This file is not generated when using the `--standalone` option._ |

 ### Application configuration files

@@ -232,7 +232,7 @@ For example, in the following `SelfComponent`, notice the injected `LeafService`

 <code-example header="src/app/self-no-data/self-no-data.component.ts" path="resolution-modifiers/src/app/self-no-data/self-no-data.component.ts" region="self-no-data-component"></code-example>

-In this example, there is a parent provider and injecting the service will return the value, however, injecting the service with `@Self()` and `@Optional()` will return `null` because `@Self()` tells the injector to stop searching in the current host element.
+In this example, there is a parent provider and injecting the service will return the value, however, injecting the service with `@Self()` and `@Optional()` will return `null` because `@Self()` tells the injector to only search in the current host element.

 Another example shows the component class with a provider for `FlowerService`.
 In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip <code>&#x1F337;</code>.
@@ -125,6 +125,13 @@ If you choose to set this setting in your tsconfig, we recommend to set it only

 </div>

+<a id="cdn-configuration"></a>
+### CDN Optimizations
+
+Many CDNs offer a feature that will try to optimize your rendered application by stripping all nodes from the rendered DOM that it thinks are unnecessary, which includes comment nodes. Comment nodes are an essential part of Angular's functioning and are critical for hydration to work. You will need to disable this CDN feature in order to ensure your application loads and hydrates.
+
+If CDN optimization is enabled and you have hydration enabled, when you attempt to load the page you will encounter error [NG0507](https://angular.io/errors/NG0507). If you see this error, you should go and disable the CDN optimization.
+
 ### Custom or Noop Zone.js are not yet supported

 Hydration relies on a signal from Zone.js when it becomes stable inside an application, so that Angular can start the serialization process on the server or post-hydration cleanup on the client to remove DOM nodes that remained unclaimed.
@@ -184,4 +191,4 @@ re-rendering those components from scratch.

 There are a number of third party libraries that depend on DOM manipulation to be able to render. D3 charts is a prime example. These libraries worked without hydration, but they may cause DOM mismatch errors when hydration is enabled. For now, if you encounter DOM mismatch errors using one of these libraries, you can add the `ngSkipHydration` attribute to the component that renders using that library.

-@reviewed 2023-06-21
+@reviewed 2023-08-14
@@ -75,13 +75,6 @@ ng new customer-app --routing
 This creates an application called `customer-app` and the `--routing` flag generates a file called `app-routing.module.ts`. This is one of the files you need for setting up lazy loading for your feature module.
 Navigate into the project by issuing the command `cd customer-app`.

-<div class="alert is-helpful">
-
-The `--routing` option requires Angular CLI version 8.1 or higher.
-See [Keeping Up to Date](guide/updating).
-
-</div>
-
 ### Create a feature module with routing

 Next, you need a feature module with a component to route to.
@@ -251,7 +244,7 @@ For more information, see the [`forRoot()` pattern](guide/singleton-services#for
 ## Preloading

 Preloading improves UX by loading parts of your application in the background.
-You can preload modules, standalone components or component data. 
+You can preload modules, standalone components or component data.

 ### Preloading modules and standalone components

@@ -138,6 +138,97 @@ data$ = http.get('...').pipe(takeUntilDestroyed());

 By default, `takeUntilDestroyed` must be called in an [injection context](/guide/dependency-injection-context) so that it can access `DestroyRef`. If an injection context isn't available, you can explicitly provide a `DestroyRef`.

+## Reading and writing the DOM
+
+Sometimes it's necessary to use browser-only APIs to manually read or write the DOM. This can be challenging to do with the [lifecycle events](#lifecycle-event-sequence) above, as they will also run during [server-side rendering and pre-rendering](guide/glossary#server-side-rendering). For this purpose, Angular provides `afterRender` and `afterNextRender`. These functions can be used unconditionally, but will only have an effect on the browser. Both functions accept a callback that will run after the next [change detection](/guide/glossary#change-detection) cycle (including any nested cycles) has completed.
+
+<div class="alert is-important">
+
+`afterRender` and `afterNextRender` are available for [developer preview](/guide/releases#developer-preview). They are ready for you to try, but they might change before they are stable.
+
+</div>
+
+| Function | Purpose | Timing |
+| ------ | ------- | ------ |
+| `afterNextRender` | Perform one-time initialization, or observe a single, specific change to the DOM. <br /> <div class="alert is-helpful">As a rule of thumb, you should use `afterRender` instead if you need to manually read or write any layout data such as size or location.</div> See details in [One-time initialization](#one-time-initialization) in this document. | _Once_ after the next change detection cycle. |
+| `afterRender` | Synchronize state with the DOM.  See details in [Handling synchronization](#handling-synchronization) in this document. | After _every_ change detection cycle that follows. |
+
+### One-time initialization
+
+Generally, you will want to use `afterNextRender` to perform any one-time initialization, such as for a third-party library, or for browser-only APIs.
+
+```ts
+@Component({
+  selector: 'my-chart-cmp',
+  template: `<div #chart>{{ ... }}</div>`,
+})
+export class MyChartCmp {
+  @ViewChild('chart') chartRef: ElementRef;
+  chart: MyChart|null;
+
+  constructor() {
+    afterNextRender(() => {
+      this.chart = new MyChart(this.chartRef.nativeElement);
+    });
+  }
+}
+```
+
+Instead of attempting to recreate their behaviors with `afterRender`, you should prefer to use built-in browser APIs like `ResizeObserver` and `IntersectionObserver` wherever possible. You can use `afterNextRender` to safely initialize such APIs on the browser only.
+
+```ts
+@Component({
+  selector: 'my-cmp',
+  template: `<span #content>{{ ... }}</span>`,
+})
+export class MyComponent {
+  resizeObserver: ResizeObserver|null = null;
+  @ViewChild('content') contentRef: ElementRef;
+
+  constructor() {
+    afterNextRender(() => {
+      this.resizeObserver = new ResizeObserver(() => {
+        console.log('Content was resized');
+      });
+
+      this.resizeObserver.observe(this.contentRef.nativeElement);
+    });
+  }
+
+  ngOnDestroy() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+}
+```
+
+<div class="alert is-important">
+
+As a rule of thumb, `afterNextRender` should be used to observe _discrete_ changes to the DOM, such as element creation or deletion. For manually reading or writing data that tends to change frequently, such as size or location, you should generally prefer to use `afterRender` instead.
+
+</div>
+
+### Handling synchronization
+
+As an escape hatch for when the browser does not provide a better API to do so, you can use `afterRender` to perform any additional read or writes to the DOM every time Angular finishes mutating it.
+
+```ts
+@Component({
+  selector: 'my-cmp',
+  template: `<span #content>{{ ... }}</span>`,
+})
+export class MyComponent {
+  @ViewChild('content') contentRef: ElementRef;
+
+  constructor() {
+    afterRender(() => {
+      const elem = this.contentRef.nativeElement;
+      console.log(`content position: (${elem.offsetLeft}, ${elem.offsetTop})`);
+    });
+  }
+}
+```
+
 ## General examples

 The following examples demonstrate the call sequence and relative frequency of the various lifecycle events, and how the hooks can be used separately or together for components and directives.
@@ -21,7 +21,7 @@ Start with the top-level component that hosts the view, and nest animations in t

 To enable routing transition animation, do the following:

-1.  Import the routing module into the application and create a routing configuration that defines the possible routes.
+1.  Create a routing configuration that defines the possible routes. For NgModule based applications, this will include creating a `RouterModule` and adding it to the main `AppModule`.
 1.  Add a router outlet to tell the Angular router where to place the activated components in the DOM.
 1.  Define the animation.

@@ -37,15 +37,27 @@ Implement a router transition animation that slides in the new view to the right

 ## Route configuration

-To begin, configure a set of routes using methods available in the `RouterModule` class.
-This route configuration tells the router how to navigate.
+To begin, configure a set of routes. This route configuration tells the router how to navigate.

-Use the `RouterModule.forRoot` method to define a set of routes.
-Also, add `RouterModule` to the `imports` array of the main module, `AppModule`.
+- Create an array called `routes` in `app.routes.ts` to define a set of routes. 
+- Add the routes to the `provideRouter` function in the providers array in `app.config.ts`.
+
+```ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes)
+  ]
+};
+```

 <div class="alert is-helpful">

 **NOTE**: <br />
+For `NgModule` based applications:
+
+Use the `RouterModule.forRoot` method to define a set of routes.
+Also, add `RouterModule` to the `imports` array of the main module, `AppModule`.
+
 Use the `RouterModule.forRoot` method in the root module, `AppModule`, to register top-level application routes and providers.
 For feature modules, call the `RouterModule.forChild` method instead.

@@ -53,7 +65,7 @@ For feature modules, call the `RouterModule.forChild` method instead.

 The following configuration defines the possible routes for the application.

-<code-example header="src/app/app.module.ts" path="animations/src/app/app.module.ts" region="route-animation-data"></code-example>
+<code-example header="src/app/app.routes.ts" path="animations/src/app/app.routes.ts" region="route-animation-data"></code-example>

 The `home` and `about` paths are associated with the `HomeComponent` and `AboutComponent` views.
 The route configuration tells the Angular router to instantiate the `HomeComponent` and `AboutComponent` views when the navigation matches the corresponding path.
@@ -1623,6 +1623,29 @@ This time, the value of `'popup'` is `null`.
 That's not a route, but it is a legitimate value.
 Setting the popup `RouterOutlet` to `null` clears the outlet and removes the secondary popup route from the current URL.

+<div class="alert is-critical">
+
+**Note:** All commands in the array passed to `Router.navigate()` target a _specific segment_ in the `UrlTree`. 
+We specify the parent of the `ActivatedRoute` as the `relativeTo` option because we want to remove `'popup'` from the segment which holds its reference.
+It's important to always be aware of which segments the commands will be applied to.
+
+</div>
+
+<div class="alert is-helpful">
+
+When `relativeTo` is not provided to the `Router.navigate()` method, the commands are processed starting at the root.
+We could omit the `relativeTo` option in this particular example because the `'popup'` outlet appears at the root level of the configuration.
+  
+</div>
+
+<div class="alert is-helpful">
+
+If you want to close an outlet which appears at any segment depth, you could accomplish
+this by creating a `UrlTree` from the current URL, recursively clearing segment `children` matching the outlet name, and finally 
+calling `Router.navigateByUrl()` with the `root` segment of the current `UrlTree`.
+
+</div>
+
 <a id="guards"></a>
 <a id="milestone-5-route-guards"></a>

@@ -88,7 +88,7 @@ In addition, using the `onActionClick` property on the `data` object, you can ti
      {"action": "foo", "title": "Open new tab"},
      {"action": "bar", "title": "Focus last"},
      {"action": "baz", "title": "Navigate last"},
-      {"action": "qux", "title": "Send request in the background"}
+      {"action": "qux", "title": "Send request in the background"},
      {"action": "other", "title": "Just notify existing clients"}
    ],
    "data": {
@@ -47,7 +47,7 @@ Congratulations, your application has been converted to standalone 🎉. These a
 * Find and remove any remaining `NgModule` declarations: since the ["Remove unnecessary NgModules" step](#remove-unnecessary-ngmodules) cannot remove all modules automatically, you may have to remove the remaining declarations manually.
 * Run the project's unit tests and fix any failures.
 * Run any code formatters, if the project uses automatic formatting.
-* Run any linters in your project and fix new warnings. Some linters support a `--fix` flag that may resolve so warnings automatically.
+* Run any linters in your project and fix new warnings. Some linters support a `--fix` flag that may resolve some of your warnings automatically.

 ## Migration modes
 The migration has the following modes:
@@ -10,7 +10,7 @@ covers [Angular versions under active support](guide/releases#actively-supported

 | Angular            | Node.js                              | TypeScript     | RxJS               |
 |--------------------|--------------------------------------|----------------|--------------------|
-| 16.1.x             | ^16.14.0 \|\| ^18.10.0               | >=4.9.3 <5.2.0 | ^6.5.3 \|\| ^7.4.0 |
+| 16.1.x \|\| 16.2.x | ^16.14.0 \|\| ^18.10.0               | >=4.9.3 <5.2.0 | ^6.5.3 \|\| ^7.4.0 |
 | 16.0.x             | ^16.14.0 \|\| ^18.10.0               | >=4.9.3 <5.1.0 | ^6.5.3 \|\| ^7.4.0 |
 | 15.1.x \|\| 15.2.x | ^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0 | >=4.8.2 <5.0.0 | ^6.5.3 \|\| ^7.4.0 |
 | 15.0.x             | ^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0 | ~4.8.2         | ^6.5.3 \|\| ^7.4.0 |
@@ -86,7 +86,7 @@ To clarify how changes are detected and values updated, consider the following c
      value = v;
      // call detectChange manually
      detectChange();
-    }, 100);
+    });

    // Example 5: some other asynchronous APIs
    document.getElementById('canvas').toBlob(blob =&gt; {
@@ -574,6 +574,11 @@
            "desc": "NGX Cookie Service is an Angular Library that can be used to read, set and delete browser cookies",
            "title": "NGX Cookie Service",
            "url": "https://github.com/stevermeister/ngx-cookie-service"
+          },
+          "flowbite": {
+            "desc": "Open-source UI component library built with the utility-classes from Tailwind CSS and with official support for Angular.",
+            "title": "Flowbite",
+            "url": "https://flowbite.com/docs/getting-started/angular/"
          }
        }
      }
@@ -3,8 +3,11 @@
    and runs a fast dgeni build on any changed files.
 */

+import {createRequire} from 'node:module';
 import spawn from 'cross-spawn';
-import watchr from '../tools/transforms/authors-package/watchr.js';
+import {watch} from '../tools/transforms/authors-package/watchr.js';
+
+const require = createRequire(import.meta.url);
 const architectCli = require.resolve('@angular-devkit/architect-cli/bin/architect');

 const serve = spawn(
@@ -30,4 +33,4 @@ serve.on('close', (code) => {
  process.exit(1);
 });

-watchr.watch(true);
+watch(true);
@@ -5,6 +5,7 @@ set -eu -o pipefail
 readonly thisDir=$(cd $(dirname $0); pwd)
 readonly parentDir=$(dirname $thisDir)
 readonly target=${1:-aio}
+readonly PROJECT_ROOT=$(realpath "$(dirname ${thisDir})/..")

 # Track payload size functions
 source ../scripts/ci/payload-size.sh
@@ -11,8 +11,8 @@
 <header>
  <mat-toolbar #appToolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
    <mat-toolbar-row class="notification-container">
-      <aio-notification notificationId="survey-january-2023" expirationDate="2023-02-15" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
-        <a href="https://goo.gle/angular-devsat-q1-2023">
+      <aio-notification notificationId="survey-august-2023" expirationDate="2023-11-02" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
+        <a href="https://goo.gle/angular-devsat-q3-2023">
          <mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
          <span class="message">Help Angular by taking a <strong>quick survey</strong>!</span>
          <span class="action-button">Go to survey</span>
@@ -1,8 +1,4 @@
 .contribute-container {
-  h2 {
-    margin: 0;
-  }
-
  .card-section {
    justify-content: space-between;

@@ -20,7 +20,7 @@ function next(error) {
  }
 }

-function watch() {
+export function watch() {
  console.log('============================================================================');
  console.log('Started watching files in:');
  console.log(' - ', config.CONTENTS_PATH);
@@ -32,4 +32,3 @@ function watch() {
  watchr.open(config.API_SOURCE_PATH, listener, next);
 }

-exports.watch = watch;
@@ -42,6 +42,7 @@
          </code-example>
        </td>
      </tr>
+      {%- if option.description or option.usageNotes %}
      <tr>
        <td>
          {%- if option.description %}
@@ -53,6 +54,7 @@
          {% endif %}
        </td>
      </tr>
+      {% endif %}
    </tbody>
  </table>
  {% endfor %}
@@ -51,6 +51,7 @@ new as of May 2017 and not very stable yet.
 - Test package in node: `yarn test packages/core/test:test`
 - Test package in karma: `yarn test packages/core/test:test_web`
 - Test all packages: `yarn test packages/...`
+- Test angular.io app locally: `yarn test //aio/... --config=aio_local_deps`

 **Note**: The ellipsis in the last command above are not meant to be substituted by a package name, but
 are used by Bazel as a wildcard to execute all tests in the specified path. To execute all the tests for a
@@ -31,6 +31,8 @@ following products on your development machine:

 * [Yarn](https://yarnpkg.com) (version specified in the engines field of [`package.json`](../package.json)) which is used to install dependencies.

+* On Windows: [MSYS2](https://www.msys2.org/) which is used by Bazel. Follow the [instructions](https://bazel.build/install/windows#installing-compilers-and-language-runtimes)
+
 * Optional: [Java](https://openjdk.java.net/) version 7 or higher than required by [Closure Compiler](https://developers.google.com/closure/compiler). Most developers will not need this. Java is required for running some integration tests.

 ## Getting the Sources
@@ -617,6 +617,8 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
    // (undocumented)
    static ngAcceptInputType_height: unknown;
    // (undocumented)
+    static ngAcceptInputType_ngSrc: string | i1_2.SafeValue;
+    // (undocumented)
    static ngAcceptInputType_priority: unknown;
    // (undocumented)
    static ngAcceptInputType_width: unknown;
@@ -85,6 +85,8 @@ export const enum RuntimeErrorCode {
    // (undocumented)
    MISSING_REQUIRED_INJECTABLE_IN_BOOTSTRAP = 402,
    // (undocumented)
+    MISSING_SSR_CONTENT_INTEGRITY_MARKER = -507,
+    // (undocumented)
    MISSING_ZONEJS = 908,
    // (undocumented)
    MULTIPLE_COMPONENTS_MATCH = -300,
@@ -1126,7 +1126,7 @@ export interface OutputDecorator {
    new (alias?: string): any;
 }

-// @public
+// @public @deprecated
 export const PACKAGE_ROOT_URL: InjectionToken<string>;

 // @public
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <!-- Prevent the browser from requesting any favicon. -->
    <link rel="icon" href="data:," />
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <body>
    <h2>Params</h2>
    <form>
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <!-- Prevent the browser from requesting any favicon. -->
    <link rel="icon" href="data:," />
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <!-- Prevent the browser from requesting any favicon. -->
    <link rel="icon" href="data:," />
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <!-- Prevent the browser from requesting any favicon. -->
    <link rel="icon" href="data:," />
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <!-- Prevent the browser from requesting any favicon. -->
    <link rel="icon" href="data:," />
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <!-- Prevent the browser from requesting any favicon. -->
    <link rel="icon" href="data:," />
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <!-- Prevent the browser from requesting any favicon. -->
    <link rel="icon" href="data:," />
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <!-- Prevent the browser from requesting any favicon. -->
    <link rel="icon" href="data:," />
@@ -1,6 +1,6 @@
 {
  "name": "angular-srcs",
-  "version": "16.2.0-next.4",
+  "version": "16.2.2",
  "private": true,
  "description": "Angular - a web framework for modern web apps",
  "homepage": "https://github.com/angular/angular",
@@ -1,27 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-/**
- * DOMAnimation represents the Animation Web API.
- *
- * It is an external API by the browser, and must thus use "declare interface",
- * to prevent renaming by Closure Compiler.
- *
- * @see https://developer.mozilla.org/de/docs/Web/API/Animation
- */
-export declare interface DOMAnimation {
-  cancel(): void;
-  play(): void;
-  pause(): void;
-  finish(): void;
-  onfinish: Function;
-  position: number;
-  currentTime: number;
-  addEventListener(eventName: string, handler: (event: any) => any): any;
-  dispatchEvent(eventName: string): any;
-}
@@ -10,8 +10,6 @@ import {AnimationPlayer, ɵStyleDataMap} from '@angular/animations';
 import {computeStyle} from '../../util';
 import {SpecialCasedStyles} from '../special_cased_styles';

-import {DOMAnimation} from './dom_animation';
-
 export class WebAnimationsPlayer implements AnimationPlayer {
  private _onDoneFns: Function[] = [];
  private _onStartFns: Function[] = [];
@@ -31,7 +29,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
  private _originalOnStartFns: Function[] = [];

  // using non-null assertion because it's re(set) by init();
-  public readonly domPlayer!: DOMAnimation;
+  public readonly domPlayer!: Animation;
  public time = 0;

  public parentPlayer: AnimationPlayer|null = null;
@@ -88,10 +86,9 @@ export class WebAnimationsPlayer implements AnimationPlayer {
  }

  /** @internal */
-  _triggerWebAnimation(element: any, keyframes: Array<ɵStyleDataMap>, options: any): DOMAnimation {
-    // jscompiler doesn't seem to know animate is a native property because it's not fully
-    // supported yet across common browsers (we polyfill it for Edge/Safari) [CL #143630929]
-    return element['animate'](this._convertKeyframesToObject(keyframes), options) as DOMAnimation;
+  _triggerWebAnimation(element: HTMLElement, keyframes: Array<ɵStyleDataMap>, options: any):
+      Animation {
+    return element.animate(this._convertKeyframesToObject(keyframes), options);
  }

  onStart(fn: () => void): void {
@@ -180,7 +177,8 @@ export class WebAnimationsPlayer implements AnimationPlayer {
  }

  getPosition(): number {
-    return this.domPlayer.currentTime / this.time;
+    // tsc is complaining with TS2362 without the conversion to number
+    return +(this.domPlayer.currentTime ?? 0) / this.time;
  }

  get totalTime(): number {
@@ -5,7 +5,6 @@
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
-import {DOMAnimation} from '../../../src/render/web_animations/dom_animation';
 import {WebAnimationsPlayer} from '../../../src/render/web_animations/web_animations_player';

 {
@@ -91,7 +90,7 @@ import {WebAnimationsPlayer} from '../../../src/render/web_animations/web_animat
  });
 }

-class MockDomAnimation implements DOMAnimation {
+class MockDomAnimation implements Animation {
  log: string[] = [];
  cancel(): void {
    this.log.push('cancel');
@@ -105,9 +104,53 @@ class MockDomAnimation implements DOMAnimation {
  finish(): void {
    this.log.push('finish');
  }
-  onfinish: Function = () => {};
-  position: number = 0;
  currentTime: number = 0;
+
+  // Other properties to ensure conformnce to interface
+  effect: AnimationEffect|null = null;
+  finished: Promise<Animation> = Promise.resolve({} as any);
+  id: string = '';
+  oncancel: ((this: Animation, ev: AnimationPlaybackEvent) => any)|null = null;
+  onfinish: ((this: Animation, ev: AnimationPlaybackEvent) => any)|null = null;
+  onremove: ((this: Animation, ev: Event) => any)|null = null;
+  pending: boolean = false;
+  playState: AnimationPlayState = 'running';
+  playbackRate: number = 0;
+  ready: Promise<Animation> = Promise.resolve({} as any);
+  replaceState: AnimationReplaceState = 'active';
+  startTime: number|null = null;
+  timeline: AnimationTimeline|null = null;
+  commitStyles(): void {
+    throw new Error('Method not implemented.');
+  }
+  persist(): void {
+    throw new Error('Method not implemented.');
+  }
+  reverse(): void {
+    throw new Error('Method not implemented.');
+  }
+  updatePlaybackRate(playbackRate: number): void {
+    throw new Error('Method not implemented.');
+  }
+  removeEventListener<K extends keyof AnimationEventMap>(
+      type: K, listener: (this: Animation, ev: AnimationEventMap[K]) => any,
+      options?: boolean|EventListenerOptions|undefined): void;
+  removeEventListener(
+      type: string, listener: EventListenerOrEventListenerObject,
+      options?: boolean|EventListenerOptions|undefined): void;
+  removeEventListener(type: unknown, listener: unknown, options?: unknown): void {
+    throw new Error('Method not implemented.');
+  }
+  dispatchEvent(event: Event): boolean;
+  dispatchEvent(event: Event): boolean;
+  dispatchEvent(event: unknown): boolean {
+    throw new Error('Method not implemented.');
+  }
+  removeAllListeners?(eventName?: string|undefined): void {
+    throw new Error('Method not implemented.');
+  }
+  eventListeners?(eventName?: string|undefined): EventListenerOrEventListenerObject[] {
+    throw new Error('Method not implemented.');
+  }
  addEventListener(eventName: string, handler: (event: any) => any): any {}
-  dispatchEvent(eventName: string): any {}
 }
@@ -33,6 +33,7 @@ import {HttpEvent} from './response';
 * @publicApi
 *
 * @see [HTTP Guide](guide/http-intercept-requests-and-responses)
+ * @see {@link HttpInterceptorFn}
 *
 * @usageNotes
 *
@@ -85,8 +86,35 @@ export type HttpHandlerFn = (req: HttpRequest<unknown>) => Observable<HttpEvent<
 * request) is provided. Most interceptors will delegate to this function, but that is not required
 * (see `HttpHandlerFn` for more details).
 *
- * `HttpInterceptorFn`s have access to `inject()` via the `EnvironmentInjector` from which they were
- * configured.
+ * `HttpInterceptorFn`s are executed in an [injection context](/guide/dependency-injection-context).
+ * They have access to `inject()` via the `EnvironmentInjector` from which they were configured.
+ *
+ * @see [HTTP Guide](guide/http-intercept-requests-and-responses)
+ * @see {@link withInterceptors}
+ *
+ * @usageNotes
+ * Here is a noop interceptor that passes the request through without modifying it:
+ * ```typescript
+ * export const noopInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
+ * HttpHandlerFn) => {
+ *   return next(modifiedReq);
+ * };
+ * ```
+ *
+ * If you want to alter a request, clone it first and modify the clone before passing it to the
+ * `next()` handler function.
+ *
+ * Here is a basic interceptor that adds a bearer token to the headers
+ * ```typescript
+ * export const authenticationInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
+ * HttpHandlerFn) => {
+ *    const userToken = 'MY_TOKEN'; const modifiedReq = req.clone({
+ *      headers: req.headers.set('Authorization', `Bearer ${userToken}`),
+ *    });
+ *
+ *    return next(modifiedReq);
+ * };
+ * ```
 */
 export type HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) =>
    Observable<HttpEvent<unknown>>;
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.io/license
 */

-import {booleanAttribute, Directive, ElementRef, inject, InjectionToken, Injector, Input, NgZone, numberAttribute, OnChanges, OnDestroy, OnInit, PLATFORM_ID, Renderer2, SimpleChanges, ɵformatRuntimeError as formatRuntimeError, ɵRuntimeError as RuntimeError} from '@angular/core';
+import {booleanAttribute, Directive, ElementRef, inject, InjectionToken, Injector, Input, NgZone, numberAttribute, OnChanges, OnDestroy, OnInit, PLATFORM_ID, Renderer2, SimpleChanges, ɵformatRuntimeError as formatRuntimeError, ɵRuntimeError as RuntimeError, ɵSafeValue as SafeValue, ɵunwrapSafeValue as unwrapSafeValue} from '@angular/core';

 import {RuntimeErrorCode} from '../../errors';
 import {isPlatformServer} from '../../platform_id';
@@ -245,7 +245,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
   * Image name will be processed by the image loader and the final URL will be applied as the `src`
   * property of the image.
   */
-  @Input({required: true}) ngSrc!: string;
+  @Input({required: true, transform: unwrapSafeUrl}) ngSrc!: string;

  /**
   * A comma separated list of width or density descriptors.
@@ -993,3 +993,12 @@ function assertNoLoaderParamsWithoutLoader(dir: NgOptimizedImage, imageLoader: I
 function round(input: number): number|string {
  return Number.isInteger(input) ? input : input.toFixed(2);
 }
+
+// Transform function to handle SafeValue input for ngSrc. This doesn't do any sanitization,
+// as that is not needed for img.src and img.srcset. This transform is purely for compatibility.
+function unwrapSafeUrl(value: string|SafeValue): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+  return unwrapSafeValue(value);
+}
@@ -190,6 +190,7 @@ export const DATE_PIPE_DEFAULT_OPTIONS =
 * {{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
 * {{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
 * {{ dateObj | date:'mm:ss' }}       // output is '43:11'
+ * {{ dateObj | date:"MMM dd, yyyy 'at' hh:mm a" }}  // output is 'Jun 15, 2015 at 09:43 PM'
 * ```
 *
 * ### Usage example
@@ -11,6 +11,7 @@ import {RuntimeErrorCode} from '@angular/common/src/errors';
 import {PLATFORM_SERVER_ID} from '@angular/common/src/platform_id';
 import {Component, PLATFORM_ID, Provider, Type} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {withHead} from '@angular/private/testing';

@@ -720,6 +721,30 @@ describe('Image directive', () => {
        fixture.detectChanges();
      }).not.toThrowError(new RegExp('was updated after initialization'));
    });
+    it('should accept a safeUrl ngSrc value', () => {
+      @Component({
+        selector: 'test-cmp',
+        template: `<img
+              [ngSrc]="bypassImage"
+              width="400"
+              height="600"
+            >`
+      })
+      class TestComponent {
+        rawImage = `javascript:alert("Hi there")`;
+        bypassImage: SafeResourceUrl;
+        constructor(private sanitizer: DomSanitizer) {
+          this.bypassImage = sanitizer.bypassSecurityTrustResourceUrl(this.rawImage);
+        }
+      }
+      setupTestingModule({component: TestComponent});
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+
+      let nativeElement = fixture.nativeElement as HTMLElement;
+      let img = nativeElement.querySelector('img')!;
+      expect(img.src).toContain(`${IMG_BASE_URL}/javascript:alert`);
+    });
  });

  describe('lazy loading', () => {
@@ -14,10 +14,22 @@ export type CompileFactoryFn = (metadata: R3FactoryMetadata) => CompileResult;

 export function compileNgFactoryDefField(metadata: R3FactoryMetadata): CompileResult {
  const res = compileFactoryFunction(metadata);
-  return {name: 'ɵfac', initializer: res.expression, statements: res.statements, type: res.type};
+  return {
+    name: 'ɵfac',
+    initializer: res.expression,
+    statements: res.statements,
+    type: res.type,
+    deferrableImports: null
+  };
 }

 export function compileDeclareFactory(metadata: R3FactoryMetadata): CompileResult {
  const res = compileDeclareFactoryFunction(metadata);
-  return {name: 'ɵfac', initializer: res.expression, statements: res.statements, type: res.type};
+  return {
+    name: 'ɵfac',
+    initializer: res.expression,
+    statements: res.statements,
+    type: res.type,
+    deferrableImports: null
+  };
 }
@@ -22,7 +22,8 @@ export function compileInputTransformFields(inputs: ClassPropertyMapping<InputMa
        name: `ngAcceptInputType_${input.classPropertyName}`,
        type: outputAst.transplantedType(input.transform.type),
        statements: [],
-        initializer: null
+        initializer: null,
+        deferrableImports: null
      });
    }
  }
@@ -331,7 +331,8 @@ export function createSourceSpan(node: ts.Node): ParseSourceSpan {
 */
 export function compileResults(
    fac: CompileResult, def: R3CompiledExpression, metadataStmt: Statement|null, propName: string,
-    additionalFields: CompileResult[]|null): CompileResult[] {
+    additionalFields: CompileResult[]|null,
+    deferrableImports: Set<ts.ImportDeclaration>|null): CompileResult[] {
  const statements = def.statements;
  if (metadataStmt !== null) {
    statements.push(metadataStmt);
@@ -344,6 +345,7 @@ export function compileResults(
      initializer: def.expression,
      statements: def.statements,
      type: def.type,
+      deferrableImports,
    },
  ];

@@ -1006,7 +1006,8 @@ export class ComponentDecoratorHandler implements
    const classMetadata = analysis.classMetadata !== null ?
        compileClassMetadata(analysis.classMetadata).toStmt() :
        null;
-    return compileResults(fac, def, classMetadata, 'ɵcmp', inputTransformFields);
+    const deferrableImports = this.deferredSymbolTracker.getDeferrableImportDecls();
+    return compileResults(fac, def, classMetadata, 'ɵcmp', inputTransformFields, deferrableImports);
  }

  compilePartial(
@@ -1031,7 +1032,8 @@ export class ComponentDecoratorHandler implements
    const classMetadata = analysis.classMetadata !== null ?
        compileDeclareClassMetadata(analysis.classMetadata).toStmt() :
        null;
-    return compileResults(fac, def, classMetadata, 'ɵcmp', inputTransformFields);
+    return compileResults(
+        fac, def, classMetadata, 'ɵcmp', inputTransformFields, null /* deferrableImports */);
  }

  compileLocal(
@@ -1054,7 +1056,8 @@ export class ComponentDecoratorHandler implements
    const classMetadata = analysis.classMetadata !== null ?
        compileClassMetadata(analysis.classMetadata).toStmt() :
        null;
-    return compileResults(fac, def, classMetadata, 'ɵcmp', inputTransformFields);
+    return compileResults(
+        fac, def, classMetadata, 'ɵcmp', inputTransformFields, null /* deferrableImports */);
  }

  /**
@@ -214,7 +214,8 @@ export class DirectiveDecoratorHandler implements
    const classMetadata = analysis.classMetadata !== null ?
        compileClassMetadata(analysis.classMetadata).toStmt() :
        null;
-    return compileResults(fac, def, classMetadata, 'ɵdir', inputTransformFields);
+    return compileResults(
+        fac, def, classMetadata, 'ɵdir', inputTransformFields, null /* deferrableImports */);
  }

  compilePartial(
@@ -227,7 +228,8 @@ export class DirectiveDecoratorHandler implements
        compileDeclareClassMetadata(analysis.classMetadata).toStmt() :
        null;

-    return compileResults(fac, def, classMetadata, 'ɵdir', inputTransformFields);
+    return compileResults(
+        fac, def, classMetadata, 'ɵdir', inputTransformFields, null /* deferrableImports */);
  }

  compileLocal(
@@ -239,7 +241,8 @@ export class DirectiveDecoratorHandler implements
    const classMetadata = analysis.classMetadata !== null ?
        compileClassMetadata(analysis.classMetadata).toStmt() :
        null;
-    return compileResults(fac, def, classMetadata, 'ɵdir', inputTransformFields);
+    return compileResults(
+        fac, def, classMetadata, 'ɵdir', inputTransformFields, null /* deferrableImports */);
  }

  /**
@@ -779,12 +779,14 @@ export class NgModuleDecoratorHandler implements
        initializer: ngModuleDef.expression,
        statements: ngModuleDef.statements,
        type: ngModuleDef.type,
+        deferrableImports: null,
      },
      {
        name: 'ɵinj',
        initializer: injectorDef.expression,
        statements: injectorDef.statements,
        type: injectorDef.type,
+        deferrableImports: null,
      },
    ];
    return res;
@@ -156,8 +156,13 @@ export class InjectableDecoratorHandler implements
    if (ɵprov === undefined) {
      // Only add a new ɵprov if there is not one already
      const res = compileInjectableFn(analysis.meta);
-      results.push(
-          {name: 'ɵprov', initializer: res.expression, statements: res.statements, type: res.type});
+      results.push({
+        name: 'ɵprov',
+        initializer: res.expression,
+        statements: res.statements,
+        type: res.type,
+        deferrableImports: null
+      });
    }

    return results;
@@ -185,7 +185,7 @@ export class PipeDecoratorHandler implements
    const classMetadata = analysis.classMetadata !== null ?
        compileClassMetadata(analysis.classMetadata).toStmt() :
        null;
-    return compileResults(fac, def, classMetadata, 'ɵpipe', null);
+    return compileResults(fac, def, classMetadata, 'ɵpipe', null, null /* deferrableImports */);
  }

  compilePartial(node: ClassDeclaration, analysis: Readonly<PipeHandlerData>): CompileResult[] {
@@ -194,7 +194,7 @@ export class PipeDecoratorHandler implements
    const classMetadata = analysis.classMetadata !== null ?
        compileDeclareClassMetadata(analysis.classMetadata).toStmt() :
        null;
-    return compileResults(fac, def, classMetadata, 'ɵpipe', null);
+    return compileResults(fac, def, classMetadata, 'ɵpipe', null, null /* deferrableImports */);
  }

  compileLocal(node: ClassDeclaration, analysis: Readonly<PipeHandlerData>): CompileResult[] {
@@ -203,6 +203,6 @@ export class PipeDecoratorHandler implements
    const classMetadata = analysis.classMetadata !== null ?
        compileClassMetadata(analysis.classMetadata).toStmt() :
        null;
-    return compileResults(fac, def, classMetadata, 'ɵpipe', null);
+    return compileResults(fac, def, classMetadata, 'ɵpipe', null, null /* deferrableImports */);
  }
 }
@@ -248,6 +248,7 @@ export interface CompileResult {
  initializer: Expression|null;
  statements: Statement[];
  type: Type;
+  deferrableImports: Set<ts.ImportDeclaration>|null;
 }

 export interface ResolveResult<R> {
@@ -56,6 +56,7 @@ export function ivyTransformFactory(
 */
 class IvyCompilationVisitor extends Visitor {
  public classCompilationMap = new Map<ts.ClassDeclaration, CompileResult[]>();
+  public deferrableImports = new Set<ts.ImportDeclaration>();

  constructor(private compilation: TraitCompiler, private constantPool: ConstantPool) {
    super();
@@ -68,6 +69,16 @@ class IvyCompilationVisitor extends Visitor {
    const result = this.compilation.compile(node, this.constantPool);
    if (result !== null) {
      this.classCompilationMap.set(node, result);
+
+      // Collect all deferrable imports declarations into a single set,
+      // so that we can pass it to the transform visitor that will drop
+      // corresponding regular import declarations.
+      for (const classResult of result) {
+        if (classResult.deferrableImports !== null && classResult.deferrableImports.size > 0) {
+          classResult.deferrableImports.forEach(
+              importDecl => this.deferrableImports.add(importDecl));
+        }
+      }
    }
    return {node};
  }
@@ -83,7 +94,8 @@ class IvyTransformationVisitor extends Visitor {
      private classCompilationMap: Map<ts.ClassDeclaration, CompileResult[]>,
      private reflector: ReflectionHost, private importManager: ImportManager,
      private recordWrappedNodeExpr: RecordWrappedNodeFn<ts.Expression>,
-      private isClosureCompilerEnabled: boolean, private isCore: boolean) {
+      private isClosureCompilerEnabled: boolean, private isCore: boolean,
+      private deferrableImports: Set<ts.ImportDeclaration>) {
    super();
  }

@@ -153,6 +165,16 @@ class IvyTransformationVisitor extends Visitor {
    return {node, after: statements};
  }

+  override visitOtherNode<T extends ts.Node>(node: T): T {
+    if (ts.isImportDeclaration(node) && this.deferrableImports.has(node)) {
+      // Return `null` as an indication that this node should not be present
+      // in the final AST. Symbols from this import would be imported via
+      // dynamic imports.
+      return null!;
+    }
+    return node;
+  }
+
  /**
   * Return all decorators on a `Declaration` which are from @angular/core, or an empty set if none
   * are.
@@ -281,7 +303,7 @@ function transformIvySourceFile(
  // results obtained at Step 1.
  const transformationVisitor = new IvyTransformationVisitor(
      compilation, compilationVisitor.classCompilationMap, reflector, importManager,
-      recordWrappedNode, isClosureCompilerEnabled, isCore);
+      recordWrappedNode, isClosureCompilerEnabled, isCore, compilationVisitor.deferrableImports);
  let sf = visit(file, transformationVisitor, context);

  // Generate the constant statements first, as they may involve adding additional imports
@@ -102,7 +102,8 @@ runInEachFileSystem(() => {
            name: 'compileFull',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }

@@ -111,7 +112,8 @@ runInEachFileSystem(() => {
            name: 'compileLocal',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }
      }
@@ -140,7 +142,8 @@ runInEachFileSystem(() => {
            name: 'compileFull',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }

@@ -149,7 +152,8 @@ runInEachFileSystem(() => {
            name: 'compilePartial',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }

@@ -158,7 +162,8 @@ runInEachFileSystem(() => {
            name: 'compileLocal',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }
      }
@@ -187,7 +192,8 @@ runInEachFileSystem(() => {
            name: 'compileFull',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }

@@ -196,7 +202,8 @@ runInEachFileSystem(() => {
            name: 'compileLocal',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }
      }
@@ -317,7 +324,8 @@ runInEachFileSystem(() => {
            name: 'compileFull',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }

@@ -326,7 +334,8 @@ runInEachFileSystem(() => {
            name: 'compileLocal',
            initializer: o.literal(true),
            statements: [],
-            type: o.BOOL_TYPE
+            type: o.BOOL_TYPE,
+            deferrableImports: null,
          };
        }
      }
@@ -78,7 +78,7 @@ export abstract class Visitor {
    // is completed.
    let visitedNode: T|null = null;

-    node = ts.visitEachChild(node, child => this._visit(child, context), context) as T;
+    node = ts.visitEachChild(node, child => child && this._visit(child, context), context) as T;

    if (ts.isClassDeclaration(node)) {
      visitedNode =
@@ -90,7 +90,7 @@ export abstract class Visitor {

    // If the visited node has a `statements` array then process them, maybe replacing the visited
    // node and adding additional statements.
-    if (ts.isBlock(visitedNode) || ts.isSourceFile(visitedNode)) {
+    if (visitedNode && (ts.isBlock(visitedNode) || ts.isSourceFile(visitedNode))) {
      visitedNode = this._maybeProcessStatements(visitedNode);
    }

@@ -111,7 +111,7 @@ function toNumber(value) {
 export class MyDirective {
 }
 MyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-MyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyDirective, selector: "[my-directive]", inputs: { functionDeclarationInput: ["functionDeclarationInput", "functionDeclarationInput", toNumber], inlineFunctionInput: ["inlineFunctionInput", "inlineFunctionInput", (value, _) => value ? 1 : 0] }, ngImport: i0 });
+MyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "0.0.0-PLACEHOLDER", type: MyDirective, selector: "[my-directive]", inputs: { functionDeclarationInput: ["functionDeclarationInput", "functionDeclarationInput", toNumber], inlineFunctionInput: ["inlineFunctionInput", "inlineFunctionInput", (value, _) => value ? 1 : 0] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyDirective, decorators: [{
            type: Directive,
            args: [{ selector: '[my-directive]' }]
@@ -8873,10 +8873,10 @@ function allTests(os: string) {
    });

    describe('deferred blocks', () => {
-      it('should not error for deferred blocks', () => {
+      it('should handle deferred blocks', () => {
        env.tsconfig({_enabledBlockTypes: ['defer']});
        env.write('cmp-a.ts', `
-          import {Component} from '@angular/core';
+          import { Component } from '@angular/core';

          @Component({
            standalone: true,
@@ -8887,8 +8887,8 @@ function allTests(os: string) {
        `);

        env.write('/test.ts', `
-          import {Component} from '@angular/core';
-          import {CmpA} from './cmp-a';
+          import { Component } from '@angular/core';
+          import { CmpA } from './cmp-a';

          @Component({
            selector: 'local-dep',
@@ -8914,10 +8914,177 @@ function allTests(os: string) {
        env.driveMain();

        const jsContents = env.getContents('test.js');
+
        expect(jsContents).toContain('ɵɵdefer(0, TestCmp_Defer_0_DepsFn)');
        expect(jsContents)
            .toContain(
                'function TestCmp_Defer_0_DepsFn() { return [import("./cmp-a").then(function (m) { return m.CmpA; }), LocalDep]; }');
+
+        // The `CmpA` symbol wasn't referenced elsewhere, so it can be defer-loaded
+        // via dynamic imports and an original import can be removed.
+        expect(jsContents).not.toContain('import { CmpA }');
+      });
+
+      describe('imports', () => {
+        it('should retain regular imports when symbol is eagerly referenced', () => {
+          env.tsconfig({_enabledBlockTypes: ['defer']});
+          env.write('cmp-a.ts', `
+            import { Component } from '@angular/core';
+
+            @Component({
+              standalone: true,
+              selector: 'cmp-a',
+              template: 'CmpA!'
+            })
+            export class CmpA {}
+          `);
+
+          env.write('/test.ts', `
+            import { Component } from '@angular/core';
+            import { CmpA } from './cmp-a';
+
+            @Component({
+              selector: 'test-cmp',
+              standalone: true,
+              imports: [CmpA],
+              template: \`
+                {#defer}
+                  <cmp-a />
+                {/defer}
+              \`,
+            })
+            export class TestCmp {
+              constructor() {
+                // This line retains the regular import of CmpA,
+                // since it's eagerly referenced in the code.
+                console.log(CmpA);
+              }
+            }
+          `);
+
+          env.driveMain();
+
+          const jsContents = env.getContents('test.js');
+
+          expect(jsContents).toContain('ɵɵdefer(0, TestCmp_Defer_0_DepsFn)');
+
+          // The dependency function doesn't have a dynamic import, because `CmpA`
+          // was eagerly referenced in component's code, thus regular import can not be removed.
+          expect(jsContents).toContain('function TestCmp_Defer_0_DepsFn() { return [CmpA]; }');
+          expect(jsContents).toContain('import { CmpA }');
+        });
+
+        it('should retain regular imports when one of the symbols is eagerly referenced', () => {
+          env.tsconfig({_enabledBlockTypes: ['defer']});
+          env.write('cmp-a.ts', `
+            import { Component } from '@angular/core';
+
+            @Component({
+              standalone: true,
+              selector: 'cmp-a',
+              template: 'CmpA!'
+            })
+            export class CmpA {}
+
+            @Component({
+              standalone: true,
+              selector: 'cmp-b',
+              template: 'CmpB!'
+            })
+            export class CmpB {}
+          `);
+
+          env.write('/test.ts', `
+            import { Component } from '@angular/core';
+            import { CmpA, CmpB } from './cmp-a';
+
+            @Component({
+              selector: 'test-cmp',
+              standalone: true,
+              imports: [CmpA, CmpB],
+              template: \`
+                {#defer}
+                  <cmp-a />
+                  <cmp-b />
+                {/defer}
+              \`,
+            })
+            export class TestCmp {
+              constructor() {
+                // This line retains the regular import of CmpA,
+                // since it's eagerly referenced in the code.
+                console.log(CmpA);
+              }
+            }
+          `);
+
+          env.driveMain();
+
+          const jsContents = env.getContents('test.js');
+
+          expect(jsContents).toContain('ɵɵdefer(0, TestCmp_Defer_0_DepsFn)');
+
+          // The dependency function doesn't have a dynamic import, because `CmpA`
+          // was eagerly referenced in component's code, thus regular import can not be removed.
+          // This also affects `CmpB`, since it was extracted from the same import.
+          expect(jsContents)
+              .toContain('function TestCmp_Defer_0_DepsFn() { return [CmpA, CmpB]; }');
+          expect(jsContents).toContain('import { CmpA, CmpB }');
+        });
+
+        it('should drop regular imports when none of the symbols are eagerly referenced', () => {
+          env.tsconfig({_enabledBlockTypes: ['defer']});
+          env.write('cmp-a.ts', `
+            import { Component } from '@angular/core';
+
+            @Component({
+              standalone: true,
+              selector: 'cmp-a',
+              template: 'CmpA!'
+            })
+            export class CmpA {}
+
+            @Component({
+              standalone: true,
+              selector: 'cmp-b',
+              template: 'CmpB!'
+            })
+            export class CmpB {}
+          `);
+
+          env.write('/test.ts', `
+            import { Component } from '@angular/core';
+            import { CmpA, CmpB } from './cmp-a';
+
+            @Component({
+              selector: 'test-cmp',
+              standalone: true,
+              imports: [CmpA, CmpB],
+              template: \`
+                {#defer}
+                  <cmp-a />
+                  <cmp-b />
+                {/defer}
+              \`,
+            })
+            export class TestCmp {}
+          `);
+
+          env.driveMain();
+
+          const jsContents = env.getContents('test.js');
+
+          expect(jsContents).toContain('ɵɵdefer(0, TestCmp_Defer_0_DepsFn)');
+
+          // Both `CmpA` and `CmpB` were used inside the `{#defer}` and were not
+          // referenced elsewhere, so we generate dynamic imports and drop a regular one.
+          expect(jsContents)
+              .toContain(
+                  'function TestCmp_Defer_0_DepsFn() { return [' +
+                  'import("./cmp-a").then(function (m) { return m.CmpA; }), ' +
+                  'import("./cmp-a").then(function (m) { return m.CmpB; })]; }');
+          expect(jsContents).not.toContain('import { CmpA, CmpB }');
+        });
      });
    });
  });
@@ -22,7 +22,7 @@ import {toOptionalLiteralMap} from './util';
 *
 * Do not include any prerelease in these versions as they are ignored.
 */
-const MINIMUM_PARTIAL_LINKER_VERSION = '14.0.0';
+const MINIMUM_PARTIAL_LINKER_VERSION = '16.1.0';

 /**
 * Compile a directive declaration defined by the `R3DirectiveMetadata`.
@@ -45,7 +45,14 @@ export function createDirectiveDefinitionMap(meta: R3DirectiveMetadata):
    DefinitionMap<R3DeclareDirectiveMetadata> {
  const definitionMap = new DefinitionMap<R3DeclareDirectiveMetadata>();

-  definitionMap.set('minVersion', o.literal(MINIMUM_PARTIAL_LINKER_VERSION));
+  const hasTransformFunctions =
+      Object.values(meta.inputs).some(input => input.transformFunction !== null);
+  // Note: in order to allow consuming Angular libraries that have been compiled with 16.1+ in
+  // Angular 16.0, we only force a minimum version of 16.1 if input transform feature as introduced
+  // in 16.1 is actually used.
+  const minVersion = hasTransformFunctions ? MINIMUM_PARTIAL_LINKER_VERSION : '14.0.0';
+
+  definitionMap.set('minVersion', o.literal(minVersion));
  definitionMap.set('version', o.literal('0.0.0-PLACEHOLDER'));

  // e.g. `type: MyDirective`
@@ -389,7 +389,7 @@ export function getPlatform(): PlatformRef|null {
 *
 * @publicApi
 *
- * @see provideZoneChangeDetection
+ * @see {@link provideZoneChangeDetection}
 */
 export interface NgZoneOptions {
  /**
@@ -1290,8 +1290,8 @@ export function internalProvideZoneChangeDetection(ngZoneFactory: () => NgZone):
 * ```
 *
 * @publicApi
- * @see bootstrapApplication
- * @see NgZoneOptions
+ * @see {@link bootstrapApplication}
+ * @see {@link NgZoneOptions}
 */
 export function provideZoneChangeDetection(options?: NgZoneOptions): EnvironmentProviders {
  const zoneProviders =
@@ -66,6 +66,7 @@ export const PLATFORM_ID = new InjectionToken<Object>('Platform ID', {
 * A [DI token](guide/glossary#di-token "DI token definition") that indicates the root directory of
 * the application
 * @publicApi
+ * @deprecated
 */
 export const PACKAGE_ROOT_URL = new InjectionToken<string>('Application Packages Root URL');

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Andrew Kushnir	03fc92d448	release: cut the v16.2.2 release	2023-08-23 10:35:53 -07:00
Joey Perrott	76860b54b9	ci: correctly check aio job results (#51464 ) Correctly check the aio job result to determine if we should deploy. PR Close #51464	2023-08-22 11:41:31 -07:00
Jeevan Mahesha	fb296e4dd7	docs: add MSYS2 to DEVELOPER.md (#51459 ) PR Close #51459	2023-08-22 10:39:24 -07:00
Andrew Scott	157415831c	refactor(router): Have router subscribe to transition events to update state (#48427 ) Rather than the navigation transitions managing Router state, this commit updates the Router to manage its own state based on ongoing transition events. In the future, this can be abstracted even further to have a totally separate class that manages the Router state. This would allow the potential for swapping state manager implementations rather than having to implement all types of state management in a single place. One finding during tests was that unexpected errors thrown by the state management code moved to the Router here will no longer be caught by the transition pipe's `catchError`. This only includes calls to the following public Api methods: * `go`, `replaceState`, `historyGo`, `isCurrentPathEqualTo` on `Location` * `UrlSerializer.serialize` * `UrlHandlingStrategy.merge`. None of these methods should throw if the router is expected to function. These might throw when tests include incomplete mocks, which is not supported, or in cases where the actual browser methods like `replaceState` would throw. This will already result in unexpected/unsupported behavior. The failure case here is now arguably better - the navigation itself still completes but the state update (either updating Router internal state or updating the browser URL) fails separately and is unhandled. PR Close #48427	2023-08-22 08:04:01 -07:00
Matthieu Riegler	6208865206	docs: update `versions.md` for 16.2 (#51448 ) PR Close #51448	2023-08-22 08:02:55 -07:00
Alan Agius	0606eca25e	docs: remove update reference (#51449 ) Remove reference that `--routing` was added in 8.1 PR Close #51449	2023-08-22 08:02:07 -07:00
aanchal	4fe88cf9af	docs: add lang attribute in html files (#51269 ) PR Close #51269	2023-08-21 16:33:44 -07:00
Aristeidis Bampakos	94a361b543	docs: review Angular elements guide (#50043 ) PR Close #50043	2023-08-21 16:32:53 -07:00
mgechev	bf0f80e5d6	docs: add link to developer survey 2023 (#51444 ) PR Close #51444	2023-08-21 13:43:50 -07:00
Andrew Scott	b0396e7164	fix(router): Ensure `canceledNavigationResolution: 'computed'` works on first page (#51441 ) Setting the page ID is currently broken for the first page because the helper method's second parameter is optional, which allowed the initally `undefined` page ID to be used again when the router performs its initial navigation. fixes #50983 PR Close #51441	2023-08-21 13:01:59 -07:00
Mark Thompson	7f0563eb6e	docs(animations): update animation docs to be standalone first (#51390 ) Update the animation example files to be standalone and use boostrap application, update the documentation to prioritize standalone PR Close #51390	2023-08-21 13:01:21 -07:00
Yann-Thomas LE MOIGNE	6dc2b22426	docs(service-worker): Miss a comma in sample (#3 ) (#51336 ) PR Close #51336	2023-08-21 08:24:32 -07:00
Matthieu Riegler	36f434e49d	fix(core): guard the jasmine hooks (#51394 ) This commit fixes a regression introduced in #50063 Fixes #51382 PR Close #51394	2023-08-21 08:14:54 -07:00
Paul Gschwendtner	4b0ef5acfb	ci: remove myself from pullapprove unavailability list (#51437 ) Removes myself from the pullapprove unavailability list. PR Close #51437	2023-08-21 08:14:02 -07:00
Naaajii	a1e923e2f4	docs(docs-infra): fix margin on contribute page heading (#51393 ) fix margin on h2 tag of contribute page being overwritten closes #51391 PR Close #51393	2023-08-21 08:12:58 -07:00
JoostK	39ace8664b	fix(compiler-cli): enforce a minimum version to be used when a library uses input transform (#51413 ) Angular 16.1 introduced the input transform feature, requiring the partial compilation output to be extended with a reference to the input transform function. This has resulted in a subtle breaking change, where older versions of the Angular linker can no longer consume libraries that have started to use this feature. We do try to support using a 16.1 library from an Angular 16.0 application, but if a library actually adopts a new feature then this is no longer possible. In such cases, it is desirable to report a message telling the user that their version of the Angular compiler is too old, as determined by the `"minVersion"` property that is present in each partial declaration. This version would still indicate that the declaration required at least Angular 14.0 to be compiled, but this is not accurate once input transforms are being used. Consequently, this error would not be reported, causing a less informative error once the input transform was being observed. Fixes #51411 PR Close #51413	2023-08-18 07:58:54 -07:00
Matthieu Riegler	2c65ea9b40	refactor(platform-browser-dynamic): remove reexport of `MetadataOverrider` (#51412 ) this commit removes an unnecessary re-export PR Close #51412	2023-08-18 07:57:35 -07:00
Matthieu Riegler	3dbfabcafe	docs: fix links in `UpgradeAdapter` (#51395 ) PR Close #51395	2023-08-18 07:56:42 -07:00
Payam Valadkhan	cf463a6f4f	docs: add instruction how to run aio locally (#51402 ) This test is part of CI and is needed in addition to tests in packages. PR Close #51402	2023-08-17 14:00:14 -07:00
Alex Castle	a43c0772ea	fix(common): Allow safeUrl for ngSrc in NgOptimizedImage (#51351 ) Allow safeUrl and add transformer to immediately convert ngSrc to string PR Close #51351	2023-08-17 10:20:36 -07:00
Matthieu Riegler	bd4d2bbc1e	docs: fix see also links. (#51379 ) These were all the @see with no links. PR Close #51379	2023-08-17 10:18:34 -07:00
Matthieu Riegler	4a2492380c	docs(docs-infra): fix `docs-watch` script (#51316 ) With this commit we can use `yarn docs-watch` again Fixes #51308 PR Close #51316	2023-08-17 10:17:34 -07:00
Pawel Kozlowski	4b46819ed1	release: cut the v16.2.1 release	2023-08-16 10:19:50 -07:00
Gerald Monaco	7a090eee96	refactor(core): Ensure hydration cleanup runs in the Angular zone (#51321 ) Hydration cleanup needs to run in the Angular zone so that change detection will run. PR Close #51321	2023-08-15 16:02:06 -07:00
Andrew Scott	da68bead56	docs(router): Clarify how to clear secondary routes (#51376 ) The example for clearing secondary outlets currently only works because the named outlet appears at the root of the application's route config. If developers follow this example with an outlet that is not at the root level, they will not be able to close the outlet. This commit updates the example to provide a more robust way of clearing the outlet from the activated outlet component as well as providing a warning about how the commands are applied. Lastly, there is a small bit of guidance provided for developers who might want to explore the ability to close an outlet from any location in the app, without needing to be aware of the activated route. An example of this can be found here: https://stackblitz.com/edit/close-outlet-from-anywhere resolves #51373 resolves #13523 PR Close #51376	2023-08-15 15:43:18 -07:00
Zoltán Szőgyényi	543b98e1f8	docs: add new UI library resource from the Tailwind CSS ecosystem (#50976 ) PR Close #50976	2023-08-15 11:29:40 -07:00
Luis Castro	03619ada72	docs(common): revert format date_pipe (#51359 ) PR Close #51359	2023-08-15 10:06:47 -07:00
Luis Castro	d8e5316eca	docs(common): add new date format example to documentation (#51359 ) PR Close #51359	2023-08-15 10:06:47 -07:00
Matthieu Riegler	77efeb5933	docs: Add usage information to `HttpInterceptorFn` (#51236 ) Simple doc addendum PR Close #51236	2023-08-15 10:02:43 -07:00
Matthieu Riegler	252b111d1e	docs: Improve host binding docs (#51326 ) This commit adds the mention of the support of styles/classes/attributes in host bindings. fixes # 44296 PR Close #51326	2023-08-15 09:54:14 -07:00
aanchal	1c41633483	docs: add the doc type attribute (#51332 ) PR Close #51332	2023-08-15 09:53:06 -07:00
codestart	9f977e0f34	docs(docs-infra): fix minor typo in standalone-migration.md (#51370 ) PR Close #51370	2023-08-15 09:37:47 -07:00
Quentin Dunand	3e19890967	docs: Fix Promise.then wrong parameter (#51322 ) Removed the second wrong parameter from the `Promise.then()` method in the doc. PR Close #51322	2023-08-14 15:27:37 -07:00
Andrew Scott	074fd4a5ec	build: update pullapprove (#51360 ) update pullapprove to remove self from unavailable list PR Close #51360	2023-08-14 15:12:27 -07:00
Matthieu Riegler	094d733654	docs: Add Missing SSR integrity marker error doc page (#51340 ) This commit adds an error doc page for error 507 : Missing SSR content integrity marker. PR Close #51340	2023-08-14 14:39:25 -07:00
Jessica Janiuk	2fff344cd6	docs: Add CDN Optimization section to hydration guide (#51355 ) This adds a section to cover the case of CDNs that have optimizations that will break both Angular and Hydration by stripping comment nodes. PR Close #51355	2023-08-14 14:31:09 -07:00
Jeff Schiller	951ef93aa6	docs(core): Fix minor typo in comment of injector_compatibility.ts (#51324 ) PR Close #51324	2023-08-14 08:56:29 -07:00
Jeff Schiller	f30a49e3de	docs(docs-infra): Fix minor typos in dependency-injection-context.md (#51324 ) PR Close #51324	2023-08-14 08:56:29 -07:00
Joey Perrott	c48e1cc4ed	ci: migrate aio jobs to GHA (#51071 ) Migrate aio presubmit and deploy jobs to use Github Actions PR Close #51071	2023-08-14 08:55:31 -07:00
Sinan997	198834b731	docs: update @self() decorator explanation (#51342 ) PR Close #51342	2023-08-13 16:33:16 -07:00
Matthieu Riegler	6a8c030ab1	docs(docs-infra): Hide decorator option row if empty. (#51327 ) In case where the decorator option has no description nor usageNotes, we can hide that row. PR Close #51327	2023-08-11 06:07:38 -07:00
Andrew Scott	232a8c1b8d	fix(router): Apply named outlets to children empty paths not appearing in the URL (#51292 ) Empty path routes are effectively 'passthrough' routes that do not appear in the URL. When these exist in the route tree, we do not want to apply named outlet commands to that tree location. Instead, we skip past this location in the tree, effectively squashing/removing this passthrough route from the tree. fixes #50356 PR Close #51292	2023-08-10 09:18:30 -07:00
Joey Perrott	8f944e0752	ci: migrate framework tests to GHA (#51101 ) Migrate framework presubmit test job to use Github Actions PR Close #51101	2023-08-09 17:36:24 -07:00
aanchal	af0c8b8fa8	docs: add legend tag to fieldset (#51259 ) PR Close #51259	2023-08-09 17:18:39 -07:00
Swami	ee19395672	docs: Correct statement about app.module.ts generation with --standalone flag (#51307 ) The documentation incorrectly stated that the app.module.ts file is generated when the --standalone flag is used. This is not the case, and the documentation should accurately reflect the behavior. Closes #51306 PR Close #51307	2023-08-09 17:16:49 -07:00
Dylan Hunn	096fdd0f59	release: cut the v16.2.0 release	2023-08-09 14:03:37 -07:00
Douglas Parker	9998bee5f4	refactor: add `dgp1130` to DevTools PullApprove config (#51301 ) DevTools falls under Angular Tooling and I'll probably be reviewing future PRs for the extension. PR Close #51301	2023-08-09 10:19:27 -07:00
Gerald Monaco	95387047fd	docs: Add after*Render to Component Lifecycle guide (#51291 ) PR Close #51291	2023-08-09 10:18:28 -07:00
Paweł Rawicki	899e51ad8e	docs: Instead of CanActivateFn, CanActivateChildFn appears in CanActivateFn docs (#51283 ) A minor error is present within the documentation. Specifically, in the documentation for the CanActivateFn function, a reference is made to the CanActivateChildFn function. However, it appears that the CanActivateChildFn function is not utilized or referenced elsewhere in the documentation of CanActivateFn. PR Close #51283	2023-08-08 10:40:54 -07:00
Matthieu Riegler	0ba2b5e5c3	refactor(animations): remove unecessary interface (#50662 ) `Animation` is provided by `lib.dom`. PR Close #50662	2023-08-07 09:26:26 -07:00
Andrew Kushnir	9f490da7e2	fix(core): handle hydration of view containers for root components (#51247 ) For cases when a root component also acts as an anchor node for a ViewContainerRef (for example, when ViewContainerRef is injected in a root component), there is a need to serialize information about the component itself, as well as an LContainer that represents this ViewContainerRef. Effectively, we need to serialize 2 pieces of info: (1) hydration info for the root component itself and (2) hydration info for the ViewContainerRef instance (an LContainer). Each piece of information is included into the hydration data (in the TransferState object) separately, thus we end up with 2 ids. Since we only have 1 root element, we encode both bits of info into a single string: ids are separated by the `\|` char (e.g. `10\|25`, where `10` is the ngh for a component view and 25 is the `ngh` for a root view which holds LContainer). Previously, we were only including component-related information, thus all the views in the view container remained dehydrated and duplicated (client-rendered from scratch) on the client. Resolves #51157. PR Close #51247	2023-08-07 09:24:26 -07:00
Matthieu Riegler	b95b5b55d8	refactor(core): throw an error when hydration marker is missing from DOM (#51170 ) (#51276 ) non-destructive hydration expects the DOM tree to have the same structure in both places. With this commit, the app will throw an error if comments are stripped out by the http server (eg by some CDNs). PR Close #51276	2023-08-07 09:22:51 -07:00
Matthieu Riegler	26781fd0fe	refactor(core): remove unnecessary import for custom expect. (#51216 ) Also adding some missing assertion after `expect()` PR Close #51216	2023-08-07 09:22:20 -07:00
Matthieu Riegler	f79fd35042	docs: add deprecation of `PACKAGE_ROOT_URL` (#51222 ) PR Close #51222	2023-08-07 09:21:47 -07:00
Matthieu Riegler	dfa772d686	refactor(core): remove unused private provider (#51222 ) Both `DEFAULT_PACKAGE_URL_PROVIDER` and `ERROR_COLLECTOR_TOKEN` are unused across the project PR Close #51222	2023-08-07 09:21:46 -07:00
Matthieu Riegler	c7c0723c7f	refactor(core): deprecate `PACKAGE_ROOT_URL` token (#51222 ) Usage was removed in #43884 PR Close #51222	2023-08-07 09:21:46 -07:00
Pawel Kozlowski	e01549b26b	refactor(core): introduce LView and LContainer utility functions (#51191 ) This refactoring adds utility functions to add / remove LView from LContainer. Those utils are preparation for the control flow and defer work. Existing code was refactored to use the new utility functions and avoid any code duplication. PR Close #51191	2023-08-04 16:00:46 -04:00
aanchal	cf62063174	docs: add title tag to index file (#51266 ) PR Close #51266	2023-08-04 11:29:52 -04:00
Matthieu Riegler	c0c6d1d892	docs: fix missing space after full stop (#51252 ) Fixes #51250 PR Close #51252	2023-08-04 11:28:36 -04:00
Andrew Kushnir	d1fa6cd7d9	refactor(compiler): drop regular imports when symbols can be defer-loaded (#51171 ) This commit updates the logic to drop regular imports when all symbols that it brings can be defer-loaded. The change ensures that there is no mix of regular and dynamic imports present in a source file. PR Close #51171	2023-08-04 11:28:07 -04:00
Alex Rickabaugh	1472515d68	release: cut the v16.2.0-rc.0 release	2023-08-02 13:20:39 -07:00