Merge pull request #212 from angular/main

Create a new pull request by comparing changes across two branches

.github/workflows/scorecard.yml

@@ -25,7 +25,7 @@ jobs:
 
     steps:
       - name: 'Checkout code'
-        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           persist-credentials: false
 
@@ -47,6 +47,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: 'Upload to code-scanning'
-        uses: github/codeql-action/upload-sarif@b7cec7526559c32f1616476ff32d17ba4c59b2d6 # v3.25.5
+        uses: github/codeql-action/upload-sarif@f079b8493333aace61c81488f8bd40919487bd9f # v3.25.7
         with:
           sarif_file: results.sarif

.pullapprove.yml

@@ -746,6 +746,7 @@ groups:
       users:
         - alxhub
         - atscott
+        - dylhunn
 
   # =========================================================
   #  zone.js

adev/src/app/features/playground/playground.component.scss

@@ -2,7 +2,7 @@
   display: block;
   padding: var(--layout-padding);
   padding-block-end: 100px;
-  height: calc(98vh);
+  height: 100vh;
   width: 100%;
   box-sizing: border-box;
 

adev/src/app/features/tutorial/tutorial.component.scss

@@ -105,7 +105,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
   margin-block-start: var(--layout-padding);
   cursor: col-resize;
   align-self: stretch;
