angular

이것은 control-flow 블록의 루트 노드인 SVG 또는 MathML 요소에 영향을 주는 Angular 컴파일러 버그입니다. Angular는 :svg:svg와 같은 네임스페이스가 지정된 태그를 생성하므로, select="svg"와 같은 ng-content 태그 셀렉터와 일치하지 않아 해당 요소가 기본 슬롯으로 프로젝션됩니다.

해결 방법: 루트 SVG 또는 MathML 요소에 ngProjectAs를 추가하세요:

@if (saving()) {
  <svg class="spinner" ngProjectAs="svg">...</svg>
} @else {
  <svg ngProjectAs="svg">...</svg>
}

MathML의 경우 다음을 사용하세요:

<math ngProjectAs="math">...</math>

동일한 해결 방법이 @for, @switch, *ngIf 루트 노드에도 적용됩니다. 속성 및 클래스 셀렉터는 영향을 받지 않습니다. 영구적인 수정은 Angular 컴파일러 PR에서 제공됩니다. 수정이 포함된 릴리스가 제공되면 Angular를 업그레이드하세요.

원인: Angular 22의 JIT 경로(ɵɵngDeclareComponent → convertDeclareComponentFacadeToMetadata)는 선언된 라이브러리 버전을 무시하고 changeDetection의 기본값을 OnPush로 설정하는 반면, AOT 링커는 Angular < 22로 컴파일된 컴포넌트를 Default/Eager로 올바르게 유지합니다. v22 이전에 partial 모드로 컴파일된 라이브러리(예: Angular 20.3으로 컴파일된 Kendo UI for Angular)는 markForCheck() 없이 subscription 내부에서 상태를 할당할 수 있으므로, JIT 기반 도구(Storybook, jest-preset-angular, Vitest, TestBed, ng serve --aot=false)에서는 뷰가 전혀 갱신되지 않는 반면 AOT 빌드는 정상적으로 동작합니다. 해결 방법: 라이브러리 선언이 평가되기 전에 JIT 컴파일러 퍼사드를 패치하세요(예: Storybook preview 설정이나 테스트 설정 파일에서):

import '@angular/compiler';
import { ChangeDetectionStrategy } from '@angular/core';

const facade = (globalThis as any).ng?.ɵcompilerFacade;
const original = facade.compileComponentDeclaration.bind(facade);
facade.compileComponentDeclaration = (env: unknown, url: string, decl: any) => {
  const major = Number.parseInt(String(decl.version ?? '0').split('.')[0], 10);
  const patched =
    decl.changeDetection == null && major > 0 && major < 22
      ? { ...decl, changeDetection: ChangeDetectionStrategy.Eager }
      : decl;
  return original(env, url, patched);
};

또는 라이브러리의 컴포넌트에 changeDetection: ChangeDetectionStrategy.Default를 명시적으로 설정하고 Angular 22로 다시 게시하세요. 수정 진행 상황은 angular/angular#71107에서 추적할 수 있습니다.

이것은 provideClientHydration(withI18nSupport())에 영향을 주는 알려진 Angular 버그(issue #71425)입니다. ICU 표현식(예: {count, plural, ...})이 포함된 동일한 컴포넌트가 페이지에 여러 번 나타나면, 서버가 하이드레이션 데이터를 중복 제거하여 두 인스턴스가 같은 ngh 객체를 공유하게 됩니다. 이후 클라이언트가 shift()로 공유된 ICU 케이스 큐를 변경하기 때문에 첫 번째 인스턴스만 올바르게 하이드레이션되고, 이후 인스턴스는 ICU 콘텐츠를 두 번 렌더링하거나(프로덕션) ASSERTION ERROR: expected matching nodeType [Expected=> 8 == 3 <=Actual] 오류를 발생시킵니다(개발 모드).

**해결 방법:** ICU 표현식을 제어 흐름과 별도의 i18n 메시지로 대체하세요:

@if (count === 1) {
  <ng-container i18n>1 item</ng-container>
} @else {
  <ng-container i18n>{{ count }} items</ng-container>
}

이렇게 하면 공유 ICU 케이스 큐를 완전히 피할 수 있습니다. 이 버그는 Angular 18.2부터 최소 21.2/22.x까지 존재하므로 업그레이드로는 해결되지 않습니다. 수정이 적용될 때까지 이 해결 방법을 사용하세요(제안된 수정은 공유된 직렬화 데이터를 변경하는 대신 [...caseQueue]로 케이스 큐를 복사하는 방식입니다).

NG0904는 일반 문자열이 <iframe [src]>와 같은 리소스 URL 속성에 바인딩될 때 발생합니다. 리소스 URL의 경우 sanitize(SecurityContext.URL, url)을 호출하는 것으로는 충분하지 않으며, Angular는 명시적으로 신뢰된 SafeResourceUrl을 요구합니다.

bypassSecurityTrustResourceUrl을 사용하여 수정하세요:

import { Component, inject } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<iframe [src]="trustedUrl"></iframe>`,
})
export class App {
  readonly url = 'data:image/svg+xml;base64,...';
  private readonly sanitizer = inject(DomSanitizer);
  readonly trustedUrl: SafeResourceUrl =
    this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}

이 방법은 신뢰할 수 있는 URL, 특히 data: URL이나 사용자가 제공한 URL에만 사용하세요. 신뢰할 수 없는 입력의 경우, 허용 목록(allowlist)에 대해 검증하거나 리소스 URL에 바인딩하지 마세요.

이것은 알려진 Angular DevTools 라우트 하이라이팅 버그입니다: /posts/1과 같은 중첩된 URL을 볼 때, 루트 라우트 /가 활성 라우트가 아님에도 불구하고 활성 상태로 잘못 표시됩니다. 이 버그는 angular/angular#65037에서 수정되었습니다.

해결 방법:
1. Angular DevTools 브라우저 확장 프로그램을 업데이트하세요.
- Chrome/Edge: chrome://extensions를 열고 Developer mode를 활성화한 후 **Update**를 클릭한 다음 DevTools를 다시 여세요.
- Firefox: about:addons에서 Angular DevTools를 업데이트하세요.
2. DevTools를 로컬에서 실행하는 경우, 최신 코드를 가져와 다시 빌드하세요:

git pull origin main
   npm install
   npm start

또는 PR #65037을 cherry-pick하거나 머지하세요.

애플리케이션 라우팅 변경은 필요하지 않습니다. 업데이트하기 전까지 /에 표시되는 활성 배지는 화면 표시상의 버그로 간주하고, Router.url 또는 라우터 이벤트로 현재 라우트를 확인하세요.