Merge pull request #153 from angular/main

Create a new pull request by comparing changes across two branches

CHANGELOG.md

@@ -1,3 +1,69 @@
+<a name="17.1.0-next.1"></a>
+# 17.1.0-next.1 (2023-11-20)
+### common
+| Commit | Type | Description |
+| -- | -- | -- |
+| [29c5416d14](https://github.com/angular/angular/commit/29c5416d14638a05a894269aa5dbe67e98754418) | fix | remove `load` on image once it fails to load ([#52990](https://github.com/angular/angular/pull/52990)) |
+| [7affa57754](https://github.com/angular/angular/commit/7affa5775427e92ef6e949c879765b7c8aa172da) | fix | scan images once page is loaded ([#52991](https://github.com/angular/angular/pull/52991)) |
+### compiler
+| Commit | Type | Description |
+| -- | -- | -- |
+| [ec2d6e7b9c](https://github.com/angular/angular/commit/ec2d6e7b9c2b386247d1320ee89f8e3ac5e5a0dd) | fix | changed after checked error in for loops ([#52935](https://github.com/angular/angular/pull/52935)) |
+| [406049b95e](https://github.com/angular/angular/commit/406049b95e5234f17a7a18839ac848640f53fdde) | fix | generate i18n instructions for blocks ([#52958](https://github.com/angular/angular/pull/52958)) |
+| [d9d566d315](https://github.com/angular/angular/commit/d9d566d31540582d73201675d0b8ed901261669e) | fix | nested for loops incorrectly calculating computed variables ([#52931](https://github.com/angular/angular/pull/52931)) |
+| [5fb707f81a](https://github.com/angular/angular/commit/5fb707f81aee43751e61d2ed0861afc9b85bc85a) | fix | produce placeholder for blocks in i18n bundles ([#52958](https://github.com/angular/angular/pull/52958)) |
+### compiler-cli
+| Commit | Type | Description |
+| -- | -- | -- |
+| [b4d022e230](https://github.com/angular/angular/commit/b4d022e230ca141b12437949d11dc384bfe5c082) | fix | add diagnostic for control flow that prevents content projection ([#52726](https://github.com/angular/angular/pull/52726)) |
+### core
+| Commit | Type | Description |
+| -- | -- | -- |
+| [ed0fbd4071](https://github.com/angular/angular/commit/ed0fbd4071339b1af22d82bac07d51c6c41790cd) | fix | cleanup loading promise when no dependencies are defined ([#53031](https://github.com/angular/angular/pull/53031)) |
+| [1ce31d819b](https://github.com/angular/angular/commit/1ce31d819b2e4f4425a41f07167a6edce98e77e1) | fix | handle local refs when `getDeferBlocks` is invoked in tests ([#52973](https://github.com/angular/angular/pull/52973)) |
+### migrations
+| Commit | Type | Description |
+| -- | -- | -- |
+| [e33f6e0f1a](https://github.com/angular/angular/commit/e33f6e0f1a483cad908fa6d7376d62332797499c) | 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)) |
+| [5564d020cd](https://github.com/angular/angular/commit/5564d020cdcea8273b65cf69c45c3f935195af66) | fix | Fixes control flow migration if then else case ([#53006](https://github.com/angular/angular/pull/53006)) |
+| [28f6cbf9c9](https://github.com/angular/angular/commit/28f6cbf9c91f957b4926fe34610387e1f1919d4f) | fix | fixes migrations of nested switches in control flow ([#53010](https://github.com/angular/angular/pull/53010)) |
+| [e090b48bf8](https://github.com/angular/angular/commit/e090b48bf8534761d46523be57a7889a325bcdec) | fix | tweaks to formatting in control flow migration ([#53058](https://github.com/angular/angular/pull/53058)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
+<a name="17.0.4"></a>
+# 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)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="17.1.0-next.0"></a>
 # 17.1.0-next.0 (2023-11-15)
 ### compiler-cli

adev/src/content/guide/components/lifecycle.md

@@ -257,12 +257,12 @@ export class UserProfile {
     // Use the `Write` phase to write to a geometric property.
     afterNextRender(() => {
       nativeElement.style.padding = computePadding();
-    }, AfterRenderPhase.Write);
+    }, {phase: AfterRenderPhase.Write});
 
     // Use the `Read` phase to read geometric properties after all writes have occured.
     afterNextRender(() => {
       this.elementHeight = nativeElement.getBoundingClientRect().height;
-    }, AfterRenderPhase.Read);
+    }, {phase: AfterRenderPhase.Read});
   }
 }
 ```

adev/src/content/guide/defer.md

@@ -262,7 +262,7 @@ it('should render a defer block in different states', async () => {
   const componentFixture = TestBed.createComponent(ComponentA);
 
   // Retrieve the list of all defer block fixtures and get the first block.
-  const deferBlockFixture = async (componentFixture.getDeferBlocks())[0];
+  const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
 
   // Renders placeholder state by default.
   expect(componentFixture.nativeElement.innerHTML).toContain('Placeholder');
@@ -272,7 +272,7 @@ it('should render a defer block in different states', async () => {
   expect(componentFixture.nativeElement.innerHTML).toContain('Loading');
 
   // Render final state and verify the output.
-  await deferBlockFixture.render(DeferBlockState.Completed);
+  await deferBlockFixture.render(DeferBlockState.Complete);
   expect(componentFixture.nativeElement.innerHTML).toContain('large works!');
 });
 ```

aio/content/guide/defer.md

@@ -262,7 +262,7 @@ it('should render a defer block in different states', async () => {
   const componentFixture = TestBed.createComponent(ComponentA);
 
   // Retrieve the list of all defer block fixtures and get the first block.
-  const deferBlockFixture = async (componentFixture.getDeferBlocks())[0];
+  const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
 
   // Renders placeholder state by default.
   expect(componentFixture.nativeElement.innerHTML).toContain('Placeholder');
@@ -272,7 +272,7 @@ it('should render a defer block in different states', async () => {
   expect(componentFixture.nativeElement.innerHTML).toContain('Loading');
 
   // Render final state and verify the output.
-  await deferBlockFixture.render(DeferBlockState.Completed);
+  await deferBlockFixture.render(DeferBlockState.Complete);
   expect(componentFixture.nativeElement.innerHTML).toContain('large works!');
 });
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-srcs",
-  "version": "17.1.0-next.0",
+  "version": "17.1.0-next.1",
   "private": true,
   "description": "Angular - a web framework for modern web apps",
   "homepage": "https://github.com/angular/angular",

packages/common/http/src/interceptor.ts

@@ -7,7 +7,7 @@
  */
 
 import {isPlatformServer} from '@angular/common';
-import {EnvironmentInjector, inject, Injectable, InjectionToken, PLATFORM_ID, ɵConsole as Console, ɵformatRuntimeError as formatRuntimeError, ɵInitialRenderPendingTasks as InitialRenderPendingTasks} from '@angular/core';
+import {EnvironmentInjector, inject, Injectable, InjectionToken, PLATFORM_ID, runInInjectionContext, ɵConsole as Console, ɵformatRuntimeError as formatRuntimeError, ɵInitialRenderPendingTasks as InitialRenderPendingTasks} from '@angular/core';
 import {Observable} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 
@@ -162,7 +162,7 @@ function chainedInterceptorFn(
     chainTailFn: ChainedInterceptorFn<unknown>, interceptorFn: HttpInterceptorFn,
     injector: EnvironmentInjector): ChainedInterceptorFn<unknown> {
   // clang-format off
-  return (initialRequest, finalHandlerFn) => injector.runInContext(() =>
+  return (initialRequest, finalHandlerFn) => runInInjectionContext(injector, () =>
     interceptorFn(
       initialRequest,
       downstreamRequest => chainTailFn(downstreamRequest, finalHandlerFn)

packages/common/http/src/jsonp.ts

@@ -7,7 +7,7 @@
  */
 
 import {DOCUMENT} from '@angular/common';
-import {EnvironmentInjector, Inject, inject, Injectable} from '@angular/core';
+import {EnvironmentInjector, Inject, inject, Injectable, runInInjectionContext} from '@angular/core';
 import {Observable, Observer} from 'rxjs';
 
 import {HttpBackend, HttpHandler} from './backend';
@@ -278,7 +278,8 @@ export class JsonpInterceptor {
    * @returns An observable of the event stream.
    */
   intercept(initialRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    return this.injector.runInContext(
+    return runInInjectionContext(
+        this.injector,
         () => jsonpInterceptorFn(
             initialRequest, downstreamRequest => next.handle(downstreamRequest)));
   }

packages/common/http/src/xsrf.ts

@@ -7,7 +7,7 @@
  */
 
 import {DOCUMENT, ɵparseCookieValue as parseCookieValue} from '@angular/common';
-import {EnvironmentInjector, Inject, inject, Injectable, InjectionToken, PLATFORM_ID} from '@angular/core';
+import {EnvironmentInjector, Inject, inject, Injectable, InjectionToken, PLATFORM_ID, runInInjectionContext} from '@angular/core';
 import {Observable} from 'rxjs';
 
 import {HttpHandler} from './backend';
@@ -104,7 +104,8 @@ export class HttpXsrfInterceptor implements HttpInterceptor {
   constructor(private injector: EnvironmentInjector) {}
 
   intercept(initialRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    return this.injector.runInContext(
+    return runInInjectionContext(
+        this.injector,
         () =>
             xsrfInterceptorFn(initialRequest, downstreamRequest => next.handle(downstreamRequest)));
   }

packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts

@@ -746,8 +746,9 @@ function assertGreaterThanZero(dir: NgOptimizedImage, inputValue: unknown, input
  */
 function assertNoImageDistortion(
     dir: NgOptimizedImage, img: HTMLImageElement, renderer: Renderer2) {
-  const removeListenerFn = renderer.listen(img, 'load', () => {
-    removeListenerFn();
+  const removeLoadListenerFn = renderer.listen(img, 'load', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
     const computedStyle = window.getComputedStyle(img);
     let renderedWidth = parseFloat(computedStyle.getPropertyValue('width'));
     let renderedHeight = parseFloat(computedStyle.getPropertyValue('height'));
@@ -828,6 +829,15 @@ function assertNoImageDistortion(
       }
     }
   });
+
+  // We only listen to the `error` event to remove the `load` event listener because it will not be
+  // fired if the image fails to load. This is done to prevent memory leaks in development mode
+  // because image elements aren't garbage-collected properly. It happens because zone.js stores the
+  // event listener directly on the element and closures capture `dir`.
+  const removeErrorListenerFn = renderer.listen(img, 'error', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+  });
 }
 
 /**
@@ -870,8 +880,9 @@ function assertEmptyWidthAndHeight(dir: NgOptimizedImage) {
  */
 function assertNonZeroRenderedHeight(
     dir: NgOptimizedImage, img: HTMLImageElement, renderer: Renderer2) {
-  const removeListenerFn = renderer.listen(img, 'load', () => {
-    removeListenerFn();
+  const removeLoadListenerFn = renderer.listen(img, 'load', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
     const renderedHeight = img.clientHeight;
     if (dir.fill && renderedHeight === 0) {
       console.warn(formatRuntimeError(
@@ -883,6 +894,12 @@ function assertNonZeroRenderedHeight(
               `property defined and the height of the element is not zero.`));
     }
   });
+
+  // See comments in the `assertNoImageDistortion`.
+  const removeErrorListenerFn = renderer.listen(img, 'error', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+  });
 }
 
 /**

packages/compiler-cli/src/ngtsc/metadata/src/inheritance.ts

@@ -9,7 +9,7 @@
 import {Reference} from '../../imports';
 import {ClassDeclaration} from '../../reflection';
 
-import {DirectiveMeta, InputMapping, MetadataReader} from './api';
+import {DirectiveMeta, HostDirectiveMeta, InputMapping, MetadataReader} from './api';
 import {ClassPropertyMapping, ClassPropertyName} from './property_mapping';
 
 /**
@@ -34,6 +34,7 @@ export function flattenInheritedDirectiveMetadata(
   const undeclaredInputFields = new Set<ClassPropertyName>();
   const restrictedInputFields = new Set<ClassPropertyName>();
   const stringLiteralInputFields = new Set<ClassPropertyName>();
+  let hostDirectives: HostDirectiveMeta[]|null = null;
   let isDynamic = false;
   let inputs = ClassPropertyMapping.empty<InputMapping>();
   let outputs = ClassPropertyMapping.empty();
@@ -69,6 +70,10 @@ export function flattenInheritedDirectiveMetadata(
     for (const field of meta.stringLiteralInputFields) {
       stringLiteralInputFields.add(field);
     }
+    if (meta.hostDirectives !== null && meta.hostDirectives.length > 0) {
+      hostDirectives ??= [];
+      hostDirectives.push(...meta.hostDirectives);
+    }
   };
 
   addMetadata(topMeta);
@@ -83,5 +88,6 @@ export function flattenInheritedDirectiveMetadata(
     stringLiteralInputFields,
     baseClass: isDynamic ? 'dynamic' : null,
     isStructural,
+    hostDirectives,
   };
 }