# 18.2.0 (2024-08-14)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [c8e2885136](https://github.com/angular/angular/commit/c8e2885136b08981333a336b7b2ba553266eba63) | feat | Add extended diagnostic to warn when there are uncalled functions in event bindings ([#56295](https://github.com/angular/angular/pull/56295)) ([#56295](https://github.com/angular/angular/pull/56295)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [98ed5b609e](https://github.com/angular/angular/commit/98ed5b609e76d3d2b464abfe49d70413c54d3eee) | feat | run JIT transform on classes with `jit: true` opt-out ([#56892](https://github.com/angular/angular/pull/56892)) |
| [c76b440ac0](https://github.com/angular/angular/commit/c76b440ac007128c53699797811bc586220ccbe9) | fix | add warning for unused let declarations ([#57033](https://github.com/angular/angular/pull/57033)) |
| [0f0a1f2836](https://github.com/angular/angular/commit/0f0a1f28365cdb2dc6abed5ec75d4f6ba7ff1578) | fix | emitting references to ngtypecheck files ([#57138](https://github.com/angular/angular/pull/57138)) |
| [6c2fbda694](https://github.com/angular/angular/commit/6c2fbda6942adbc7b21f3dfc1db0a42638223a1a) | fix | extended diagnostic visitor not visiting template attributes ([#57033](https://github.com/angular/angular/pull/57033)) |
| [e11c0c42d2](https://github.com/angular/angular/commit/e11c0c42d2cbcdf8a5d75a4e24a6a5dbed33943e) | fix | run JIT transforms on `@NgModule` classes with `jit: true` ([#57212](https://github.com/angular/angular/pull/57212)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [f7918f5272](https://github.com/angular/angular/commit/f7918f52720d3e903281154725cb257a952e8896) | feat | Add 'flush' parameter option to fakeAsync to flush after the test ([#57239](https://github.com/angular/angular/pull/57239)) |
| [fab673a1dd](https://github.com/angular/angular/commit/fab673a1ddbca19ff9734f92a5ef0cc16be5708c) | feat | add ng generate schematic to convert to inject ([#57056](https://github.com/angular/angular/pull/57056)) |
| [7919982063](https://github.com/angular/angular/commit/7919982063e7638ffabe2127d4803bb930c791bc) | feat | Add whenStable helper on ApplicationRef ([#57190](https://github.com/angular/angular/pull/57190)) |
| [3459289ef0](https://github.com/angular/angular/commit/3459289ef079a80e84bb92e20c25fb6cae18aaf8) | feat | bootstrapModule can configure NgZone in providers ([#57060](https://github.com/angular/angular/pull/57060)) |
| [296216cbe1](https://github.com/angular/angular/commit/296216cbe1c70822d4b444321d218d57c89621b2) | fix | Allow hybrid CD scheduling to support multiple "Angular zones" ([#57267](https://github.com/angular/angular/pull/57267)) |
| [8718abce90](https://github.com/angular/angular/commit/8718abce900617275d80ca56141d4e4436481b69) | fix | Deprecate ignoreChangesOutsideZone option ([#57029](https://github.com/angular/angular/pull/57029)) |
| [827070e331](https://github.com/angular/angular/commit/827070e3314d4c3acee77920dc0d5375398917ab) | fix | Do not run image performance warning checks on server ([#57234](https://github.com/angular/angular/pull/57234)) |
| [ca89ef9141](https://github.com/angular/angular/commit/ca89ef9141191d56415bdf62354f5125800a4039) | fix | handle shorthand assignment in the inject migration ([#57134](https://github.com/angular/angular/pull/57134)) |
| [5dcdbfcba9](https://github.com/angular/angular/commit/5dcdbfcba934a930468aec140a7183b034466bdf) | fix | rename the equality function option in toSignal ([#56769](https://github.com/angular/angular/pull/56769)) |
| [2a4f488a6c](https://github.com/angular/angular/commit/2a4f488a6cb8bdadece70c8aa076c02fae801688) | fix | warnings for oversized images and lazy-lcp present with bootstrapModule ([#57060](https://github.com/angular/angular/pull/57060)) |
### language-service
| Commit | Type | Description |
| -- | -- | -- |
| [4bb558ab0c](https://github.com/angular/angular/commit/4bb558ab0cbf2e5e34816377e977128a177a977a) | feat | support writing code refactorings ([#56895](https://github.com/angular/angular/pull/56895)) |
| [7663debce1](https://github.com/angular/angular/commit/7663debce1a8411a763a27b7cf8bc5955f8ea2ed) | perf | quick exit if no code fixes can exist ([#57000](https://github.com/angular/angular/pull/57000)) |


# 18.1.0 (2024-07-10)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [f25653e231](https://github.com/angular/angular/commit/f25653e2311152d30b14d25acb0dccb4e2b5ea56) | fix | typo in NgOptimizedImage warning ([#56756](https://github.com/angular/angular/pull/56756)) |
| [9b35726e42](https://github.com/angular/angular/commit/9b35726e42ebdeed138a25581e0a7eefff466206) | fix | typo in warning for NgOptimizedDirective ([#56817](https://github.com/angular/angular/pull/56817)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [fd6cd0422d](https://github.com/angular/angular/commit/fd6cd0422d2d761d2c6cc0cd41838fbba8a3f010) | feat | Add extended diagnostic to warn when there are uncalled functions in event bindings ([#56295](https://github.com/angular/angular/pull/56295)) |
| [341a116d61](https://github.com/angular/angular/commit/341a116d611c095ed414c82612adb529e7be310c) | fix | allow more characters in let declaration name ([#56764](https://github.com/angular/angular/pull/56764)) |
| [2a1291e942](https://github.com/angular/angular/commit/2a1291e942a3cd645ee635e72e7d83722383d39b) | fix | give precedence to local let declarations over parent ones ([#56752](https://github.com/angular/angular/pull/56752)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [66e582551e](https://github.com/angular/angular/commit/66e582551eb081e422e0df41badce1821c46dc62) | fix | avoid duplicate diagnostics for let declarations read before definition ([#56843](https://github.com/angular/angular/pull/56843)) |
| [4d18c5bfd5](https://github.com/angular/angular/commit/4d18c5bfd54c53655955c8cd90472081ade40b34) | fix | flag all conflicts between let declarations and local symbols ([#56752](https://github.com/angular/angular/pull/56752)) |
| [9e21582456](https://github.com/angular/angular/commit/9e215824565f0d30da7edb20087c4460069a6660) | fix | Show template syntax errors in local compilation modified ([#55855](https://github.com/angular/angular/pull/55855)) |
| [5996502921](https://github.com/angular/angular/commit/599650292107f8856c7cd41791bd0856f9d14eb1) | fix | type check let declarations nested inside nodes ([#56752](https://github.com/angular/angular/pull/56752)) |
| [cdebf751e4](https://github.com/angular/angular/commit/cdebf751e4949048b01acc92de2517f46fcd5d37) | fix | used before declared diagnostic not firing for control flow blocks ([#56843](https://github.com/angular/angular/pull/56843)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [ea3c802056](https://github.com/angular/angular/commit/ea3c80205653af109c688a4d4808143b34591d54) | feat | Add a schematic to migrate afterRender phase flag ([#55648](https://github.com/angular/angular/pull/55648)) |
| [5df3e78c99](https://github.com/angular/angular/commit/5df3e78c9907f522f2f96c087b10ca12d57f7028) | feat | add equality function to rxjs-interop `toSignal` ([#56447](https://github.com/angular/angular/pull/56447)) |
| [0a48d584f2](https://github.com/angular/angular/commit/0a48d584f2ffeebb9402032182d4fc13a260c5cf) | feat | add support for let syntax ([#56715](https://github.com/angular/angular/pull/56715)) |
| [352e0782ec](https://github.com/angular/angular/commit/352e0782ec37d2adcc662cfc69c83d38058a34bf) | feat | expose signal input metadata in `ComponentMirror` ([#56402](https://github.com/angular/angular/pull/56402)) |
| [a655e46447](https://github.com/angular/angular/commit/a655e46447962bf56bf0184e3104328b9f7c1531) | feat | Redesign the `afterRender` & `afterNextRender` phases API ([#55648](https://github.com/angular/angular/pull/55648)) |
| [e5a6f91722](https://github.com/angular/angular/commit/e5a6f917225aafa7c5c860f280d2aafe3615727e) | feat | support TypeScript 5.5 ([#56096](https://github.com/angular/angular/pull/56096)) |
| [38effcc63e](https://github.com/angular/angular/commit/38effcc63eea360e948dc22860add72d3aa02288) | fix | Add back phase flag option as a deprecated API ([#55648](https://github.com/angular/angular/pull/55648)) |
| [86bcfd3e49](https://github.com/angular/angular/commit/86bcfd3e498b8ec1de1a2a1ad0847fe567f7e9d4) | fix | improve docs on afterRender hooks ([#56522](https://github.com/angular/angular/pull/56522)) |
| [b2445a0953](https://github.com/angular/angular/commit/b2445a095314aa66da038d3093e6a1b18fe5768b) | fix | link errors to ADEV ([#55554](https://github.com/angular/angular/pull/55554)) ([#56038](https://github.com/angular/angular/pull/56038)) |
| [03a2acd2a3](https://github.com/angular/angular/commit/03a2acd2a3bdc87aaeb6b835a7c1016f800b31cb) | fix | properly remove imports in the afterRender phase migration ([#56524](https://github.com/angular/angular/pull/56524)) |
| [4d87b9e899](https://github.com/angular/angular/commit/4d87b9e899381894a1de90f251da58613a96eed0) | fix | rename the equality function option in toSignal ([#56769](https://github.com/angular/angular/pull/56769)) ([#56922](https://github.com/angular/angular/pull/56922)) |
| [8bd4c074af](https://github.com/angular/angular/commit/8bd4c074afe85b739dff4d3c4dcc19384c42b85e) | fix | toSignal equal option should be passed to inner computed ([#56903](https://github.com/angular/angular/pull/56903)) |
### forms
| Commit | Type | Description |
| -- | -- | -- |
| [00bde8b1c2](https://github.com/angular/angular/commit/00bde8b1c2d1511da40526a374d4e94d31e0d575) | fix | Make `NgControlStatus` host bindings `OnPush` compatible ([#55720](https://github.com/angular/angular/pull/55720)) |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [cc21989132](https://github.com/angular/angular/commit/cc21989132bc64b981df83cb6ff6e1506b42a1d0) | fix | Make `Content-Type` header case insensitive ([#56541](https://github.com/angular/angular/pull/56541)) |


# 17.0.6 (2023-12-06)
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [a2e5f483f5](https://github.com/angular/angular/commit/a2e5f483f5a869c0cca205f092049e252a02b710) | fix | generate proper code for nullish coalescing in styling host bindings ([#53305](https://github.com/angular/angular/pull/53305)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [66ecf4c274](https://github.com/angular/angular/commit/66ecf4c2748b43b7e53af00499b153bbe70dd684) | fix | add compiler option to disable control flow content projection diagnostic ([#53387](https://github.com/angular/angular/pull/53387)) |
| [74e6ce5d23](https://github.com/angular/angular/commit/74e6ce5d233c8763b6c437fab5d81d7b89ae6cd4) | fix | add diagnostic for control flow that prevents content projection ([#53387](https://github.com/angular/angular/pull/53387)) |
| [6ec7a42b95](https://github.com/angular/angular/commit/6ec7a42b9578aa34a66bb7c81ac491bb18f98941) | fix | avoid conflicts with built-in global variables in for loop blocks ([#53319](https://github.com/angular/angular/pull/53319)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [0a53f96094](https://github.com/angular/angular/commit/0a53f9609462fc59cf20c7fe1436d153c23e0412) | fix | cleanup signal consumers for all views ([#53351](https://github.com/angular/angular/pull/53351)) |
| [4fc1581bbc](https://github.com/angular/angular/commit/4fc1581bbcd98e607eb2bbd9976c64c92a70d827) | fix | handle hydration of multiple nodes projected in a single slot ([#53270](https://github.com/angular/angular/pull/53270)) |
| [14e66533ec](https://github.com/angular/angular/commit/14e66533ec49184723a66652253e9ae863a972e0) | fix | support hydration for cases when content is re-projected using ng-template ([#53304](https://github.com/angular/angular/pull/53304)) |
| [8e366e8911](https://github.com/angular/angular/commit/8e366e8911434d5b91e83e215320caae72f6adf8) | fix | support swapping hydrated views in `@for` loops ([#53274](https://github.com/angular/angular/pull/53274)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [45064f1ae1](https://github.com/angular/angular/commit/45064f1ae1ceb9c5a1f1053077f77370e3e9fdb2) | fix | CF migration - ensure NgIfElse attributes are properly removed ([#53298](https://github.com/angular/angular/pull/53298)) |
| [a6275cfa54](https://github.com/angular/angular/commit/a6275cfa54d680d6612a1c91e5d3f6b86b828fbc) | fix | CF Migration - Fix case of aliases on i18n ng-templates preventing removal ([#53299](https://github.com/angular/angular/pull/53299)) |
| [58a96e0f50](https://github.com/angular/angular/commit/58a96e0f50f2d59376aa357188ad0792b39e4e70) | fix | CF Migration add support for ngIf with just a then ([#53297](https://github.com/angular/angular/pull/53297)) |
| [26e40c7f89](https://github.com/angular/angular/commit/26e40c7f8916612034b03dae4f74e53b61d39d86) | fix | CF Migration fix missing alias for bound ngifs ([#53296](https://github.com/angular/angular/pull/53296)) |
| [836aeba01d](https://github.com/angular/angular/commit/836aeba01db526676610802daff4e8ebca8cef1e) | fix | Change CF Migration ng-template placeholder generation and handling ([#53394](https://github.com/angular/angular/pull/53394)) |
| [72d22ba7ee](https://github.com/angular/angular/commit/72d22ba7eea87e2873a765aa69b3d923b9d6cc6d) | fix | fix regexp for else and then in cf migration ([#53257](https://github.com/angular/angular/pull/53257)) |
| [7a2facae8a](https://github.com/angular/angular/commit/7a2facae8af3240b21fc17857a770dad793b7b6d) | fix | handle aliases on bound ngIf migrations ([#53261](https://github.com/angular/angular/pull/53261)) |
| [5104a89b30](https://github.com/angular/angular/commit/5104a89b3035fb07ce23e09974dc9998ef6932ca) | fix | handle nested ng-template replacement safely in CF migration ([#53368](https://github.com/angular/angular/pull/53368)) |
| [2a4e3f5373](https://github.com/angular/angular/commit/2a4e3f5373dfbc2a1634d67e646c30d8bbe4fea8) | fix | handle templates outside of component in cf migration ([#53368](https://github.com/angular/angular/pull/53368)) |
| [0db75ab5b1](https://github.com/angular/angular/commit/0db75ab5b1c8c79a0e7ca1d6094092f0cb3e3939) | fix | remove setting that removes comments in CF migration ([#53350](https://github.com/angular/angular/pull/53350)) |
### router
| Commit | Type | Description |
| -- | -- | -- |
| [13ade13a15](https://github.com/angular/angular/commit/13ade13a15f0c5b5f782d2fda0f7a96b3c606198) | fix | Ensure canMatch guards run on wildcard routes ([#53239](https://github.com/angular/angular/pull/53239)) |


# 17.0.4 (2023-11-20)
### common
| Commit | Type | Description |
| -- | -- | -- |
| [7f1c55755d](https://github.com/angular/angular/commit/7f1c55755d94444aa2c07fc62c276bb158e69f24) | fix | remove `load` on image once it fails to load ([#52990](https://github.com/angular/angular/pull/52990)) |
| [fafcb0d23f](https://github.com/angular/angular/commit/fafcb0d23f1f687a2fe5c8349b916586ffadc375) | fix | scan images once page is loaded ([#52991](https://github.com/angular/angular/pull/52991)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [98376f2c09](https://github.com/angular/angular/commit/98376f2c09e9c28d1473123a2a1f4fb1c9d1cb1e) | fix | changed after checked error in for loops ([#52935](https://github.com/angular/angular/pull/52935)) |
| [291deac663](https://github.com/angular/angular/commit/291deac6636a6f99a98dd0c9096ebe3b0547bb9e) | fix | generate i18n instructions for blocks ([#52958](https://github.com/angular/angular/pull/52958)) |
| [49dca36880](https://github.com/angular/angular/commit/49dca36880a1c1c394533e8a94db9c5ef412ebd2) | fix | nested for loops incorrectly calculating computed variables ([#52931](https://github.com/angular/angular/pull/52931)) |
| [f01b7183d2](https://github.com/angular/angular/commit/f01b7183d2064f41c0f5e30ee976cc91c15e06c5) | fix | produce placeholder for blocks in i18n bundles ([#52958](https://github.com/angular/angular/pull/52958)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [f671f86ac2](https://github.com/angular/angular/commit/f671f86ac28d434b2fd492ef005749fe0275ece9) | fix | add diagnostic for control flow that prevents content projection ([#52726](https://github.com/angular/angular/pull/52726)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [db1a8ebdb4](https://github.com/angular/angular/commit/db1a8ebdb4da8673107ba4ba08c42d484b733c03) | fix | cleanup loading promise when no dependencies are defined ([#53031](https://github.com/angular/angular/pull/53031)) |
| [31a1575334](https://github.com/angular/angular/commit/31a1575334ef78822d947ed858d8365ca5665f2f) | fix | handle local refs when `getDeferBlocks` is invoked in tests ([#52973](https://github.com/angular/angular/pull/52973)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [ac9cd6108f](https://github.com/angular/angular/commit/ac9cd6108f6fe25e9c7a11db9816c6e07d241515) | fix | control flow migration fails for async pipe with unboxing of observable ([#52756](https://github.com/angular/angular/pull/52756)) ([#52972](https://github.com/angular/angular/pull/52972)) |
| [13bf5b7007](https://github.com/angular/angular/commit/13bf5b700739aadb2e5a210441fb815a8501ad65) | fix | Fixes control flow migration if then else case ([#53006](https://github.com/angular/angular/pull/53006)) |
| [492ad4698a](https://github.com/angular/angular/commit/492ad4698aaef51a3d24ae90f617a2ba3fae901e) | fix | fixes migrations of nested switches in control flow ([#53010](https://github.com/angular/angular/pull/53010)) |
| [0fad36eff2](https://github.com/angular/angular/commit/0fad36eff2b228baa3b8868810d4ac86eb6db459) | fix | tweaks to formatting in control flow migration ([#53058](https://github.com/angular/angular/pull/53058)) |

# 17.0.3 (2023-11-15)
### animations
| Commit | Type | Description |
| -- | -- | -- |
| [f5872c9921](https://github.com/angular/angular/commit/f5872c992181a2c231890b83f92ec03ec9606802) | fix | prevent the AsyncAnimationRenderer from calling the delegate when there is no element. ([#52570](https://github.com/angular/angular/pull/52570)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [6a1d4ed667](https://github.com/angular/angular/commit/6a1d4ed6670f5965a654e40997aa266a99925f50) | fix | handle non-container environment injector cases ([#52774](https://github.com/angular/angular/pull/52774)) |
| [5de7575be8](https://github.com/angular/angular/commit/5de7575be83b9829e65ad245034ee7ab1d966044) | fix | reset cached scope for components that were overridden using TestBed ([#52916](https://github.com/angular/angular/pull/52916)) |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [7c066a4af4](https://github.com/angular/angular/commit/7c066a4af4faae25ee722c19576c63c3833066ee) | fix | Use the response `content-type` to set the blob `type`. ([#52840](https://github.com/angular/angular/pull/52840)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [4e200bf13b](https://github.com/angular/angular/commit/4e200bf13b284fa89bbb0854cbb85dc8fe94d8bb) | fix | Add missing support for ngForOf ([#52903](https://github.com/angular/angular/pull/52903)) |
| [d033540d0f](https://github.com/angular/angular/commit/d033540d0f874a7a05b79c00e3151ed076fa71c3) | fix | Add support for bound versions of NgIfElse and NgIfThenElse ([#52869](https://github.com/angular/angular/pull/52869)) |
| [aa2d815648](https://github.com/angular/angular/commit/aa2d815648dbf3303cfe72bf976a4a87de406ee0) | fix | Add support for removing imports post migration ([#52763](https://github.com/angular/angular/pull/52763)) |
| [3831942771](https://github.com/angular/angular/commit/38319427711f4dab4e4d64ff48aecc7727085031) | fix | Fixes issue with multiple if elses with same template ([#52863](https://github.com/angular/angular/pull/52863)) |
| [e1f84a31dc](https://github.com/angular/angular/commit/e1f84a31dcac413251329c3b695a253234c6aae6) | fix | passed in paths will be respected in nx workspaces ([#52796](https://github.com/angular/angular/pull/52796)) |


# 17.0.2 (2023-11-09)
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [7a95cccf50](https://github.com/angular/angular/commit/7a95cccf50c01a3733c6015551f8864e246d9239) | fix | add interpolatedSignalNotInvoked to diagnostics ([#52687](https://github.com/angular/angular/pull/52687)) |
| [a548c0333e](https://github.com/angular/angular/commit/a548c0333ecc993073ee7df054119a6fdde1d27b) | fix | incorrect inferred type of for loop implicit variables ([#52732](https://github.com/angular/angular/pull/52732)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [2cea80c6e2](https://github.com/angular/angular/commit/2cea80c6e21c113d12c38c4b3219c5f3f5944bd8) | fix | error code in image performance warning ([#52727](https://github.com/angular/angular/pull/52727)) |
| [b16fc2610a](https://github.com/angular/angular/commit/b16fc2610a37b7407713e1e0018d92372f1349e9) | fix | limit rate of markers invocations ([#52742](https://github.com/angular/angular/pull/52742)) |
| [44c48a4835](https://github.com/angular/angular/commit/44c48a48358c92c32301b578966a8e1ee9a867d8) | fix | properly update collection with repeated keys in `@for` ([#52697](https://github.com/angular/angular/pull/52697)) |

# 17.0.1 (2023-11-08)
### http
| Commit | Type | Description |
| -- | -- | -- |
| [5c6f3f8ec0](https://github.com/angular/angular/commit/5c6f3f8ec0f1dd9b5505f3c94e654a675e75f147) | fix | Don't override the backend when using the InMemoryWebAPI ([#52425](https://github.com/angular/angular/pull/52425)) |
### migrations
| Commit | Type | Description |
| -- | -- | -- |
| [70d30c28e0](https://github.com/angular/angular/commit/70d30c28e04f4ead51145e4e47df342492bfb336) | fix | Add support for ng-templates with i18n attributes ([#52597](https://github.com/angular/angular/pull/52597)) |
| [4f125c5f9a](https://github.com/angular/angular/commit/4f125c5f9ae572a8216ec1fbb88f52e47b875e1e) | fix | Switches to multiple passes to fix several reported bugs ([#52592](https://github.com/angular/angular/pull/52592)) |

Web Frameworks: the internet frontier.

These are the voyages of the framework Angular.

Its continuing mission:

To explore strange, new technologies.

To seek out new users and new applications.

To boldly go where no web framework has gone before.

In honor of v17.0.1

```
                                                  ______
                                     ___.--------'------`---------.____
                               _.---'----------------------------------`---.__
                             .'___=]===========================================
,-----------------------..__/.'         >--.______        _______.---'
]====================<==||(__)        .'          `------'
`-----------------------`' ----.___--/
     /       /---'                 `/
    /_______(______________________/
    `-------------.--------------.'
                   \________|_.-'
```

Live long and prosper 🖖🏻

# 17.0.0 (2023-11-08)

[Blog post "Angular v17 is now available"](http://goo.gle/angular-v17).

## Breaking Changes
###
- Node.js v16 support has been removed and the minimum support version has been bumped to 18.13.0.

  Node.js v16 is planned to be End-of-Life on 2023-09-11. Angular will stop supporting Node.js v16 in Angular v17. For Node.js release schedule details, please see: https://github.com/nodejs/release#release-schedule
### common
- the NgSwitch directive now defaults to the === equality operator,
  migrating from the previously used == operator. NgSwitch expressions and / or
  individual condition values need adjusting to this stricter equality
  check. The added warning message should help pin-pointing NgSwitch
  usages where adjustments are needed.
### core
- Angular now requires `zone.js` version `~0.14.0`
- Versions of TypeScript older than 5.2 are no longer supported.
- The  `mutate` method was removed from the `WritableSignal` interface and completely
  dropped from the public API surface. As an alternative, please use the `update` method and
  make immutable changes to the object.

  Example before:

  ```typescript
  items.mutate(itemsArray => itemsArray.push(newItem));
  ```

  Example after:

  ```typescript
  items.update(itemsArray => [itemsArray, …newItem]);
  ```
- `OnPush` components that are created dynamically now
  only have their host bindings refreshed and `ngDoCheck run` during change
  detection if they are dirty.
  Previously, a bug in the change detection would result in the `OnPush`
  configuration of dynamically created components to be ignored when
  executing host bindings and the `ngDoCheck` function. This is
  rarely encountered but can happen if code has a handle on the
  `ComponentRef` instance and updates values read in the `OnPush`
  component template without then calling either `markForCheck` or
  `detectChanges` on that component's `ChangeDetectorRef`.
### platform-browser
- `REMOVE_STYLES_ON_COMPONENT_DESTROY` default value is now `true`. This causes CSS of components to be removed from the DOM when destroyed. You retain the previous behaviour by providing the `REMOVE_STYLES_ON_COMPONENT_DESTROY` injection token.

  ```ts
  import {REMOVE_STYLES_ON_COMPONENT_DESTROY} from '@angular/platform-browser';
  ...
  providers: [{
    provide: REMOVE_STYLES_ON_COMPONENT_DESTROY,
    useValue: false,
  }]
  ```
- The `withNoDomReuse()` function was removed from the public API. If you need to disable hydration, you can exclude the `provideClientHydration()` call from provider list in your application (which would disable hydration features for the entire application) or use `ngSkipHydration` attribute to disable hydration for particular components. See this guide for additional information: https://angular.io/guide/hydration#how-to-skip-hydration-for-particular-components.
### router
- Absolute redirects no longer prevent further redirects.
  Route configurations may need to be adjusted to prevent infinite
  redirects where additional redirects were previously ignored after an
  absolute redirect occurred.
- Routes with `loadComponent` would incorrectly cause
  child routes to inherit their data by default. The default
  `paramsInheritanceStrategy` is `emptyOnly`. If parent data should be
  inherited in child routes, this should be manually set to `always`.
- `urlHandlingStrategy` has been removed from the Router public API.
  This should instead be configured through the provideRouter or RouterModule.forRoot APIs.
- The following Router properties have been removed from
  the public API:

  - canceledNavigationResolution
  - paramsInheritanceStrategy
  - titleStrategy
  - urlUpdateStrategy
  - malformedUriErrorHandler

  These should instead be configured through the `provideRouter` or
  `RouterModule.forRoot` APIs.
- The `setupTestingRouter` function has been removed. Use
  `RouterModule.forRoot` or `provideRouter` to setup the `Router` for
  tests instead.
- `malformedUriErrorHandler` is no longer available in
  the `RouterModule.forRoot` options. URL parsing errors should instead be
  handled in the `UrlSerializer.parse` method.
### zone.js
- Deep and legacy `dist/` imports like `zone.js/bundles/zone-testing.js` and `zone.js/dist/zone` are no longer allowed. `zone-testing-bundle` and `zone-testing-node-bundle` are also no longer part of the package.

  The proper way to import `zone.js` and `zone.js/testing` is:
  ```js
  import 'zone.js';
  import 'zone.js/testing';
  ```
## Depre


(2023-06-01)
### animations
| Commit | Type | Description |
| -- | -- | -- |
| [df65c4fc8f](https://github.com/angular/angular/commit/df65c4fc8f71ab9bf59ec4e5e820d136b12fb570) | fix | Trigger leave animation when ViewContainerRef is injected ([#48705](https://github.com/angular/angular/pull/48705)) |
### common
| Commit | Type | Description |
| -- | -- | -- |
| [7e1bc513de](https://github.com/angular/angular/commit/7e1bc513dead7d809f5ba2e6edc45b85af12f828) | fix | untrack subscription and unsubscription in async pipe ([#50522](https://github.com/angular/angular/pull/50522)) |
### core
| Commit | Type | Description |
| -- | -- | -- |
| [9970b29ace](https://github.com/angular/angular/commit/9970b29acef11f1dfedd2640520b4bca4b996f81) | fix | update `ApplicationRef.isStable` to account for rendering pending tasks ([#50425](https://github.com/angular/angular/pull/50425)) |

# 16.0.3 (2023-05-24)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [c11041e372](https://github.com/angular/angular/commit/c11041e37260ac658e96e98fde5dea6d85b24aae) | fix | adds missing symbols for animation standalone bundling test ([#50434](https://github.com/angular/angular/pull/50434)) |
| [98e8fdf40e](https://github.com/angular/angular/commit/98e8fdf40e598f2c2a4d0c11de302ea13e586a1a) | fix | fix `Self` flag inside embedded views with custom injectors ([#50270](https://github.com/angular/angular/pull/50270)) |
| [199ff4fe7f](https://github.com/angular/angular/commit/199ff4fe7f2cd4b561703e8520c2d6ccc1e2afb7) | fix | host directives incorrectly validating aliased bindings ([#50364](https://github.com/angular/angular/pull/50364)) |
### http
| Commit | Type | Description |
| -- | -- | -- |
| [080bbd2137](https://github.com/angular/angular/commit/080bbd21377d099c91aa0c6ea8ca634423cd8125) | fix | create macrotask during request handling instead of load start ([#50406](https://github.com/angular/angular/pull/50406)) |

# 16.0.2 (2023-05-17)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [c1016d4e57](https://github.com/angular/angular/commit/c1016d4e578152dcdfe7c4a4673f27e12bfabf8d) | fix | add additional component metadata to component ID generation ([#50340](https://github.com/angular/angular/pull/50340)) |
| [cc41758b59](https://github.com/angular/angular/commit/cc41758b595da46a3fd14a58b3832c77b251b940) | fix | allow onDestroy unregistration while destroying ([#50237](https://github.com/angular/angular/pull/50237)) |
| [7d679bdb59](https://github.com/angular/angular/commit/7d679bdb59815e7e816337532d069d68cf45a6d8) | fix | allow passing value of any type to `isSignal` function ([#50035](https://github.com/angular/angular/pull/50035)) |

# 16.0.1 (2023-05-10)
### core
| Commit | Type | Description |
| -- | -- | -- |
| [52c74d3b4a](https://github.com/angular/angular/commit/52c74d3b4a8d60b60c9e572541b6ccae0d704754) | fix | add additional component metadata to component ID generation ([#50203](https://github.com/angular/angular/pull/50203)) |
| [048b6b1e0d](https://github.com/angular/angular/commit/048b6b1e0d9d93d63e6fde2c16a9c3e2b221b581) | fix | bootstrapApplication call not rejected when error is thrown in importProvidersFrom module ([#50120](https://github.com/angular/angular/pull/50120)) |
| [d68796782f](https://github.com/angular/angular/commit/d68796782ff4ce1f389f14dcff31d393ddaa195d) | fix | handle hydration of root components with injected ViewContainerRef ([#50136](https://github.com/angular/angular/pull/50136)) |
| [f751ce6445](https://github.com/angular/angular/commit/f751ce64453f6ccede13b7bfd02b817eda0b40f7) | fix | handle projection of hydrated containters into components that skip hydration ([#50199](https://github.com/angular/angular/pull/50199)) |
| [346ab73dd9](https://github.com/angular/angular/commit/346ab73dd95fd2adfd8cb4064b9f12a6171e51d5) | fix | only try to retrieve transferred state on the browser ([#50144](https://github.com/angular/angular/pull/50144)) |

# 16.0.0


(2023-05-03)

[Blog post "Angular v16 is now available"](https://goo.gle/angular-v16).

## Breaking Changes
###
- Angular Compatibility Compiler (ngcc) has been removed and as a result Angular View Engine libraries will no longer work
- Deprecated `EventManager` method `addGlobalEventListener` has been removed as it is not used by Ivy.
### bazel
- Several changes to the Angular Package Format (APF)
  - Removal of FESM2015
  - Replacing ES2020 with ES2022
  - Replacing FESM2020 with FESM2022
- Several changes to the Angular Package Format (APF)
  - Removal of FESM2015
  - Replacing ES2020 with ES2022
  - Replacing FESM2020 with FESM2022
### common
- `MockPlatformLocation` is now provided by default in tests.
  Existing tests may have behaviors which rely on
  `BrowserPlatformLocation` instead. For example, direct access to the
  `window.history` in either the test or the component rather than going
  through the Angular APIs (`Location.getState()`). The quickest fix is to
  update the providers in the test suite to override the provider again
  `TestBed.configureTestingModule({providers: [{provide: PlatformLocation, useClass: BrowserPlatformLocation}]})`.
  The ideal fix would be to update the code to instead be compatible with
  `MockPlatformLocation` instead.
-  If the 'ngTemplateOutletContext' is different from the context, it will result in a compile-time error.

  Before the change, the following template was compiling:

  ```typescript
  interface MyContext {
    $implicit: string;
  }

  @Component({
    standalone: true,
    imports: [NgTemplateOutlet],
    selector: 'person',
    template: `
      <ng-container
        *ngTemplateOutlet="
          myTemplateRef;
          context: { $implicit: 'test', xxx: 'xxx' }
        "></ng-container>
    `,
  })
  export class PersonComponent {
    myTemplateRef!: TemplateRef<MyContext>;
  }
  ```
  However, it does not compile now because the 'xxx' property does not exist in 'MyContext', resulting in the error: 'Type '{ $implicit: string; xxx: string; }' is not assignable to type 'MyContext'.'

  The solution is either:
  - add the 'xxx' property to 'MyContext' with the correct type or
  - add '$any(...)' inside the template to make the error disappear. However, adding '$any(...)' does not correct the error but only preserves the previous behavior of the code.
- Deprecated `XhrFactory` export from `@angular/common/http` has been removed. Use `XhrFactory` from `@angular/common` instead.
### compiler
- * TypeScript 4.8 is no longer supported.
### core
- QueryList.filter now supports type guard functions, which will result in type narrowing. Previously if you used type guard functions, it resulted in no changes to the return type. Now the type would be narrowed, which might require updates to the application code that relied on the old behavior.
- `zone.js` versions `0.11.x` and `0.12.x` are not longer supported.
- * `entryComponents` has been deleted from the `@NgModule` and `@Component` public APIs. Any usages can be removed since they weren't doing anyting.
  * `ANALYZE_FOR_ENTRY_COMPONENTS` injection token has been deleted. Any references can be removed.
- ComponentRef.setInput will only set the input on the
  component if it is different from the previous value (based on `Object.is`
  equality). If code relies on the input always being set, it should be
  updated to copy objects or wrap primitives in order to ensure the input
  value differs from the previous call to `setInput`.
- `RendererType2.styles` no longer accepts a nested arrays.
- The `APP_ID` token value is no longer randomly generated. If you are bootstrapping multiple application on the same page you will need to set to provide the `APP_ID` yourself.

  ```ts
  bootstrapApplication(ComponentA, {
    providers: [
     { provide: APP_ID, useValue: 'app-a' },
     // ... other providers ...
    ]
  });
  ```
- The `ReflectiveInjector` and related symbols were removed. Please update the code to avoid references to the `ReflectiveInjector` symbol. Use `Injector.create` as a replacement to create an injector instead.
- Node.js v14 support has been removed

  Node.js v14 is planned to be End-of-Life on 2023-04-30. Angular will stop supporting Node.js v14 in Angular v16. Angular v16 will continue to officially support Node.js versions v16 and v18.
### platform-browser
- The deprecated `BrowserTransferStateModule` was removed, since it's no longer needed. The `TransferState` class can be injected without providing the module. The `BrowserTransferStateModule` was empty starting from v14 and you can just remove the reference to that module from your applications.
### platform-server
- Users that are using SSR with JIT mode will now need to add  `import to @angular/compiler` before bootstrapping the application.

  **NOTE:** this does not effect users using the Angular CLI.
- `renderApplication` method no longer accepts a root component as first argument. Instead, provide a bootstrapping function that returns a `Promise<ApplicationRef>`.

  Before
  ```ts
  const output: string = await renderApplication(RootComponent, options);
  ```

  Now
  ```ts
  const bootstrap = () => bootstrapApplication(RootComponent, appConfig);
  const output: string = await renderApplication(bootstrap, options);
  ```
- `renderModuleFactory` has been removed. Use `renderModule` instead.
### router
- The `Scroll` event's `routerEvent` property may also be
  a `NavigationSkipped` event. Previously, it was only a `NavigationEnd`
  event.
- `ComponentFactoryResolver` has been removed from Router APIs.
  Component factories are not required to create an instance of a component
  dynamically. Passing a factory resolver via resolver argument is no longer needed
  and code can instead use `ViewContainerRef.createComponent` without the
  factory resolver.
- The `RouterEvent` type is no longer present in the `Event` union type representing all router event types. If you have code using something like `filter((e: Event): e is RouterEvent => e instanceof RouterEvent)`, you'll need to update it to `filter((e: Event|RouterEvent): e is RouterEvent => e instanceof RouterEvent)`.
- Tests which mock `ActivatedRoute` instances may need to be adjusted
  because Router.createUrlTree now does the right thing in more
  scenarios. This means that tests with invalid/incomplete ActivatedRoute mocks
  may behave differently than before. Additionally, tests may now navigate
  to a real URL where before they would navigate to the root. Ensure that
  tests provide expected routes to match.
  There is rarely production impact, but it has been found that relative
  navigations when using an `ActivatedRoute` that does not appear in the
  current router state were effectively ignored in the past. By creating
  the correct URLs, this sometimes resulted in different navigation
  behavior in the application. Most often, this happens when attempting to
  create a navigation that only updates query params using an empty
  command array, for example `router.navigate([], {relativeTo: route,
  queryParams: newQueryParams})`. In this case, the `relativeTo` property
  should be removed.
## Deprec


ations
### core
-  `makeStateKey`, `StateKey` and  `TransferState` exports have been moved from `@angular/platform-browser` to `@angular/core`. Please update the imports.

  ```diff
  - import {makeStateKey, StateKey, TransferState} from '@angular/platform-browser';
  + import {makeStateKey, StateKey, TransferState} from '@angular/core';
  ```
- `EnvironmentInjector.runInContext` is now deprecated, with
  `runInInjectionContext` functioning as a direct replacement:

  ```typescript
  // Previous method version (deprecated):
  envInjector.runInContext(fn);
  // New standalone function:
  runInInjectionContext(envInjector, fn);
  ```
- The `@Directive`/`@Component` `moduleId` property is now
  deprecated. It did not have any effect for multiple major versions and
  will be removed in v17.
### platform-browser
- `BrowserModule.withServerTransition` has been deprecated. `APP_ID` should be used instead to set the application ID.
  NB: Unless, you render multiple Angular applications on the same page, setting an application ID is not necessary.

  Before:
  ```ts
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    ...
  ]
  ```

  After:
  ```ts
  imports: [
    BrowserModule,
    { provide: APP_ID, useValue: 'serverApp' },
    ...
  ],
  ```
- `ApplicationConfig` has moved, please import `ApplicationConfig` from `@angular/core` instead.
### platform-server
- `PlatformConfig.baseUrl` and `PlatformConfig.useAbsoluteUrl` platform-server config options  are deprecated as these were not used.
###
| Commit | Type | Description |
| -- | -- | -- |
| [48aa96ea13](https://github.com/angular/angular/commit/48aa96ea13ebfadf2f6b13516c7702dae740a7be) | refactor | remove Angular Compatibility Compiler (ngcc) ([#49101](https://github.com/angular/angular/pull/49101)) |
| [2703fd6260](https://github.com/angular/angular/commit/2703fd626040c5e65401ebd776404a3b9e284724) | refactor | remove deprecated `EventManager` method `addGlobalEventListener` ([#49645](https://github.com/angular/angular/pull/49645)) |
### common
| Commit | Type | Description |
| -- | -- | -- |
| [5dce2a5a3a](https://github.com/angular/angular/commit/5dce2a5a3a00693d835a57934b9abacce5a33dfa) | feat | Provide MockPlatformLocation by default in BrowserTestingModule ([#49137](https://github.com/angular/angular/pull/49137)) |
| [d47fef72cb](https://github.com/angular/angular/commit/d47fef72cb497db555e67db50997b3b1cc3ee590) | fix | strict type checking for ngtemplateoutlet ([#48374](https://github.com/angular/angular/pull/48374)) |
| [c41a21658c](https://github.com/angular/angular/commit/c41a21658c9a56044b5d7f62cab4fcad5a5732c7) | refactor | remove deprecated `XhrFactory` export from `http` entrypoint ([#49251](https://github.com/angular/angular/pull/49251)) |
### compiler
| Commit | Type | Description |
| -- | -- | -- |
| [1a6ca68154](https://github.com/angular/angular/commit/1a6ca68154dd73bac4b8d2e094d97952f60b3e30) | feat | add support for compile-time required inputs ([#49304](https://github.com/angular/angular/pull/49304)) |
| [13dd614cd1](https://github.com/angular/angular/commit/13dd614cd1da65eee947fd6971b7d6e1d6def207) | feat | add support for compile-time required inputs ([#49453](https://github.com/angular/angular/pull/49453)) |
| [8f539c11f4](https://github.com/angular/angular/commit/8f539c11f40be12207ab42bdf1f87a154a5a2d04) | feat | add support for compile-time required inputs ([#49468](https://github.com/angular/angular/pull/49468)) |
| [79cdfeb392](https://github.com/angular/angular/commit/79cdfeb3921687dfbc8fea8d9f7ba4dbb14a7193) | feat | drop support for TypeScript 4.8 ([#49155](https://github.com/angular/angular/pull/49155)) |
| [1407a9aeaf](https://github.com/angular/angular/commit/1407a9aeaf5edf33dfb9b52d7b2baaebef9b80ed) | feat | support multiple configuration files in `extends` ([#49125](https://github.com/angular/angular/pull/49125)) |
| [9de1e9da8f](https://github.com/angular/angular/commit/9de1e9da8fc7d102f74389d9a270c4608bf0dd64) | fix | incorrectly matching directives on attribute bindings ([#49713](https://github.com/angular/angular/pull/49713)) |
| [6623810e4d](https://github.com/angular/angular/commit/6623810e4d3347edaccbbb214fa883ab6a669936) | fix | Produce diagnositc if directive used in host binding is not exported ([#49527](https://github.com/angular/angular/pull/49527)) |
### compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| [03d1d00ad9](https://github.com/angular/angular/commit/03d1d00ad9f88a2c449cceab64c1328787576162) | feat | Add an extended diagnostic for `nSkipHydration` ([#49512](https://github.com/angular/angular/pull/49512)) |
| [ed817e32fe](https://github.com/angular/angular/commit/ed817e32fe0239c0f08ce342c7ad224055d56f84) | fix | Catch FatalDiagnosticError during template type checking ([#49527](https://github.com/angular/angular/pull/49527)) |
| [49fe974501](https://github.com/angular/angular/commit/49fe974501b6f446eaedf2490f2d456a5967318f) | perf | optimize NgModule emit for standalone components ([#49837](https://github.com/angular/angular/pull/49837)) |
### core


s
| Commit | Type | Description |
| -- | -- | -- |
| [2796230e95](https://github.com/angular/angular/commit/2796230e953eb8c29d6227a1a3858f5f08a8f200) | fix | add `enum` in `mode` option in `standalone` schema ([#48851](https://github.com/angular/angular/pull/48851)) |
| [816e76a578](https://github.com/angular/angular/commit/816e76a5789b041fee78ddd278c0e0d19b9a617a) | fix | automatically prune root module after bootstrap step ([#49030](https://github.com/angular/angular/pull/49030)) |
| [bdbf21d04b](https://github.com/angular/angular/commit/bdbf21d04ba74a6f73469242076d6ce697c57edf) | fix | avoid generating imports with forward slashes ([#48993](https://github.com/angular/angular/pull/48993)) |
| [32cf4e5cb9](https://github.com/angular/angular/commit/32cf4e5cb989f365296d519dddf72fb38ca47c40) | fix | avoid internal modules when generating imports ([#48958](https://github.com/angular/angular/pull/48958)) |
| [521ccfbe6c](https://github.com/angular/angular/commit/521ccfbe6ce9af1a7ddd6ab5e70151b7198f82ef) | fix | avoid interrupting the migration if language service lookup fails ([#49010](https://github.com/angular/angular/pull/49010)) |
| [a40cd47aa7](https://github.com/angular/angular/commit/a40cd47aa7ebccfbeeb26e397e03f1372aa10a55) | fix | avoid modifying testing modules without declarations ([#48921](https://github.com/angular/angular/pull/48921)) |
| [1afa6ed322](https://github.com/angular/angular/commit/1afa6ed3227e784e3fe2b4b31443961589cb6332) | fix | don't add ModuleWithProviders to standalone test components ([#48987](https://github.com/angular/angular/pull/48987)) |
| [c98c6a8452](https://github.com/angular/angular/commit/c98c6a845286b9b89daf275a9c4a2bdbc7ad77a7) | fix | don't copy animations modules into the imports of test components ([#49147](https://github.com/angular/angular/pull/49147)) |
| [8389557848](https://github.com/angular/angular/commit/83895578488bd35c7e47609f092907eb0f53f435) | fix | don't copy unmigrated declarations into imports array ([#48882](https://github.com/angular/angular/pull/48882)) |
| [f82bdc4b01](https://github.com/angular/angular/commit/f82bdc4b01f93a7103870449d37da61cc4c4f179) | fix | don't delete classes that may provide dependencies transitively ([#48866](https://github.com/angular/angular/pull/48866)) |
| [759db12e0b](https://github.com/angular/angular/commit/759db12e0b618fcb51f4cb141adeb49bfa495a60) | fix | duplicated comments on migrated classes ([#48966](https://github.com/angular/angular/pull/48966)) |
| [ba38178d19](https://github.com/angular/angular/commit/ba38178d1918d413f9c2260c40eb6542eadfddba) | fix | generate forwardRef for same file imports ([#48898](https://github.com/angular/angular/pull/48898)) |
| [03fcb36cfd](https://github.com/angular/angular/commit/03fcb36cfd36731028bf288f156e16cb8ac4c758) | fix | migrate HttpClientModule to provideHttpClient() ([#48949](https://github.com/angular/angular/pull/48949)) |
| [2de6dae16d](https://github.com/angular/angular/commit/2de6dae16d4b0b83f0517a3033cda44ba44154ed) | fix | migrate RouterModule.forRoot with a config object to use features ([#48935](https://github.com/angular/angular/pull/48935)) |
| [770191cf1f](https://github.com/angular/angular/commit/770191cf1f1254546625dfa7a882b716c3f0aab3) | fix | migrate tests when switching to standalone bootstrap API ([#48987](https://github.com/angular/angular/pull/48987)) |
| [c7926b5773](https://github.com/angular/angular/commit/c7926b57730c23f765a00d3dd9f92079c95e87e0) | fix | move standalone migrations into imports ([#48987](https://github.com/angular/angular/pull/48987)) |
| [65c74ed93e](https://github.com/angular/angular/commit/65c74ed93e04cb560c27838d440c6aa7a9859a4e) | fix | normalize paths to posix ([#48850](https://github.com/angular/angular/pull/48850)) |
| [6377487b1a](https://github.com/angular/angular/commit/6377487b1ab7679cef9a44f88440fe5e8eb97480) | fix | only exclude bootstrapped declarations from initial standalone migration ([#48987](https://github.com/angular/angular/pull/48987)) |
| [e9e4449a43](https://github.com/angular/angular/commit/e9e4449a43430e026e61b0f05ebd32dd830fa916) | fix | preserve tsconfig in standalone migration ([#48987](https://github.com/angular/angular/pull/48987)) |
| [ffad1b49d9](https://github.com/angular/angular/commit/ffad1b49d95ab90637e7184f92cb5136d490d865) | fix | reduce number of files that need to be checked ([#48987](https://github.com/angular/angular/pull/48987)) |
| [ba7a757cc5](https://github.com/angular/angular/commit/ba7a757cc5a2f3f942adcbabdcd5b7aef33ea493) | fix | return correct alias when conflicting import exists ([#49139](https://github.com/angular/angular/pull/49139)) |
| [49a7c9f94a](https://github.com/angular/angular/commit/49a7c9f94ae8f89907da8b3620242e62f87ec5a4) | fix | standalone migration incorrectly throwing path error for multi app projects ([#48958](https://github.com/angular/angular/pull/48958)) |
| [584976e6c8](https://github.com/angular/angular/commit/584976e6c8a783d40578ab191132673300394a52) | fix | support --defaults in standalone migration ([#48921](https://github.com/angular/angular/pull/48921)) |
| [03f47ac901](https://github.com/angular/angular/commit/03f47ac9019eddbcb373b50c41bc6f523293ece1) | fix | use consistent quotes in generated imports ([#48876](https://github.com/angular/angular/pull/48876)) |
| [ebae506d89](https://github.com/angular/angular/commit/ebae506d894a90c38e0f2dd1e948acabdb0fdf2e) | fix | use import remapper in root component ([#49046](https://github.com/angular/angular/pull/49046)) |
| [40c976c909](https://github.com/angular/angular/commit/40c976c90975878852a87b7722076eb78944098b) | fix | use NgForOf instead of NgFor ([#49022](https://github.com/angular/angular/pull/49022)) |
| [4ac25b2aff](https://github.com/angular/angular/commit/4ac25b2affab4f959ad8c111f1e429a05b435422) | perf | avoid re-traversing nodes when resolving bootstrap call dependencies ([#49010](https://github.com/angular/angular/pull/49010)) |
| [26cb7ab2e6](https://github.com/angular/angular/commit/26cb7ab2e6ac9b61904361a8a544467b69eef3f3) | perf | speed up language service lookups ([#49010](https://github.com/angular/angular/pull/49010)) |
### platform-


[Blog post "Angular v15 is now available"](https://goo.gle/angular-v15).

## Breaking Changes
### compiler
- Keyframes names are now prefixed with the component's "scope name".
  For example, the following keyframes rule in a component definition,
  whose "scope name" is host-my-cmp:

     @keyframes foo { ... }

  will become:

     @keyframes host-my-cmp_foo { ... }

  Any TypeScript/JavaScript code which relied on the names of keyframes rules
  will no longer match.

  The recommended solutions in this case are to either:
  - change the component's view encapsulation to the `None` or `ShadowDom`
  - define keyframes rules in global stylesheets (e.g styles.css)
  - define keyframes rules programmatically in code.
### compiler-cli
- Invalid constructors for DI may now report compilation errors

  When a class inherits its constructor from a base class, the compiler may now
  report an error when that constructor cannot be used for DI purposes. This may
  either be because the base class is missing an Angular decorator such as
  `@Injectable()` or `@Directive()`, or because the constructor contains parameters
  which do not have an associated token (such as primitive types like `string`).
  These situations used to behave unexpectedly at runtime, where the class may be
  constructed without any of its constructor parameters, so this is now reported
  as an error during compilation.

  Any new errors that may be reported because of this change can be resolved either
  by decorating the base class from which the constructor is inherited, or by adding
  an explicit constructor to the class for which the error is reported.
- Angular compiler option `enableIvy` has been removed as Ivy is the only rendering engine.
### core
- Angular no longer supports Node.js versions `14.[15-19].x` and `16.[10-12].x`. Current supported versions of Node.js are `14.20.x`, `16.13.x` and `18.10.x`.
- TypeScript versions older than 4.8 are no longer supported.
- Existing iframe usages may have security-sensitive attributes applied as an attribute or property binding in a template or via host bindings in a directive. Such usages would require an update to ensure compliance with the new stricter rules around iframe bindings.
- Existing iframe usages may have `src` or `srcdoc` preceding other attributes. Such usages may need to be updated to ensure compliance with the new stricter rules around iframe bindings.
### forms
- setDisabledState will always be called when a `ControlValueAccessor` is attached. You can opt-out with `FormsModule.withConfig` or `ReactiveFormsModule.withConfig`.
### localize
- - `canParse` method has been removed from all translation parsers in `@angular/localize/tools`. `analyze` should be used instead.
  -  the `hint` parameter in the`parse` methods is now mandatory.
### router
- Previously, the `RouterOutlet` would immediately
  instantiate the component being activated during navigation. Now the
  component is not instantiated until the change detection runs. This
  could affect tests which do not trigger change detection after a router
  navigation. In rarer cases, this can affect production code that relies
  on the exact timing of component availability.
- The title property is now required on ActivatedRouteSnapshot
- `relativeLinkResolution` is no longer configurable in
  the Router. This option was used as a means to opt out of a bug fix.
## Deprecations
### com


Angular - The modern web developer's platform

  Angular is a development platform for building mobile and desktop web applications

 using TypeScript/JavaScript and other languages.

  angular.dev

  Contributing Guidelines
  ·
  Submit an Issue
  ·
  Blog

## Documentation

Get started with Angular, learn the fundamentals and explore advanced topics on our documentation website.

- [Getting Started][quickstart]
- [Architecture][architecture]
- [Components and Templates][componentstemplates]
- [Forms][forms]
- [API][api]

### Advanced

- [Angular Elements][angularelements]
- [Server Side Rendering][ssr]
- [Schematics][schematics]
- [Lazy Loading][lazyloading]
- [Animations][animations]

### Local Development

To contribute to the Angular Docs, check out the [Angular.dev README](adev/README.md)

## Development Setup

### Prerequisites

- Install [Node.js] which includes [Node Package Manager][npm]

### Setting Up a Project

Install the Angular CLI globally:

```
npm install -g @angular/cli
```

Create workspace:

```
ng new [PROJECT NAME]
```

Run the application:

```
cd [PROJECT NAME]
ng serve
```

Angular is cross-platform, fast, scalable, has incredible tooling, and is loved by millions.

## Quickstart

[Get started in 5 minutes][quickstart].

## Ecosystem

- [Angular Command Line (CLI)][cli]
- [Angular Material][angularmaterial]

## Changelog

[Learn about the latest improvements][changelog].

## Upgrading

Check out our [upgrade guide](https://angular.dev/update-guide/) to find out the best way to upgrade your project.

## Contributing

### Contributing Guidelines

Read through our [contributing guidelines][contributing] to learn about our submission process, coding rules, and more.

### Want to Help?

Want to report a bug, contribute some code, or improve the documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues labeled as [help wanted](https://github.com/angular/angular/labels/help%20wanted) or [good first issue](https://github.com/angular/angular/labels/good%20first%20issue).

### Code of Conduct

Help us keep Angular open and inclusive. Please read and follow our [Code of Conduct][codeofconduct].

## Community

Join the conversation and help the community.

- [X (formerly Twitter)][X (formerly Twitter)]
- [Discord][discord]
- [Gitter][gitter]
- [YouTube][youtube]
- [StackOverflow][stackoverflow]
- Find a Local [Meetup][meetup]

[![Love Angular badge](https://img.shields.io/badge/angular-love-blue?logo=angular&angular=love)](https://www.github.com/angular/angular)

**Love Angular? Give our repo a star :star: :arrow_up:.**

[contributing]: CONTRIBUTING.md
[quickstart]: https://angular.dev/tutorials/learn-angular
[changelog]: CHANGELOG.md
[ng]: https://angular.dev
[documentation]: https://angular.dev/overview
[angularmaterial]: https://material.angular.io/
[cli]: https://angular.dev/tools/cli
[architecture]: https://angular.dev/essentials
[componentstemplates]: https://angular.dev/tutorials/learn-angular/1-components-in-angular
[forms]: https://angular.dev/tutorials/learn-angular/15-forms
[api]: https://angular.dev/api
[angularelements]: https://angular.dev/guide/elements
[ssr]: https://angular.dev/guide/ssr
[schematics]: https://angular.dev/tools/cli/schematics
[lazyloading]: https://angular.dev/guide/ngmodules/lazy-loading
[node.js]: https://nodejs.org/
[npm]: https://www.npmjs.com/get-npm
[codeofconduct]: CODE_OF_CONDUCT.md
[X (formerly Twitter)]: https://www.twitter.com/angular
[discord]: https://discord.gg/angular
[gitter]: https://gitter.im/angular/angular
[stackoverflow]: https://stackoverflow.com/questions/tagged/angular
[youtube]: https://youtube.com/angular
[meetup]: https://www.meetup.com/find/?keywords=angular
[animations]: https://angular.dev/guide/animations


A type of [block](api/core/@defer) that can be used to defer load the JavaScript for components,
directives and pipes used inside a component template.

## Syntax

```angular-html
@defer ( on <trigger>; when <condition>; prefetch on <trigger>; prefetch when <condition> ) {
  <!-- deferred template fragment -->
  <calendar-cmp />
} @placeholder ( minimum? <duration> ) {
  <!-- placeholder template fragment -->
  <p>Placeholder</p>
} @loading ( minimum? <duration>; after? <duration> ) {
  <!-- loading template fragment -->
  <img alt="loading image" src="loading.gif" />
} @error {
  <!-- error template fragment -->
  <p>An loading error occurred</p>
}
```

## Description

### Blocks

Supported sections of a defer block. Note: only the @defer block template fragment is deferred
loaded. The remaining optional blocks are eagerly loaded.

| block          | Description                                              |
|----------------|----------------------------------------------------------|
| `@defer`       | The defer loaded block of content                        |
| `@placeholder` | Content shown prior to defer loading (Optional)          |
| `@loading`     | Content shown during defer loading (Optional)            |
| `@error`       | Content shown when defer loading errors occur (Optional) |

Triggers

Triggers provide conditions for when defer loading occurs. Some allow a template reference variable
as an optional parameter. Separate multiple triggers with a semicolon.

| trigger                         | Triggers...                                   |
|---------------------------------|-----------------------------------------------|
| `on idle`                       | when the browser reports idle state (default) |
| `on viewport(<elementRef>?)`    | when the element enters the viewport          |
| `on interaction(<elementRef>?)` | when clicked, touched, or focused             |
| `on hover(<elementRef>?)`       | when element has been hovered                 |
| `on immediate`                  | when the page finishes rendering              |
| `on timer(<duration>)`          | after a specific timeout                      |
| `when <condition>`              | on a custom condition                         |

Prefetch

Configures prefetching of the defer block used in the `@defer` parameters, but does not affect
rendering. Rendering is handled by the standard `on` and `when` conditions. Separate multiple
prefetch configurations with a semicolon.

```angular-html
@defer (prefetch on <trigger>; prefetch when <condition>) {
  <!-- deferred template fragment -->
}
```

Learn more in the [defer loading guide](guide/defer).


The `@if` block conditionally displays its content when its condition expression is truthy.

## Syntax

```angular-html
@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}
```

## Description

Content is added and removed from the DOM based on the evaluation of conditional expressions in
the `@if` and `@else` blocks.

The built-in `@if` supports referencing of expression results to keep a solution for common coding
patterns:

```angular-html
@if (users$ | async; as users) {
  {{ users.length }}
}
```


The `@for` block repeatedly renders content of a block for each item in a collection.

## Syntax

```angular-html
@for (item of items; track item.name) {
<li>{{ item.name }}</li>
} @empty {
<li>There are no items.</li>
}
```

## Description

The `@for` block renders its content in response to changes in a collection. Collections can be any
JavaScript [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols),
but there are performance advantages of using a regular `Array`.

You can optionally include an `@empty` section immediately after the `@for` block content. The
content of the `@empty` block displays when there are no items.

### `track` and objects identity

The value of the `track` expression determines a key used to associate array items with the views in
the DOM. Having clear indication of the item identity allows Angular to execute a minimal set of DOM
operations as items are added, removed or moved in a collection.

To optimize performance, especially in loops over immutable data, ensure the track expression is effectively used to
identify each item uniquely. Because of the potential for poor performance, the `track` expression
is required for the `@for` loops.

For collections that remain static , `track $index` provides a straightforward tracking mechanism. For dynamic
collections experiencing additions, deletions, or reordering, opt for a
unique property of each item as the tracking key.

### `$index` and other contextual variables

Inside `@for` contents, several implicit variables are always available:

| Variable | Meaning                                       |
|----------|-----------------------------------------------|
| `$count` | Number of items in a collection iterated over |
| `$index` | Index of the current row                      |
| `$first` | Whether the current row is the first row      |
| `$last`  | Whether the current row is the last row       |
| `$even`  | Whether the current row index is even         |
| `$odd`   | Whether the current row index is odd          |

These variables are always available with these names, but can be aliased via a `let` segment:

```angular-html
@for (item of items; track item.id; let idx = $index, e = $even) {
Item #{{ idx }}: {{ item.name }}
}
```

The aliasing is especially useful in case of using nested `@for` blocks where contextual variable
names could collide.


The `<ng-content>` element specifies where to project content inside a component template.

## Attributes

| Attribute     | Description                                                             |
|---------------|-------------------------------------------------------------------------|
| `select`      | CSS selector. Matching elements are projected into this `<ng-content>`. |

Only select elements from the projected content that match the given CSS `selector`.

Angular supports [selectors](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) for any
combination of tag name, attribute, CSS class, and the `:not` pseudo-class.


A special element that can hold structural directives without adding new elements to the DOM.

The `<ng-container>` allows us to use structural directives without any extra element, making sure
that the only DOM changes being applied are those dictated by the directives themselves.

This not only increases performance \(even so slightly\) since the browser ends up rendering less
elements but can also be a valuable asset in having cleaner DOMs and styles alike.

It can for example enable us to use structural directives without breaking styling dependent on a
precise DOM structure \(as for example the ones we get when using flex containers, margins, the
child combinator selector, etc.\).

## Usage notes

### With `*NgIf`s

One common use case of `<ng-container>` is alongside the `*ngIf` structural directive. By using the
special element we can produce very clean templates easy to understand and work with.

For example, we may want to have a number of elements shown conditionally but they do not need to be
all under the same root element. That can be easily done by wrapping them in such a block:

<ng-container *ngIf="condition">
  …
</ng-container>

This can also be augmented with an `else` statement alongside an `<ng-template>` as:

<ng-container *ngIf="condition; else templateA">
  …
</ng-container>
<ng-template #templateA>
  …
</ng-template>

### Combination of multiple structural directives

Multiple structural directives cannot be used on the same element; if you need to take advantage of
more than one structural directive, it is advised to use an `<ng-container>` per structural
directive.

The most common scenario is with `*ngIf` and `*ngFor`. For example, let's imagine that we have a
list of items but each item needs to be displayed only if a certain condition is true. We could be
tempted to try something like:

    {{ item.name }}

As we said that would not work, what we can do is to simply move one of the structural directives to
an `<ng-container>` element, which would then wrap the other one, like so:

  <ng-container *ngFor="let item of items">

      {{ item.name }}

  </ng-container>

This would work as intended without introducing any new unnecessary elements in the DOM.

For more information see [one structural directive per element](guide/directives/structural-directives#one-structural-directive-per-element).

### Use alongside ngTemplateOutlet

The `NgTemplateOutlet` directive can be applied to any element but most of the time it's applied
to `<ng-container>` ones. By combining the two, we get a very clear and easy to follow HTML and DOM
structure in which no extra elements are necessary and template views are instantiated where
requested.

For example, imagine a situation in which we have a large HTML, in which a small portion needs to be
repeated in different places. A simple solution is to define an `<ng-template>` containing our
repeating HTML and render that where necessary by using `<ng-container>` alongside
an `NgTemplateOutlet`.

Like so:

<ng-container *ngTemplateOutlet="tmpl; context: {$implicit: 'Hello'}">
</ng-container>

<ng-container *ngTemplateOutlet="tmpl; context: {$implicit: 'World'}">
</ng-container>

<ng-template #tmpl let-text>

{{ text }}

</ng-template>

For more information regarding `NgTemplateOutlet`, see
the [`NgTemplateOutlet`s api documentation page](api/common/NgTemplateOutlet).


import {isPlatformBrowser} from '@angular/common';
import {CUSTOM_ELEMENTS_SCHEMA, Inject, Injector, NgModule, PLATFORM_ID} from '@angular/core';
import {createCustomElement} from '@angular/elements';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';

import {AppComponent} from './app.component';
import {TitleComponent} from './title.component';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent, TitleComponent],
  imports: [BrowserModule, RouterModule.forRoot([])],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {
  constructor(injector: Injector, @Inject(PLATFORM_ID) platformId: object) {
    if (isPlatformBrowser(platformId)) {
      customElements.define('app-title-ce', createCustomElement(TitleComponent, {injector}));
    }
  }
}


"@ampproject/remapping@2.3.0", "@ampproject/remapping@^2.2.0":
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
  dependencies:
    "@jridgewell/gen-mapping" "^0.3.5"
    "@jridgewell/trace-mapping" "^0.3.24"

"@angular-devkit/architect@0.1900.0-next.5":
  version "0.1900.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.1900.0-next.5.tgz#4bf510e52fd6542c5b80e677bf8643828586b2de"
  integrity sha512-VX9rM05f2pbonjNjwZZv/kY0XVA5I5imwlshPf05wu4MSUsWJLBgugr/MwsYGyLjyT6PPredB6F+QEYvijNIiw==
  dependencies:
    "@angular-devkit/core" "19.0.0-next.5"
    rxjs "7.8.1"

"@angular-devkit/build-angular@file:../../node_modules/@angular-devkit/build-angular":
  version "19.0.0-next.5"
  dependencies:
    "@ampproject/remapping" "2.3.0"
    "@angular-devkit/architect" "0.1900.0-next.5"
    "@angular-devkit/build-webpack" "0.1900.0-next.5"
    "@angular-devkit/core" "19.0.0-next.5"
    "@angular/build" "19.0.0-next.5"
    "@babel/core" "7.25.2"
    "@babel/generator" "7.25.6"
    "@babel/helper-annotate-as-pure" "7.24.7"
    "@babel/helper-split-export-declaration" "7.24.7"
    "@babel/plugin-transform-async-generator-functions" "7.25.4"
    "@babel/plugin-transform-async-to-generator" "7.24.7"
    "@babel/plugin-transform-runtime" "7.25.4"
    "@babel/preset-env" "7.25.4"
    "@babel/runtime" "7.25.6"
    "@discoveryjs/json-ext" "0.6.1"
    "@ngtools/webpack" "19.0.0-next.5"
    "@vitejs/plugin-basic-ssl" "1.1.0"
    ansi-colors "4.1.3"
    autoprefixer "10.4.20"
    babel-loader "9.1.3"
    browserslist "^4.21.5"
    copy-webpack-plugin "12.0.2"
    critters "0.0.24"
    css-loader "7.1.2"
    esbuild-wasm "0.23.1"
    fast-glob "3.3.2"
    http-proxy-middleware "3.0.2"
    https-proxy-agent "7.0.5"
    istanbul-lib-instrument "6.0.3"
    jsonc-parser "3.3.1"
    karma-source-map-support "1.4.0"
    less "4.2.0"
    less-loader "12.2.0"
    license-webpack-plugin "4.0.2"
    loader-utils "3.3.1"
    magic-string "0.30.11"
    mini-css-extract-plugin "2.9.1"
    mrmime "2.0.0"
    open "10.1.0"
    ora "5.4.1"
    parse5-html-rewriting-stream "7.0.0"
    picomatch "4.0.2"
    piscina "4.6.1"
    postcss "8.4.45"
    postcss-loader "8.1.1"
    resolve-url-loader "5.0.0"
    rxjs "7.8.1"
    sass "1.78.0"
    sass-loader "16.0.1"
    semver "7.6.3"
    source-map-loader "5.0.0"
    source-map-support "0.5.21"
    terser "5.32.0"
    tree-kill "1.2.2"
    tslib "2.7.0"
    vite "5.4.4"
    watchpack "2.4.2"
    webpack "5.94.0"
    webpack-dev-middleware "7.4.2"
    webpack-dev-server "5.1.0"
    webpack-merge "6.0.1"
    webpack-subresource-integrity "5.1.0"
  optionalDependencies:
    esbuild "0.23.1"

"@angular-devkit/build-webpack@0.1900.0-next.5":
  version "0.1900.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.1900.0-next.5.tgz#b1a974dc4f54e7f45d915081508e60be746df5c1"
  integrity sha512-DMf3rr0Lh/bwhCcRyLvKl9UEnOFd8tkgu9X6sMgFSLRYDIThlUm+jntjQPIGcdN21wQTFgl+O1y/Ck6WYe7Jyw==
  dependencies:
    "@angular-devkit/architect" "0.1900.0-next.5"
    rxjs "7.8.1"

"@angular-devkit/core@19.0.0-next.5":
  version "19.0.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-19.0.0-next.5.tgz#710ae0e618cb04fa2e4c38e83d4ad1542968e3cb"
  integrity sha512-WEVlMZPvE7AQPKwfEdH4nuREkIAVwhVhkAD6EAZDYI0U2thLoDcPmNVgFgrrUxdxYE/+VTfXTCBSk6Eu2UkZKQ==
  dependencies:
    ajv "8.17.1"
    ajv-formats "3.0.1"
    jsonc-parser "3.3.1"
    picomatch "4.0.2"
    rxjs "7.8.1"
    source-map "0.7.4"

"@angular-devkit/schematics@19.0.0-next.5":
  version "19.0.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-19.0.0-next.5.tgz#ade97e2d7218d3365a01c6cfa3c56d9d116b39d8"
  integrity sha512-WCJ6uW4JqnSx0nKoPc4himv0srjvOeKHsKEVjVBNW9vuEv70zXpWa7/ggpTdOUt955umqy0NdObTFWmOBBV6jw==
  dependencies:
    "@angular-devkit/core" "19.0.0-next.5"
    jsonc-parser "3.3.1"
    magic-string "0.30.11"
    ora "5.4.1"
    rxjs "7.8.1"

"@angular/animations@file:../../dist/packages-dist/animations":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"


import {mergeApplicationConfig, ApplicationConfig} from '@angular/core';
import {provideServerRendering} from '@angular/platform-server';
import {appConfig} from './app.config';

const serverConfig: ApplicationConfig = {
  providers: [provideServerRendering()],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);


import {Routes} from '@angular/router';

export const routes: Routes = [];


import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent, ReactiveFormsComponent, TemplateFormsComponent} from './app.component';

@NgModule({
  declarations: [AppComponent, TemplateFormsComponent, ReactiveFormsComponent],
  imports: [BrowserModule, CommonModule, FormsModule, ReactiveFormsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}


import {Component} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-template-forms',
  template: `
  <form novalidate>

        First Name:
        <input name="first" ngModel required />

        Last Name:
        <input name="last" ngModel />

        Subscribe:
        <input name="subscribed" type="checkbox" ngModel />

Disabled: <input name="foo" ngModel disabled />

        City <input [(ngModel)]="addresses[i].city" name="name" />

      <button (click)="addCity()">Add City</button>

  </form>`,
  standalone: false,
})
export class TemplateFormsComponent {
  name = {first: 'Nancy', last: 'Drew', subscribed: true};
  addresses = [{city: 'Toronto'}];
  constructor() {
    // We use this reference in our test
    (window as any).templateFormsComponent = this;
  }

  addCity() {
    this.addresses.push({city: ''});
  }
}

@Component({
  selector: 'app-reactive-forms',
  template: `
  <form [formGroup]="profileForm">

      First Name:
      <input type="text" formControlName="firstName" />

      Last Name:
      <input type="text" formControlName="lastName" />

      Subscribe:
      <input type="checkbox" formControlName="subscribed" />

Disabled: <input formControlName="disabledInput" />

City: <input formControlName="city" />

    <button (click)="addCity()">Add City</button>
  </form>`,
  standalone: false,
})
export class ReactiveFormsComponent {
  profileForm!: FormGroup;
  addresses!: FormArray;

  get itemControls() {
    return (this.profileForm.get('addresses') as FormArray).controls;
  }

  constructor(private formBuilder: FormBuilder) {
    // We use this reference in our test
    (window as any).reactiveFormsComponent = this;
  }

  ngOnInit() {
    this.profileForm = new FormGroup({
      firstName: new FormControl('', Validators.required),
      lastName: new FormControl(''),
      addresses: new FormArray([]),
      subscribed: new FormControl(),
      disabledInput: new FormControl({value: '', disabled: true}),
    });

    this.addCity();
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      city: '',
    });
  }

  addCity(): void {
    this.addresses = this.profileForm.get('addresses') as FormArray;
    this.addresses.push(this.createItem());
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: false,
})
export class AppComponent {}


parseurl@~1.3.2, parseurl@~1.3.3:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==

path-exists@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-5.0.0.tgz#a6aad9489200b21fab31e49cf09277e5116fb9e7"
  integrity sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==

path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==

path-key@^3.1.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==

path-parse@^1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==

path-scurry@^1.11.1:
  version "1.11.1"
  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
  dependencies:
    lru-cache "^10.2.0"
    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"

path-to-regexp@0.1.10:
  version "0.1.10"
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==

path-type@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-5.0.0.tgz#14b01ed7aea7ddf9c7c3f46181d4d04f9c785bb8"
  integrity sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==

picocolors@^1.0.0, picocolors@^1.0.1:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==

picomatch@4.0.2:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==

picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

pify@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==

piscina@4.6.1:
  version "4.6.1"
  resolved "https://registry.yarnpkg.com/piscina/-/piscina-4.6.1.tgz#4de673b0ff84bf641b31b07b3348669383b51c9a"
  integrity sha512-z30AwWGtQE+Apr+2WBZensP2lIvwoaMcOPkQlIEmSGMJNUvaYACylPYrQM6wSdUNJlnDVMSpLv7xTMJqlVshOA==
  optionalDependencies:
    nice-napi "^1.0.2"


"@angular/build@19.0.0-next.5":
  version "19.0.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular/build/-/build-19.0.0-next.5.tgz#93164c08207e1a7f1f3f89383b67378b83acefbd"
  integrity sha512-HtNagdxJ9RqZ+TcMmfdh8/ok5KOWLWYGFRYwyyo3NDyqtny2+NsZFevxFM9rk55oEe0fyqMUtnApHh6wH1rUDA==
  dependencies:
    "@ampproject/remapping" "2.3.0"
    "@angular-devkit/architect" "0.1900.0-next.5"
    "@babel/core" "7.25.2"
    "@babel/helper-annotate-as-pure" "7.24.7"
    "@babel/helper-split-export-declaration" "7.24.7"
    "@babel/plugin-syntax-import-attributes" "7.25.6"
    "@inquirer/confirm" "3.2.0"
    "@vitejs/plugin-basic-ssl" "1.1.0"
    browserslist "^4.23.0"
    critters "0.0.24"
    esbuild "0.23.1"
    fast-glob "3.3.2"
    https-proxy-agent "7.0.5"
    listr2 "8.2.4"
    lmdb "3.1.0"
    magic-string "0.30.11"
    mrmime "2.0.0"
    parse5-html-rewriting-stream "7.0.0"
    picomatch "4.0.2"
    piscina "4.6.1"
    rollup "4.21.3"
    sass "1.78.0"
    semver "7.6.3"
    vite "5.4.4"
    watchpack "2.4.2"

"@angular/build@file:../../node_modules/@angular/build":
  version "19.0.0-next.5"
  dependencies:
    "@ampproject/remapping" "2.3.0"
    "@angular-devkit/architect" "0.1900.0-next.5"
    "@babel/core" "7.25.2"
    "@babel/helper-annotate-as-pure" "7.24.7"
    "@babel/helper-split-export-declaration" "7.24.7"
    "@babel/plugin-syntax-import-attributes" "7.25.6"
    "@inquirer/confirm" "3.2.0"
    "@vitejs/plugin-basic-ssl" "1.1.0"
    browserslist "^4.23.0"
    critters "0.0.24"
    esbuild "0.23.1"
    fast-glob "3.3.2"
    https-proxy-agent "7.0.5"
    listr2 "8.2.4"
    lmdb "3.1.0"
    magic-string "0.30.11"
    mrmime "2.0.0"
    parse5-html-rewriting-stream "7.0.0"
    picomatch "4.0.2"
    piscina "4.6.1"
    rollup "4.21.3"
    sass "1.78.0"
    semver "7.6.3"
    vite "5.4.4"
    watchpack "2.4.2"

"@angular/cli@file:../../node_modules/@angular/cli":
  version "19.0.0-next.5"
  dependencies:
    "@angular-devkit/architect" "0.1900.0-next.5"
    "@angular-devkit/core" "19.0.0-next.5"
    "@angular-devkit/schematics" "19.0.0-next.5"
    "@inquirer/prompts" "5.5.0"
    "@listr2/prompt-adapter-inquirer" "2.0.15"
    "@schematics/angular" "19.0.0-next.5"
    "@yarnpkg/lockfile" "1.1.0"
    ini "5.0.0"
    jsonc-parser "3.3.1"
    listr2 "8.2.4"
    npm-package-arg "11.0.3"
    npm-pick-manifest "9.1.0"
    pacote "18.0.6"
    resolve "1.22.8"
    semver "7.6.3"
    symbol-observable "4.0.0"
    yargs "17.7.2"

"@angular/common@file:../../dist/packages-dist/common":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"

"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
  version "19.0.0-next.1"
  dependencies:
    "@babel/core" "7.25.2"
    "@jridgewell/sourcemap-codec" "^1.4.14"
    chokidar "^3.0.0"
    convert-source-map "^1.5.1"
    reflect-metadata "^0.2.0"
    semver "^7.0.0"
    tslib "^2.3.0"
    yargs "^17.2.1"

"@angular/compiler@file:../../dist/packages-dist/compiler":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"

"@angular/core@file:../../dist/packages-dist/core":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"

"@angular/forms@file:../../dist/packages-dist/forms":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"

"@angular/language-service@file:../../dist/packages-dist/language-service":
  version "19.0.0-next.1"

"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"

"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"

"@angular/router@file:../../dist/packages-dist/router":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"

"@angular/ssr@file:../../node_modules/@angular/ssr":
  version "19.0.0-next.5"
  dependencies:
    tslib "^2.3.0"

"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.24.7":
  version "7.24.7"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
  dependencies:
    "@babel/highlight" "^7.24.7"
    picocolors "^1.0.0"

"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.2", "@babel/compat-data@^7.25.4":
  version "7.25.4"
  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.4.tgz#7d2a80ce229890edcf4cc259d4d696cb4dae2fcb"
  integrity sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==


import {Component} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {}


import {provideHttpClient} from '@angular/common/http';
import {ApplicationConfig} from '@angular/core';
import {provideClientHydration} from '@angular/platform-browser';
import {provideRouter} from '@angular/router';

import {routes} from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideHttpClient()],
};


/**
 * @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.dev/license
 */

import {isPlatformServer} from '@angular/common';
import {HttpClient} from '@angular/common/http';
import {Component, Inject, PLATFORM_ID, TransferState, makeStateKey} from '@angular/core';

const COUNTER_KEY = makeStateKey<number>('counter');

@Component({
  selector: 'transfer-state',
  standalone: true,
  template: ` <div>{{ counter }}</div> `,
  providers: [HttpClient],
})
export class TransferStateComponent {
  counter = 0;

  constructor(
    @Inject(PLATFORM_ID) private platformId: {},
    private transferState: TransferState,
  ) {}

  ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      // Set it to 5 in the server.
      this.counter = 5;
      this.transferState.set(COUNTER_KEY, 50);
    } else {
      // Get the transferred counter state in the client(should be 50 and not 0).
      this.counter = this.transferState.get(COUNTER_KEY, 0);
    }
  }
}


import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HelloWorldComponent} from './helloworld/hello-world.component';
import {TransferStateComponent} from './transferstate/transfer-state.component';

const routes: Routes = [
  {
    path: 'helloworld',
    component: HelloWorldComponent,
  },
  {
    path: 'transferstate',
    component: TransferStateComponent,
  },
  {
    path: 'http-transferstate-lazy',
    loadChildren: () =>
      import('./http-transferstate-lazy/http-transfer-state.module').then(
        (m) => m.HttpTransferStateModule,
      ),
  },
  {
    path: 'http-transferstate-lazy-on-init',
    loadChildren: () =>
      import('./http-transferstate-lazy-on-init/http-transferstate-lazy-on-init.module').then(
        (m) => m.HttpTransferStateOnInitModule,
      ),
  },
  {
    path: 'error',
    component: HelloWorldComponent,
    resolve: {
      'id': () => {
        throw new Error('Error in resolver.');
      },
    },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}


/**
 * @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.dev/license
 */

import {isPlatformServer} from '@angular/common';
import {Component, Inject, PLATFORM_ID, TransferState, makeStateKey} from '@angular/core';

const COUNTER_KEY = makeStateKey<number>('counter');

@Component({
  selector: 'transfer-state',
  template: ` <div>{{ counter }}</div> `,
  standalone: false,
})
export class TransferStateComponent {
  counter = 0;

  constructor(
    @Inject(PLATFORM_ID) private platformId: {},
    private transferState: TransferState,
  ) {}

  ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      // Set it to 5 in the server.
      this.counter = 5;
      this.transferState.set(COUNTER_KEY, 50);
    } else {
      // Get the transferred counter state in the client(should be 50 and not 0).
      this.counter = this.transferState.get(COUNTER_KEY, 0);
    }
  }
}


import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
import {provideRouter} from '@angular/router';

import {AppComponent} from './app/app.component';
import {appRoutes} from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(appRoutes), provideProtractorTestingSupport()],
}).catch(console.error);


import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';

import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideProtractorTestingSupport()],
});


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Animations</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
</body>

</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <app-root></app-root>
  <script src="/node_modules/zone.js/bundles/zone.umd.js"></script>
  <script type="module" src="/dist/main.bundle.js"></script>
</body>
</html>


import {AfterViewInit, Compiler, Component, ViewChild, ViewContainerRef} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `

Hello world!

  `,
  standalone: false,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('vc', {read: ViewContainerRef}) container: ViewContainerRef;

  constructor(private compiler: Compiler) {}

  ngAfterViewInit() {
    import('./lazy.module').then((module) => {
      this.compiler.compileModuleAndAllComponentsAsync(module.LazyModule).then((compiled) => {
        const factory = compiled.componentFactories[0];
        this.container.createComponent(factory);
      });
    });
  }
}


"@ampproject/remapping@2.3.0", "@ampproject/remapping@^2.2.0":
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
  dependencies:
    "@jridgewell/gen-mapping" "^0.3.5"
    "@jridgewell/trace-mapping" "^0.3.24"

"@angular-devkit/architect@0.1900.0-next.5":
  version "0.1900.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.1900.0-next.5.tgz#4bf510e52fd6542c5b80e677bf8643828586b2de"
  integrity sha512-VX9rM05f2pbonjNjwZZv/kY0XVA5I5imwlshPf05wu4MSUsWJLBgugr/MwsYGyLjyT6PPredB6F+QEYvijNIiw==
  dependencies:
    "@angular-devkit/core" "19.0.0-next.5"
    rxjs "7.8.1"

"@angular-devkit/build-angular@file:../../node_modules/@angular-devkit/build-angular":
  version "19.0.0-next.5"
  dependencies:
    "@ampproject/remapping" "2.3.0"
    "@angular-devkit/architect" "0.1900.0-next.5"
    "@angular-devkit/build-webpack" "0.1900.0-next.5"
    "@angular-devkit/core" "19.0.0-next.5"
    "@angular/build" "19.0.0-next.5"
    "@babel/core" "7.25.2"
    "@babel/generator" "7.25.6"
    "@babel/helper-annotate-as-pure" "7.24.7"
    "@babel/helper-split-export-declaration" "7.24.7"
    "@babel/plugin-transform-async-generator-functions" "7.25.4"
    "@babel/plugin-transform-async-to-generator" "7.24.7"
    "@babel/plugin-transform-runtime" "7.25.4"
    "@babel/preset-env" "7.25.4"
    "@babel/runtime" "7.25.6"
    "@discoveryjs/json-ext" "0.6.1"
    "@ngtools/webpack" "19.0.0-next.5"
    "@vitejs/plugin-basic-ssl" "1.1.0"
    ansi-colors "4.1.3"
    autoprefixer "10.4.20"
    babel-loader "9.1.3"
    browserslist "^4.21.5"
    copy-webpack-plugin "12.0.2"
    critters "0.0.24"
    css-loader "7.1.2"
    esbuild-wasm "0.23.1"
    fast-glob "3.3.2"
    http-proxy-middleware "3.0.2"
    https-proxy-agent "7.0.5"
    istanbul-lib-instrument "6.0.3"
    jsonc-parser "3.3.1"
    karma-source-map-support "1.4.0"
    less "4.2.0"
    less-loader "12.2.0"
    license-webpack-plugin "4.0.2"
    loader-utils "3.3.1"
    magic-string "0.30.11"
    mini-css-extract-plugin "2.9.1"
    mrmime "2.0.0"
    open "10.1.0"
    ora "5.4.1"
    parse5-html-rewriting-stream "7.0.0"
    picomatch "4.0.2"
    piscina "4.6.1"
    postcss "8.4.45"
    postcss-loader "8.1.1"
    resolve-url-loader "5.0.0"
    rxjs "7.8.1"
    sass "1.78.0"
    sass-loader "16.0.1"
    semver "7.6.3"
    source-map-loader "5.0.0"
    source-map-support "0.5.21"
    terser "5.32.0"
    tree-kill "1.2.2"
    tslib "2.7.0"
    vite "5.4.4"
    watchpack "2.4.2"
    webpack "5.94.0"
    webpack-dev-middleware "7.4.2"
    webpack-dev-server "5.1.0"
    webpack-merge "6.0.1"
    webpack-subresource-integrity "5.1.0"
  optionalDependencies:
    esbuild "0.23.1"

"@angular-devkit/build-webpack@0.1900.0-next.5":
  version "0.1900.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.1900.0-next.5.tgz#b1a974dc4f54e7f45d915081508e60be746df5c1"
  integrity sha512-DMf3rr0Lh/bwhCcRyLvKl9UEnOFd8tkgu9X6sMgFSLRYDIThlUm+jntjQPIGcdN21wQTFgl+O1y/Ck6WYe7Jyw==
  dependencies:
    "@angular-devkit/architect" "0.1900.0-next.5"
    rxjs "7.8.1"

"@angular-devkit/core@19.0.0-next.5":
  version "19.0.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-19.0.0-next.5.tgz#710ae0e618cb04fa2e4c38e83d4ad1542968e3cb"
  integrity sha512-WEVlMZPvE7AQPKwfEdH4nuREkIAVwhVhkAD6EAZDYI0U2thLoDcPmNVgFgrrUxdxYE/+VTfXTCBSk6Eu2UkZKQ==
  dependencies:
    ajv "8.17.1"
    ajv-formats "3.0.1"
    jsonc-parser "3.3.1"
    picomatch "4.0.2"
    rxjs "7.8.1"
    source-map "0.7.4"

"@angular-devkit/schematics@19.0.0-next.5":
  version "19.0.0-next.5"
  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-19.0.0-next.5.tgz#ade97e2d7218d3365a01c6cfa3c56d9d116b39d8"
  integrity sha512-WCJ6uW4JqnSx0nKoPc4himv0srjvOeKHsKEVjVBNW9vuEv70zXpWa7/ggpTdOUt955umqy0NdObTFWmOBBV6jw==
  dependencies:
    "@angular-devkit/core" "19.0.0-next.5"
    jsonc-parser "3.3.1"
    magic-string "0.30.11"
    ora "5.4.1"
    rxjs "7.8.1"

"@angular/animations@file:../../dist/packages-dist/animations":
  version "19.0.0-next.1"
  dependencies:
    tslib "^2.3.0"


import {bootstrapApplication} from '@angular/platform-browser';
import {provideAnimations} from '@angular/platform-browser/animations';
import {provideRouter} from '@angular/router';

import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    provideRouter([
      {
        path: '',
        loadComponent: () => import('./app/open-close.component').then((m) => m.OpenCloseComponent),
      },
    ]),
  ],
}).catch((err) => console.error(err));


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>


/*!
 * @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.dev/license
 */

import {isPlatformBrowser} from '@angular/common';
import {InjectionToken, PLATFORM_ID, inject} from '@angular/core';

export const LOCAL_STORAGE = new InjectionToken<Storage | null>('LOCAL_STORAGE', {
  providedIn: 'root',
  factory: () => getStorage(inject(PLATFORM_ID)),
});

const getStorage = (platformId: Object): Storage | null => {
  // Prerendering: localStorage is undefined for prerender build
  return isPlatformBrowser(platformId) ? new LocalStorage() : null;
};

/**
 * LocalStorage is wrapper class for localStorage, operations can fail due to various reasons,
 * such as browser restrictions or storage limits being exceeded. A wrapper is providing error handling.
 */
class LocalStorage implements Storage {
  get length(): number {
    try {
      return localStorage.length;
    } catch {
      return 0;
    }
  }

  clear(): void {
    try {
      localStorage.clear();
    } catch {}
  }

  getItem(key: string): string | null {
    try {
      return localStorage.getItem(key);
    } catch {
      return null;
    }
  }

  key(index: number): string | null {
    try {
      return localStorage.key(index);
    } catch {
      return null;
    }
  }

  removeItem(key: string): void {
    try {
      localStorage.removeItem(key);
    } catch {}
  }

  setItem(key: string, value: string): void {
    try {
      localStorage.setItem(key, value);
    } catch {}
  }
}


// TODO: Continue organizing and refactoring this file
@use '@angular/material' as mat;

// Using disable-next-line to avoid stylelint errors - these imports are necessary
// TODO: Is there another way to prevent these linting errors?
// stylelint-disable-next-line @angular/no-unused-import
@use '_colors';
// stylelint-disable-next-line @angular/no-unused-import
@use '_z-index';

// Global
@use 'resets';
@use 'typography';
@use 'scroll-track';
@use 'button';
@use 'kbd';
@use 'api-item-label';
@use 'faceted-list';
@use 'media-queries' as mq;

// Docs
@use 'docs/alert';
@use 'docs/callout';
@use 'docs/card';
@use 'docs/code';
@use 'docs/decorative-header';
@use 'docs/icon';
@use 'docs/pill';
@use 'docs/steps';
@use 'docs/table';
@use 'docs/video';
@use 'docs/mermaid';

// Global
@include resets.resets();
@include typography.typography();
@include scroll-track.scroll-track();
@include button.button();
@include kbd.kbd();
@include api-item-label.api-item-label();
@include faceted-list.faceted-list();

@include mq.for-phone-only();
@include mq.for-tablet-portrait-up();
@include mq.for-tablet-landscape-up();
@include mq.for-desktop-up();
@include mq.for-big-desktop-up();
@include mq.for-tablet-landscape-down();

// temporary just to show different options of code component UI.
$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
$theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $primary,
      accent: $accent,
    ),
    typography: mat.m2-define-typography-config(),
  )
);

// Include material core styles.
@include mat.core();
@include mat.tabs-theme($theme);
@include mat.button-toggle-theme($theme);
@include mat.tooltip-theme($theme);

// Include custom docs styles
@include alert.docs-alert();
@include callout.docs-callout();
@include card.docs-card();
@include code.docs-code-block();
@include code.docs-code-editor();
@include decorative-header.docs-decorative-header();
@include icon.docs-icon();
@include pill.docs-pill();
@include steps.docs-steps();
@include code.docs-syntax-highlighting();
@include table.docs-table();
@include video.docs-video();

// Include custom angular.dev styles

// Disable view transitions when reduced motion is requested.
@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

.docs-dark-mode .shiki {
  color: var(--shiki-dark);
  background-color: var(--shiki-dark-bg);

  span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style);
    font-weight: var(--shiki-dark-font-weight);
  }

  .shiki-ln-line-highlighted,
  button:hover {
    span {
      background-color: inherit;
    }
  }
}

.shiki {
  padding-block: 1rem;

  &.cli {
    padding-inline-start: 1rem;
  }

  a {
    color: inherit;
    &:hover {
      text-decoration: underline;
    }
  }
}

.docs-light-mode .shiki {
  color: var(--shiki-light);
  background-color: var(--shiki-light-bg);

  span {
    color: var(--shiki-light);
    background-color: var(--shiki-light-bg);
    /* Optional, if you also want font styles */
    font-style: var(--shiki-light-font-style);
    font-weight: var(--shiki-light-font-weight);
    text-decoration: var(--shiki-light-text-decoration);
  }

  .shiki-ln-line-highlighted,
  button:hover {
    span {
      background-color: inherit;
    }
  }
}