-  height: var(--fixed-content-height);
+  height: 100vh;
 
   &::before {
     content: '';
@@ -133,7 +133,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
   width: 100%;
   min-width: 300px;
   padding-block-start: var(--layout-padding);
-  height: var(--fixed-content-height);
+  height: 100vh;
 }
 
 .adev-split-tutorial {

adev/src/content/best-practices/style-guide.md

@@ -730,7 +730,7 @@ If the property is hard to construct a default value for, use `?` to explicitly
 
 You may want to have a required `@Input` field, meaning all your component users are required to pass that attribute.
 In such cases, use a default value.
-Just suppressing the TypeScript error with `!` is insufficient and should be avoided because it will prevent the type checker ensure the input value is provided.
+Just suppressing the TypeScript error with `!` is insufficient and should be avoided because it will prevent the type checker from ensuring the input value is provided.
 
 <docs-code header="app/heroes/hero/hero.component.ts" path="adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.avoid.ts" visibleRegion="example"/>
 

adev/src/content/reference/configs/file-structure.md

@@ -64,7 +64,7 @@ Subfolders contain the application source and application-specific configuration
 | Application support files | Purpose                                                                                                                                                                                                                           |
 |:---                       |:---                                                                                                                                                                                                                               |
 | `app/`                    | Contains the component files in which your application logic and data are defined. See details [below](#app-src).                                                                                                                 |
-| `assets/`                 | Contains image and other asset files to be served as static files by the dev server and copied as-is when you build your application.                                                                                             |
+| `public/`                 | Contains image and other asset files to be served as static files by the dev server and copied as-is when you build your application.                                                                                             |
 | `favicon.ico`             | An icon to use for this application in the bookmark bar.                                                                                                                                                                          |
 | `index.html`              | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or`<link>` tags here manually. |
 | `main.ts`                 | The main entry point for your application.                                                                                                                                                                                        |

adev/src/content/reference/configs/workspace-config.md

@@ -139,7 +139,7 @@ Each target under `architect` has the following properties:
 |:---             |:---                                                                                                                                                                                                                                                    |
 | `builder`       | The CLI builder used to create this target in the form of `<package-name>:<builder-name>`.                                                                                                                                                             |
 | `options`       | Build target default options.                                                                                                                                                                                                                          |
-| `configurations`| Alternative configurations for executing the target. Each configuration sets the default options for that intended environment, overriding the associated value under `options`. See [Alternate build configurations](#alternate-build-configs) below. |
+| `configurations`| Alternative configurations for executing the target. Each configuration sets the default options for that intended environment, overriding the associated value under `options`. See [Alternate build configurations](#alternate-build-configurations) below. |
 
 For example, to configure a build with optimizations disabled:
 

adev/src/content/reference/releases.md

@@ -94,11 +94,11 @@ The following table provides the status for Angular versions under support.
 
 | Version | Status | Released   | Active ends | LTS ends   |
 |:--------|:-------|:-----------|:------------|:-----------|
-| ^17.0.0 | Active | 2023-11-08 | 2024-05-08  | 2025-05-15 |
+| ^18.0.0 | Active | 2024-05-22 | 2024-11-xx  | 2025-11-xx |
+| ^17.0.0 | LTS    | 2023-11-08 | 2024-05-08  | 2025-05-15 |
 | ^16.0.0 | LTS    | 2023-05-03 | 2023-11-08  | 2024-11-08 |
-| ^15.0.0 | LTS    | 2022-11-18 | 2023-05-03  | 2024-05-18 |
 
-Angular versions v2 to v14 are no longer supported.
+Angular versions v2 to v15 are no longer supported.
 
 ### LTS fixes
 

adev/src/content/reference/versions.md

@@ -9,13 +9,12 @@ This table covers [Angular versions under active support](reference/releases#act
 
 | Angular            | Node.js                              | TypeScript     | RxJS               |
 | ------------------ | ------------------------------------ | -------------- | ------------------ |
+| 18.0.x             | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0  | >=5.4.0 <5.5.0 | ^6.5.3 \|\| ^7.4.0 |
 | 17.3.x             | ^18.13.0 \|\| ^20.9.0                | >=5.2.0 <5.5.0 | ^6.5.3 \|\| ^7.4.0 |
 | 17.1.x \|\| 17.2.x | ^18.13.0 \|\| ^20.9.0                | >=5.2.0 <5.4.0 | ^6.5.3 \|\| ^7.4.0 |
 | 17.0.x             | ^18.13.0 \|\| ^20.9.0                | >=5.2.0 <5.3.0 | ^6.5.3 \|\| ^7.4.0 |
 | 16.1.x \|\| 16.2.x | ^16.14.0 \|\| ^18.10.0               | >=4.9.3 <5.2.0 | ^6.5.3 \|\| ^7.4.0 |
 | 16.0.x             | ^16.14.0 \|\| ^18.10.0               | >=4.9.3 <5.1.0 | ^6.5.3 \|\| ^7.4.0 |
-| 15.1.x \|\| 15.2.x | ^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0 | >=4.8.2 <5.0.0 | ^6.5.3 \|\| ^7.4.0 |
-| 15.0.x             | ^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0 | ~4.8.2         | ^6.5.3 \|\| ^7.4.0 |
 
 ## Unsupported Angular versions
 
@@ -25,6 +24,8 @@ guarantees. It is listed here for historical reference.
 
 | Angular            | Node.js                              | TypeScript     | RxJS               |
 | ------------------ | ------------------------------------ | -------------- | ------------------ |
+| 15.1.x \|\| 15.2.x | ^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0 | >=4.8.2 <5.0.0 | ^6.5.3 \|\| ^7.4.0 |
+| 15.0.x             | ^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0 | ~4.8.2         | ^6.5.3 \|\| ^7.4.0 |
 | 14.2.x \|\| 14.3.x | ^14.15.0 \|\| ^16.10.0               | >=4.6.2 <4.9.0 | ^6.5.3 \|\| ^7.4.0 |
 | 14.0.x \|\| 14.1.x | ^14.15.0 \|\| ^16.10.0               | >=4.6.2 <4.8.0 | ^6.5.3 \|\| ^7.4.0 |
 | 13.3.x             | ^12.20.0 \|\| ^14.15.0 \|\| ^16.10.0 | >=4.4.3 <4.7.0 | ^6.5.3 \|\| ^7.4.0 |

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html

@@ -91,7 +91,7 @@
 </mat-menu>
 
 <mat-menu #info="matMenu">
-  <a mat-menu-item href="https://angular.io/devtools" target="_blank">
+  <a mat-menu-item href="https://angular.dev/tools/devtools" target="_blank">
     <mat-icon>library_books</mat-icon>
     Guide
   </a>

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.html

@@ -3,7 +3,7 @@
     <a
       mat-button
       color="primary"
-      href="https://angular.io/api/core/ViewEncapsulation"
+      href="https://angular.dev/api/core/ViewEncapsulation"
       target="_blank"
       >
       View Encapsulation: <span class="meta-data">{{ viewEncapsulation }}</span>
@@ -13,7 +13,7 @@
     <a
       mat-button
       color="primary"
-      href="https://angular.io/api/core/ChangeDetectionStrategy"
+      href="https://angular.dev/api/core/ChangeDetectionStrategy"
       target="_blank"
       >
       Change Detection Strategy: <span class="meta-data">{{ changeDetectionStrategy }}</span>

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html

@@ -7,7 +7,7 @@
             <mat-panel-title>
               Injected Services
               <a
-                href="https://angular.io/guide/dependency-injection"
+                href="https://angular.dev/guide/di"
                 target="_blank"
                 class="documentation"
                 matTooltip="Open docs reference"

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts

@@ -59,21 +59,21 @@ export class PropertyViewBodyComponent {
         title: '@Inputs',
         hidden: this.directiveInputControls.dataSource.data.length === 0,
         controls: this.directiveInputControls,
-        documentation: 'https://angular.io/api/core/Input',
+        documentation: 'https://angular.dev/api/core/input',
         class: 'cy-inputs',
       },
       {
         title: '@Outputs',
         hidden: this.directiveOutputControls.dataSource.data.length === 0,
         controls: this.directiveOutputControls,
-        documentation: 'https://angular.io/api/core/Output',
+        documentation: 'https://angular.dev/api/core/output',
         class: 'cy-outputs',
       },
       {
         title: 'Properties',
         hidden: this.directiveStateControls.dataSource.data.length === 0,
         controls: this.directiveStateControls,
-        documentation: 'https://angular.io/guide/property-binding',
+        documentation: 'https://angular.dev/guide/templates/property-binding',
         class: 'cy-properties',
       },
     ];

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html

@@ -24,7 +24,7 @@
             <div class="injector-hierarchy">
               <h2>
                 Environment Hierarchy
-                <a class="hierarchy-ref" href="https://angular.io/guide/hierarchical-dependency-injection#types-of-injector-hierarchies" target="_blank">
+                <a class="hierarchy-ref" href="https://angular.dev/guide/di/hierarchical-dependency-injection#types-of-injector-hierarchies" target="_blank">
                   <mat-icon matTooltip="Open docs reference"> open_in_new </mat-icon>
                 </a>
               </h2>
@@ -39,7 +39,7 @@ <h2>
             <div class="injector-hierarchy">
               <h2>
                 Element Hierarchy
-                <a class="hierarchy-ref" href="https://angular.io/guide/hierarchical-dependency-injection#types-of-injector-hierarchies" target="_blank">
+                <a class="hierarchy-ref" href="https://angular.dev/guide/di/hierarchical-dependency-injection#types-of-injector-hierarchies" target="_blank">
                   <mat-icon matTooltip="Open docs reference"> open_in_new </mat-icon>
                 </a>
               </h2>

devtools/projects/shell-browser/src/popups/production.html

@@ -53,7 +53,7 @@ <h4 class="header-text">Angular DevTools</h4>
       <span class="material-icons md-48">settings</span>
       <section>
         <p>
-          Angular application running in <a href="https://angular.io/api/core/enableProdMode">production
+          Angular application running in <a href="https://angular.dev/api/core/enableProdMode">production
             mode</a>.
         </p>
         <p>We recommend using DevTools with apps in dev mode, running

package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "//engines-comment": "Keep this in sync with /aio/package.json and /aio/tools/examples/shared/package.json",
   "engines": {
-    "node": "^18.13.0 || ^20.9.0",
+    "node": "^18.19.1 || ^20.11.1",
     "yarn": ">=1.22.4 <2",
     "npm": "Please use yarn instead of NPM to install dependencies"
   },

packages/animations/package.json

@@ -5,7 +5,7 @@
   "author": "angular",
   "license": "MIT",
   "engines": {
-    "node": "^18.13.0 || >=20.9.0"
+    "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/bazel/package.json

@@ -5,7 +5,7 @@
   "author": "angular",
   "license": "MIT",
   "engines": {
-    "node": "^18.13.0 || >=20.9.0"
+    "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
   },
   "bin": {
     "ngc-wrapped": "./src/ngc-wrapped/index.mjs",

packages/common/package.json

@@ -5,7 +5,7 @@
   "author": "angular",
   "license": "MIT",
   "engines": {
-    "node": "^18.13.0 || >=20.9.0"
+    "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
   },
   "locales": "locales",
   "dependencies": {

packages/compiler-cli/package.json

@@ -67,7 +67,7 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": "^18.13.0 || >=20.9.0"
+    "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
   },
   "bugs": {
     "url": "https://github.com/angular/angular/issues"

packages/compiler-cli/src/ngtsc/annotations/component/BUILD.bazel

@@ -25,6 +25,7 @@ ts_library(
         "//packages/compiler-cli/src/ngtsc/reflection",
         "//packages/compiler-cli/src/ngtsc/scope",
         "//packages/compiler-cli/src/ngtsc/transform",
+        "//packages/compiler-cli/src/ngtsc/typecheck",
         "//packages/compiler-cli/src/ngtsc/typecheck/api",
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/api",
         "//packages/compiler-cli/src/ngtsc/typecheck/template_semantics/api",

packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts

@@ -114,7 +114,7 @@ import {
   HandlerPrecedence,
   ResolveResult,
 } from '../../../transform';
-import {TypeCheckableDirectiveMeta, TypeCheckContext} from '../../../typecheck/api';
+import {TemplateId, TypeCheckableDirectiveMeta, TypeCheckContext} from '../../../typecheck/api';
 import {ExtendedTemplateChecker} from '../../../typecheck/extended/api';
 import {TemplateSemanticsChecker} from '../../../typecheck/template_semantics/api/api';
 import {getSourceFile} from '../../../util/src/typescript';
@@ -176,6 +176,7 @@ import {
   collectAnimationNames,
   validateAndFlattenComponentImports,
 } from './util';
+import {getTemplateDiagnostics} from '../../../typecheck';
 
 const EMPTY_ARRAY: any[] = [];
 
@@ -624,6 +625,25 @@ export class ComponentDecoratorHandler
         },
         this.compilationMode,
       );
+
+      if (
+        this.compilationMode === CompilationMode.LOCAL &&
+        template.errors &&
+        template.errors.length > 0
+      ) {
+        // Template errors are handled at the type check phase. But we skip this phase in local compilation mode. As a result we need to handle the errors now and add them to the diagnostics.
+        if (diagnostics === undefined) {
+          diagnostics = [];
+        }
+
+        diagnostics.push(
+          ...getTemplateDiagnostics(
+            template.errors,
+            '' as TemplateId, // Template ID is required as part of the template type check, mainly for mapping the template to its component class. But here we are generating the diagnostic outside of the type check context, and so we skip the template ID.
+            template.sourceMapping,
+          ),
+        );
+      }
     }
     const templateResource = template.declaration.isInline
       ? {path: null, expression: component.get('template')!}
@@ -1578,10 +1598,6 @@ export class ComponentDecoratorHandler
     resolution: Readonly<Partial<ComponentResolutionData>>,
     pool: ConstantPool,
   ): CompileResult[] {
-    if (analysis.template.errors !== null && analysis.template.errors.length > 0) {
-      return [];
-    }
-
     // In the local compilation mode we can only rely on the information available
     // within the `@Component.deferredImports` array, because in this mode compiler
     // doesn't have information on which dependencies belong to which defer blocks.

packages/compiler-cli/src/ngtsc/typecheck/index.ts

@@ -7,6 +7,6 @@
  */
 
 export {FileTypeCheckingData, TemplateTypeCheckerImpl} from './src/checker';
-export {TypeCheckContextImpl} from './src/context';
+export {TypeCheckContextImpl, getTemplateDiagnostics} from './src/context';
 export {TypeCheckShimGenerator} from './src/shim';
 export {typeCheckFilePath} from './src/type_check_file';

packages/compiler-cli/src/ngtsc/typecheck/src/context.ts

@@ -250,9 +250,7 @@ export class TypeCheckContextImpl implements TypeCheckContext {
     const templateDiagnostics: TemplateDiagnostic[] = [];
 
     if (parseErrors !== null) {
-      templateDiagnostics.push(
-        ...this.getTemplateDiagnostics(parseErrors, templateId, sourceMapping),
-      );
+      templateDiagnostics.push(...getTemplateDiagnostics(parseErrors, templateId, sourceMapping));
     }
 
     const boundTarget = binder.bind({template});
@@ -559,33 +557,33 @@ export class TypeCheckContextImpl implements TypeCheckContext {
 
     return this.fileMap.get(sfPath)!;
   }
+}
 
-  private getTemplateDiagnostics(
-    parseErrors: ParseError[],
-    templateId: TemplateId,
-    sourceMapping: TemplateSourceMapping,
-  ): TemplateDiagnostic[] {
-    return parseErrors.map((error) => {
-      const span = error.span;
-
-      if (span.start.offset === span.end.offset) {
-        // Template errors can contain zero-length spans, if the error occurs at a single point.
-        // However, TypeScript does not handle displaying a zero-length diagnostic very well, so
-        // increase the ending offset by 1 for such errors, to ensure the position is shown in the
-        // diagnostic.
-        span.end.offset++;
-      }
+export function getTemplateDiagnostics(
+  parseErrors: ParseError[],
+  templateId: TemplateId,
+  sourceMapping: TemplateSourceMapping,
+): TemplateDiagnostic[] {
+  return parseErrors.map((error) => {
+    const span = error.span;
+
+    if (span.start.offset === span.end.offset) {
+      // Template errors can contain zero-length spans, if the error occurs at a single point.
+      // However, TypeScript does not handle displaying a zero-length diagnostic very well, so
+      // increase the ending offset by 1 for such errors, to ensure the position is shown in the
+      // diagnostic.
+      span.end.offset++;
+    }
 
-      return makeTemplateDiagnostic(
-        templateId,
-        sourceMapping,
-        span,
-        ts.DiagnosticCategory.Error,
-        ngErrorCode(ErrorCode.TEMPLATE_PARSE_ERROR),
-        error.msg,
-      );
-    });
-  }
+    return makeTemplateDiagnostic(
+      templateId,
+      sourceMapping,
+      span,
+      ts.DiagnosticCategory.Error,
+      ngErrorCode(ErrorCode.TEMPLATE_PARSE_ERROR),
+      error.msg,
+    );
+  });
 }
 
 /**