feat: update origin 21.0.0

.github/workflows/adev-preview-build.yml

@@ -32,7 +32,7 @@ jobs:
       - uses: bazel-contrib/setup-bazel@4fd964a13a440a8aeb0be47350db2fc640f19ca8 # 0.15.0
         with:
           bazelisk-cache: true
-          disk-cache: true
+          disk-cache: ${{ github.workflow }}
           repository-cache: true
           bazelrc: |
             # Print all the options that apply to the build.

.github/workflows/adev-production-deploy.yml

@@ -24,7 +24,7 @@ jobs:
       - uses: bazel-contrib/setup-bazel@4fd964a13a440a8aeb0be47350db2fc640f19ca8 # 0.15.0
         with:
           bazelisk-cache: true
-          disk-cache: true
+          disk-cache: ${{ github.workflow }}
           repository-cache: true
           bazelrc: |
             # Print all the options that apply to the build.

.github/workflows/ci.yml

@@ -36,7 +36,7 @@ jobs:
       - uses: bazel-contrib/setup-bazel@4fd964a13a440a8aeb0be47350db2fc640f19ca8 # 0.15.0
         with:
           bazelisk-cache: true
-          disk-cache: true
+          disk-cache: ${{ github.workflow }}
           repository-cache: true
       - run: pnpm install
       - run: pnpm run build

adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html

@@ -1,22 +1,28 @@
 @if (!hasAccepted()) {
-<div class="docs-cookies-popup docs-invert-mode">
-  <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>
+  <div class="docs-cookies-popup docs-invert-mode">
+    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>
 
-  <div>
-    <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">
-      <button type="button" class="docs-primary-btn" [attr.text]="'Learn more'" aria-label="Learn More">
+    <div>
+      <a
+        href="https://policies.google.com/technologies/cookies"
+        target="_blank"
+        rel="noopener"
+        class="docs-primary-btn"
+        aria-label="Learn more about how Google uses cookies"
+        text="Learn more"
+      >
         Learn more
+      </a>
+
+      <button
+        type="button"
+        (click)="accept()"
+        class="docs-primary-btn"
+        text="Ok, Got it"
+        aria-label="Ok, Got it"
+      >
+        Ok, Got it
       </button>
-    </a>
-    <button
-      type="button"
-      (click)="accept()"
-      class="docs-primary-btn"
-      [attr.text]="'Ok, Got it'"
-      aria-label="Ok, Got it"
-    >
-      Ok, Got it
-    </button>
+    </div>
   </div>
-</div>
 }

adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html

@@ -1,22 +1,28 @@
 @if (!hasAccepted()) {
-<div class="docs-cookies-popup docs-invert-mode">
-  <p>このサイトでは、サービスの提供とトラフィックの分析のためにGoogleのクッキーを使用しています。</p>
+  <div class="docs-cookies-popup docs-invert-mode">
+    <p>このサイトでは、サービスの提供とトラフィックの分析のためにGoogleのクッキーを使用しています。</p>
 
-  <div>
-    <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">
-      <button type="button" class="docs-primary-btn" [attr.text]="'詳細を見る'" aria-label="詳細を見る">
+    <div>
+      <a
+        href="https://policies.google.com/technologies/cookies"
+        target="_blank"
+        rel="noopener"
+        class="docs-primary-btn"
+        aria-label="Googleのクッキー使用方法の詳細を見る"
+        text="詳細を見る"
+      >
         詳細を見る
+      </a>
+
+      <button
+        type="button"
+        (click)="accept()"
+        class="docs-primary-btn"
+        text="了解しました"
+        aria-label="了解しました"
+      >
+        了解しました
       </button>
-    </a>
-    <button
-      type="button"
-      (click)="accept()"
-      class="docs-primary-btn"
-      [attr.text]="'了解しました'"
-      aria-label="了解しました"
-    >
-      了解しました
-    </button>
+    </div>
   </div>
-</div>
 }

adev-ja/src/app/core/services/a-dev-title-strategy.en.ts

@@ -0,0 +1,60 @@
+/*!
+ * @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 {Injectable, inject} from '@angular/core';
+import {NavigationItem} from '@angular/docs';
+import {Meta, Title} from '@angular/platform-browser';
+import {ActivatedRouteSnapshot, RouterStateSnapshot, TitleStrategy} from '@angular/router';
+
+export const ROUTE_TITLE_PROPERTY = 'label';
+export const ROUTE_PARENT_PROPERTY = 'parent';
+export const TITLE_SUFFIX = 'Angular';
+export const TITLE_SEPARATOR = ' • ';
+export const DEFAULT_PAGE_TITLE = 'Overview';
+
+export const TITLE_OG_META_TAG = 'og:title';
+export const TITLE_TWITTER_META_TAG = 'twitter:title';
+
+export const ALL_TITLE_META_TAGS = [TITLE_OG_META_TAG, TITLE_TWITTER_META_TAG];
+
+@Injectable({providedIn: 'root'})
+export class ADevTitleStrategy extends TitleStrategy {
+  private readonly title = inject(Title);
+  private readonly meta = inject(Meta);
+
+  constructor() {
+    super();
+  }
+
+  override updateTitle(routerState: RouterStateSnapshot) {
+    const title = this.buildTitle(routerState);
+
+    if (title !== undefined) {
+      this.title.setTitle(title);
+      ALL_TITLE_META_TAGS.forEach((tag) => this.meta.updateTag({property: tag, content: title}));
+    }
+  }
+
+  override buildTitle(snapshot: RouterStateSnapshot): string {
+    let route: ActivatedRouteSnapshot = snapshot.root;
+
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+
+    const data = route.data as NavigationItem;
+    const routeTitle = data.label ?? '';
+
+    const prefix =
+      routeTitle.startsWith(DEFAULT_PAGE_TITLE) && data.parent
+        ? `${data.parent.label}${TITLE_SEPARATOR}`
+        : '';
+
+    return !!routeTitle ? `${prefix}${routeTitle}${TITLE_SEPARATOR}${TITLE_SUFFIX}` : TITLE_SUFFIX;
+  }
+}

adev-ja/src/app/core/services/a-dev-title-strategy.ts

@@ -0,0 +1,60 @@
+/*!
+ * @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 {Injectable, inject} from '@angular/core';
+import {NavigationItem} from '@angular/docs';
+import {Meta, Title} from '@angular/platform-browser';
+import {ActivatedRouteSnapshot, RouterStateSnapshot, TitleStrategy} from '@angular/router';
+
+export const ROUTE_TITLE_PROPERTY = 'label';
+export const ROUTE_PARENT_PROPERTY = 'parent';
+export const TITLE_SUFFIX = 'Angular 日本語版';
+export const TITLE_SEPARATOR = ' • ';
+export const DEFAULT_PAGE_TITLE = 'Overview';
+
+export const TITLE_OG_META_TAG = 'og:title';
+export const TITLE_TWITTER_META_TAG = 'twitter:title';
+
+export const ALL_TITLE_META_TAGS = [TITLE_OG_META_TAG, TITLE_TWITTER_META_TAG];
+
+@Injectable({providedIn: 'root'})
+export class ADevTitleStrategy extends TitleStrategy {
+  private readonly title = inject(Title);
+  private readonly meta = inject(Meta);
+
+  constructor() {
+    super();
+  }
+
+  override updateTitle(routerState: RouterStateSnapshot) {
+    const title = this.buildTitle(routerState);
+
+    if (title !== undefined) {
+      this.title.setTitle(title);
+      ALL_TITLE_META_TAGS.forEach((tag) => this.meta.updateTag({property: tag, content: title}));
+    }
+  }
+
+  override buildTitle(snapshot: RouterStateSnapshot): string {
+    let route: ActivatedRouteSnapshot = snapshot.root;
+
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+
+    const data = route.data as NavigationItem;
+    const routeTitle = data.label ?? '';
+
+    const prefix =
+      routeTitle.startsWith(DEFAULT_PAGE_TITLE) && data.parent
+        ? `${data.parent.label}${TITLE_SEPARATOR}`
+        : '';
+
+    return !!routeTitle ? `${prefix}${routeTitle}${TITLE_SEPARATOR}${TITLE_SUFFIX}` : TITLE_SUFFIX;
+  }
+}

adev-ja/src/app/features/home/home.component.en.html

@@ -1,9 +1,13 @@
-<div class="adev-home" #home>
+<main class="adev-home" #home>
   <div class="banners-layer layer">
     <div class="adev-banner-container">
-      <a href="https://goo.gle/angular-ai-update" class="adev-banner" target="_blank">
-        <h1 tabindex="-1">Available Now:</h1>
-        <p class="adev-banner-cta">Angular AI Developer Event Replay</p>
+      <a
+        href="events/v21"
+        class="adev-banner"
+        target="_blank"
+      >
+        <h1 tabindex="-1">Angular v21 is here!</h1>
+        <p class="adev-banner-cta">🕹️ Start your adventure</p>
       </a>
     </div>
   </div>
@@ -486,4 +490,4 @@ <h3>Are you an LLM or curious about AI in Angular?</h3>
       </div>
     </div>
   </section>
-</div>
+</main>

adev-ja/src/app/features/home/home.component.html

@@ -1,9 +1,13 @@
-<div class="adev-home" #home>
+<main class="adev-home" #home>
   <div class="banners-layer layer">
     <div class="adev-banner-container">
-      <a href="https://goo.gle/angular-ai-update" class="adev-banner" target="_blank">
-        <h1 tabindex="-1">最新情報:</h1>
-        <p class="adev-banner-cta">Angular AI Developer Event Replay</p>
+      <a
+        href="events/v21"
+        class="adev-banner"
+        target="_blank"
+      >
+        <h1 tabindex="-1">Angular v21がリリースされました！</h1>
+        <p class="adev-banner-cta">🕹️ 冒険を始めよう</p>
       </a>
     </div>
   </div>
@@ -111,7 +115,7 @@ <h2>開発効率とスケーラビリティを両立</h2>
             </g>
           </g>
         </svg>
-        <h3>AI重視</h3>
+        <h3>AI志向</h3>
         <p>AIで開発を加速させるリソースと統合機能が充実</p>
       </div>
       <div class="feature">
@@ -484,4 +488,4 @@ <h3>AIとAngularの組み合わせに興味がありますか？</h3>
       </div>
     </div>
   </section>
-</div>
+</main>

adev-ja/src/app/features/update/recommendations.en.ts

@@ -2742,4 +2742,12 @@ export const RECOMMENDATIONS: Step[] = [
     action:
       'In templates parentheses are now always respected. This can lead to runtime breakages when nullish coalescing were nested in parathesis. eg `(foo?.bar).baz` will throw if `foo` is nullish as it would in native JavaScript.',
   },
+  {
+    possibleIn: 2000,
+    necessaryAsOf: 2000,
+    level: ApplicationComplexity.Advanced,
+    step: '20.0.0_router_generate_error_redirectTo_and_canMatch_incompatible_together',
+    action:
+      'Route configurations are now validated more rigorously. Routes that combine `redirectTo` and `canMatch` protections will generate an error, as these properties are incompatible together by default.',
+  },
 ];

adev-ja/src/app/features/update/recommendations.ts

@@ -2742,4 +2742,12 @@ export const RECOMMENDATIONS: Step[] = [
       action:
         'テンプレートでは括弧が常に尊重されるようになりました。これは、null合体演算子が括弧内にネストされている場合にランタイムエラーを引き起こす可能性があります。例：`(foo?.bar).baz`は、`foo`がnullishの場合、ネイティブJavaScriptと同様にエラーを投げます。',
     },
+  {
+    possibleIn: 2000,
+    necessaryAsOf: 2000,
+    level: ApplicationComplexity.Advanced,
+    step: '20.0.0_router_generate_error_redirectTo_and_canMatch_incompatible_together',
+    action:
+      'ルート設定がより厳密に検証されるようになりました。`redirectTo`と`canMatch`保護を組み合わせたルートはエラーを生成します。これらのプロパティはデフォルトで互いに互換性がないためです。',
+  },
 ];

adev-ja/src/app/features/update/update.component.en.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, HostListener, inject, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
 import {Step, RECOMMENDATIONS} from './recommendations';
 import {Clipboard} from '@angular/cdk/clipboard';
 import {CdkMenuModule} from '@angular/cdk/menu';
@@ -26,6 +26,8 @@ interface Option {
   description: string;
 }
 
+const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.includes('Windows');
+
 @Component({
   selector: 'adev-update-guide',
   templateUrl: './update.component.html',
@@ -40,6 +42,9 @@ interface Option {
     IconComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '(click)': 'copyCode($event)',
+  },
 })
 export default class UpdateComponent {
   private readonly snackBar = inject(MatSnackBar);
@@ -50,7 +55,7 @@ export default class UpdateComponent {
   protected options: Record<string, boolean> = {
     ngUpgrade: false,
     material: false,
-    windows: isWindows(),
+    windows: isWindows,
   };
 
   protected readonly optionList: Option[] = [
@@ -128,8 +133,9 @@ export default class UpdateComponent {
     }
   }
 
-  @HostListener('click', ['$event.target'])
-  copyCode({tagName, textContent}: Element) {
+  copyCode(event: Event) {
+    const {tagName, textContent} = event.target as Element;
+
     if (tagName === 'CODE') {
       this.clipboard.copy(textContent!);
       this.snackBar.open('Copied to clipboard', '', {duration: 2000});
@@ -247,7 +253,7 @@ export default class UpdateComponent {
     if (this.to.number < 600) {
       const actionMessage = `Update all of your dependencies to the latest Angular and the right version of TypeScript.`;
 
-      if (isWindows()) {
+      if (isWindows) {
         const packages =
           angularPackages
             .map((packageName) => `@angular/${packageName}@${angularVersion}`)
@@ -297,13 +303,3 @@ export default class UpdateComponent {
     return newAction;
   }
 }
-
-/** Whether or not the user is running on a Windows OS. */
-function isWindows(): boolean {
-  if (typeof navigator === 'undefined') {
-    return false;
-  }
-
-  const platform = navigator.platform.toLowerCase();
-  return platform.includes('windows') || platform.includes('win32');
-}