Create a new pull request by comparing changes across two branches

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
       - name: Initialize environment
         uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8af6b55a8b31cd9e632823cf8f2dd1e89caa6f4f
       - name: Setup ESLint Caching
-        uses: actions/cache@ab5e6d0c87105b4c9c2047343972218f562e4319 # v4.0.1
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: .eslintcache
           key: ${{ runner.os }}-${{ hashFiles('.eslintrc.json') }}

CHANGELOG.md

@@ -1,3 +1,52 @@
+<a name="18.0.0-next.0"></a>
+
+# 18.0.0-next.0 (2024-03-21)
+
+## Breaking Changes
+
+### @angular/cli
+
+- Node.js support for versions <18.19.1 and <20.11.1 has been removed.
+
+### @angular-devkit/build-angular
+
+- The support for the legacy Sass build pipeline, previously accessible via `NG_BUILD_LEGACY_SASS` when utilizing webpack-based builders, has been removed.
+
+## Deprecations
+
+### @angular-devkit/schematics
+
+- `NodePackageLinkTask` in `@angular-devkit/schematics`. A custom task should be created instead.
+
+### @angular/cli
+
+| Commit                                                                                              | Type     | Description                                               |
+| --------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------- |
+| [ac3019570](https://github.com/angular/angular-cli/commit/ac301957093d0689c98f7debe98fbb2546c9b442) | feat     | add `ng dev` alias to `ng serve`                          |
+| [c7b208555](https://github.com/angular/angular-cli/commit/c7b208555e34cc5ebf9cf2d335d257e72297cae9) | refactor | remove support for Node.js versions <18.19.1 and <20.11.1 |
+
+### @schematics/angular
+
+| Commit                                                                                              | Type | Description                                               |
+| --------------------------------------------------------------------------------------------------- | ---- | --------------------------------------------------------- |
+| [f452589e2](https://github.com/angular/angular-cli/commit/f452589e2c921448b76a138a5f34ba92ad05e297) | feat | use TypeScript bundler module resolution for new projects |
+
+### @angular-devkit/build-angular
+
+| Commit                                                                                              | Type     | Description                                                        |
+| --------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
+| [ee9ec2301](https://github.com/angular/angular-cli/commit/ee9ec2301fd24972cf8de8b230e1ca088dbc0449) | fix      | `Internal server error: Invalid URL` when using a non localhost IP |
+| [8a54875cb](https://github.com/angular/angular-cli/commit/8a54875cbb654f95d5213b2d84190bd3814d6810) | fix      | handle wrapping of class expressions emitted by esbuild            |
+| [97973059e](https://github.com/angular/angular-cli/commit/97973059ec56a573629f7a367757773a3cfabe17) | refactor | remove Sass legacy implementation                                  |
+
+### @angular-devkit/schematics
+
+| Commit                                                                                              | Type     | Description                     |
+| --------------------------------------------------------------------------------------------------- | -------- | ------------------------------- |
+| [797584583](https://github.com/angular/angular-cli/commit/797584583138c9223bf238ae8f352e77575bd25a) | refactor | deprecate `NodePackageLinkTask` |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="17.3.1"></a>
 
 # 17.3.1 (2024-03-20)

package.json

@@ -68,15 +68,15 @@
     "@angular/platform-server": "18.0.0-next.1",
     "@angular/router": "18.0.0-next.1",
     "@angular/service-worker": "18.0.0-next.1",
-    "@babel/core": "7.24.0",
-    "@babel/generator": "7.23.6",
+    "@babel/core": "7.24.3",
+    "@babel/generator": "7.24.1",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.22.6",
-    "@babel/plugin-transform-async-generator-functions": "7.23.9",
-    "@babel/plugin-transform-async-to-generator": "7.23.3",
-    "@babel/plugin-transform-runtime": "7.24.0",
-    "@babel/preset-env": "7.24.0",
-    "@babel/runtime": "7.24.0",
+    "@babel/plugin-transform-async-generator-functions": "7.24.3",
+    "@babel/plugin-transform-async-to-generator": "7.24.1",
+    "@babel/plugin-transform-runtime": "7.24.3",
+    "@babel/preset-env": "7.24.3",
+    "@babel/runtime": "7.24.1",
     "@bazel/bazelisk": "1.19.0",
     "@bazel/buildifier": "6.4.0",
     "@bazel/concatjs": "5.8.1",
@@ -112,15 +112,15 @@
     "@types/yargs": "^17.0.20",
     "@types/yargs-parser": "^21.0.0",
     "@types/yarnpkg__lockfile": "^1.1.5",
-    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "7.2.0",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "@web/test-runner": "^0.18.0",
     "@yarnpkg/lockfile": "1.1.0",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1",
     "ansi-colors": "4.1.3",
-    "autoprefixer": "10.4.18",
+    "autoprefixer": "10.4.19",
     "babel-loader": "9.1.3",
     "babel-plugin-istanbul": "6.1.1",
     "bootstrap": "^4.0.0",
@@ -138,7 +138,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-header": "3.1.1",
     "eslint-plugin-import": "2.29.1",
-    "express": "4.18.3",
+    "express": "4.19.1",
     "fast-glob": "3.3.2",
     "http-proxy": "^1.18.1",
     "http-proxy-middleware": "2.0.6",
@@ -166,7 +166,7 @@
     "magic-string": "0.30.8",
     "mini-css-extract-plugin": "2.8.1",
     "mrmime": "2.0.0",
-    "ng-packagr": "18.0.0-next.0",
+    "ng-packagr": "18.0.0-next.1",
     "npm": "^8.11.0",
     "npm-package-arg": "11.0.1",
     "open": "8.4.2",
@@ -177,12 +177,12 @@
     "picomatch": "4.0.1",
     "piscina": "4.4.0",
     "popper.js": "^1.14.1",
-    "postcss": "8.4.35",
+    "postcss": "8.4.38",
     "postcss-loader": "8.1.1",
     "prettier": "^3.0.0",
     "protractor": "~7.0.0",
     "puppeteer": "18.2.1",
-    "quicktype-core": "23.0.106",
+    "quicktype-core": "23.0.107",
     "resolve-url-loader": "5.0.0",
     "rollup": "~4.13.0",
     "rollup-plugin-sourcemaps": "^0.6.0",
@@ -202,15 +202,15 @@
     "tree-kill": "1.2.2",
     "ts-node": "^10.9.1",
     "tslib": "2.6.2",
-    "typescript": "5.4.2",
-    "undici": "6.9.0",
+    "typescript": "5.4.3",
+    "undici": "6.10.1",
     "verdaccio": "5.29.2",
     "verdaccio-auth-memory": "^10.0.0",
-    "vite": "5.1.6",
+    "vite": "5.2.2",
     "watchpack": "2.4.1",
-    "webpack": "5.90.3",
-    "webpack-dev-middleware": "7.0.0",
-    "webpack-dev-server": "5.0.3",
+    "webpack": "5.91.0",
+    "webpack-dev-middleware": "7.1.1",
+    "webpack-dev-server": "5.0.4",
     "webpack-merge": "5.10.0",
     "webpack-subresource-integrity": "5.1.0",
     "yargs": "17.7.2",

packages/angular_devkit/build_angular/package.json

@@ -10,20 +10,20 @@
     "@angular-devkit/architect": "0.0.0-EXPERIMENTAL-PLACEHOLDER",
     "@angular-devkit/build-webpack": "0.0.0-EXPERIMENTAL-PLACEHOLDER",
     "@angular-devkit/core": "0.0.0-PLACEHOLDER",
-    "@babel/core": "7.24.0",
-    "@babel/generator": "7.23.6",
+    "@babel/core": "7.24.3",
+    "@babel/generator": "7.24.1",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.22.6",
-    "@babel/plugin-transform-async-generator-functions": "7.23.9",
-    "@babel/plugin-transform-async-to-generator": "7.23.3",
-    "@babel/plugin-transform-runtime": "7.24.0",
-    "@babel/preset-env": "7.24.0",
-    "@babel/runtime": "7.24.0",
+    "@babel/plugin-transform-async-generator-functions": "7.24.3",
+    "@babel/plugin-transform-async-to-generator": "7.24.1",
+    "@babel/plugin-transform-runtime": "7.24.3",
+    "@babel/preset-env": "7.24.3",
+    "@babel/runtime": "7.24.1",
     "@discoveryjs/json-ext": "0.5.7",
     "@ngtools/webpack": "0.0.0-PLACEHOLDER",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
-    "autoprefixer": "10.4.18",
+    "autoprefixer": "10.4.19",
     "babel-loader": "9.1.3",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.21.5",
@@ -49,7 +49,7 @@
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.1",
     "piscina": "4.4.0",
-    "postcss": "8.4.35",
+    "postcss": "8.4.38",
     "postcss-loader": "8.1.1",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.1",
@@ -61,12 +61,12 @@
     "terser": "5.29.2",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
-    "undici": "6.9.0",
-    "vite": "5.1.6",
+    "undici": "6.10.1",
+    "vite": "5.2.2",
     "watchpack": "2.4.1",
-    "webpack": "5.90.3",
-    "webpack-dev-middleware": "7.0.0",
-    "webpack-dev-server": "5.0.3",
+    "webpack": "5.91.0",
+    "webpack-dev-middleware": "7.1.1",
+    "webpack-dev-server": "5.0.4",
     "webpack-merge": "5.10.0",
     "webpack-subresource-integrity": "5.1.0"
   },

packages/angular_devkit/build_angular/src/tools/vite/angular-memory-plugin.ts

@@ -219,9 +219,12 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
           }
 
           transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, async (html) => {
+            const resolvedUrls = server.resolvedUrls;
+            const baseUrl = resolvedUrls?.local[0] ?? resolvedUrls?.network[0];
+
             const { content } = await renderPage({
               document: html,
-              route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
+              route: new URL(req.originalUrl ?? '/', baseUrl).toString(),
               serverContext: 'ssr',
               loadBundle: (uri: string) =>
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -306,19 +309,17 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
  * @param file The absolute path to the Vite client code.
  * @returns
  */
-async function loadViteClientCode(file: string) {
+async function loadViteClientCode(file: string): Promise<string> {
   const originalContents = await readFile(file, 'utf-8');
-  const firstUpdate = originalContents.replace('You can also disable this overlay by setting', '');
-  assert(originalContents !== firstUpdate, 'Failed to update Vite client error overlay text. (1)');
-
-  const secondUpdate = firstUpdate.replace(
-    // eslint-disable-next-line max-len
-    '<code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">${hmrConfigName}.</code>',
+  const updatedContents = originalContents.replace(
+    `h('br'), 'You can also disable this overlay by setting ', ` +
+      `h('code', { part: 'config-option-name' }, 'server.hmr.overlay'), '` +
+      ` to ', h('code', { part: 'config-option-value' }, 'false'), ' in ', h('code', { part: 'config-file-name' }, hmrConfigName), '.'`,
     '',
   );
-  assert(firstUpdate !== secondUpdate, 'Failed to update Vite client error overlay text. (2)');
+  assert(originalContents !== updatedContents, 'Failed to update Vite client error overlay text.');
 
-  return secondUpdate;
+  return updatedContents;
 }
 
 function pathnameWithoutBasePath(url: string, basePath: string): string {

packages/angular_devkit/build_angular/src/tools/webpack/plugins/builder-watch-plugin.ts

@@ -36,7 +36,7 @@ class TimeInfoMap extends Map<string, { safeTime: number; timestamp: number }> {
 }
 
 // Extract watch related types from the Webpack compiler type since they are not directly exported
-type WebpackWatchFileSystem = Compiler['watchFileSystem'];
+type WebpackWatchFileSystem = NonNullable<Compiler['watchFileSystem']>;
 type WatchOptions = Parameters<WebpackWatchFileSystem['watch']>[4];
 type WatchCallback = Parameters<WebpackWatchFileSystem['watch']>[5];
 
@@ -83,7 +83,7 @@ class BuilderWatchFileSystem implements WebpackWatchFileSystem {
         const missingChanges = new Set<string>();
 
         for (const event of events) {
-          this.inputFileSystem.purge?.(event.path);
+          this.inputFileSystem?.purge?.(event.path);
 
           if (event.type === 'deleted') {
             timeInfo.delete(event.path);
@@ -103,7 +103,7 @@ class BuilderWatchFileSystem implements WebpackWatchFileSystem {
         const timeInfoMap = new Map(timeInfo);
 
         callback(
-          undefined,
+          null,
           timeInfoMap,
           timeInfoMap,
           new Set([...fileChanges, ...directoryChanges, ...missingChanges]),

packages/angular_devkit/build_angular/src/tools/webpack/plugins/common-js-usage-warn-plugin.ts

@@ -140,15 +140,21 @@ export class CommonJsUsageWarnPlugin {
   }
 }
 
-function getIssuer(compilation: Compilation, module: Module | null): Module | null {
+function getIssuer(
+  compilation: Compilation,
+  module: Module | null | undefined,
+): Module | null | undefined {
   if (!module) {
     return null;
   }
 
   return compilation.moduleGraph.getIssuer(module);
 }
 
-function getWebpackModule(compilation: Compilation, dependency: Dependency | null): Module | null {
+function getWebpackModule(
+  compilation: Compilation,
+  dependency: Dependency | null,
+): Module | null | undefined {
   if (!dependency) {
     return null;
   }

packages/angular_devkit/build_angular/src/tools/webpack/plugins/styles-webpack-plugin.ts

@@ -37,7 +37,7 @@ export class StylesWebpackPlugin {
       preferRelative: true,
       useSyncFileSystemCalls: true,
       symlinks: !preserveSymlinks,
-      fileSystem: compiler.inputFileSystem,
+      fileSystem: compiler.inputFileSystem ?? undefined,
     });
 
     const webpackOptions = compiler.options;

packages/angular_devkit/build_webpack/package.json

@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@angular-devkit/core": "0.0.0-PLACEHOLDER",
-    "webpack": "5.90.3"
+    "webpack": "5.91.0"
   },
   "peerDependencies": {
     "webpack": "^5.30.0",

packages/ngtools/webpack/package.json

@@ -30,7 +30,7 @@
     "@angular-devkit/core": "0.0.0-PLACEHOLDER",
     "@angular/compiler": "18.0.0-next.1",
     "@angular/compiler-cli": "18.0.0-next.1",
-    "typescript": "5.4.2",
-    "webpack": "5.90.3"
+    "typescript": "5.4.3",
+    "webpack": "5.91.0"
   }
 }

packages/ngtools/webpack/src/ivy/system.ts

@@ -10,10 +10,10 @@ import * as ts from 'typescript';
 import { Compiler } from 'webpack';
 import { externalizePath } from './paths';
 
-export type InputFileSystem = Compiler['inputFileSystem'];
+export type InputFileSystem = NonNullable<Compiler['inputFileSystem']>;
 export interface InputFileSystemSync extends InputFileSystem {
-  readFileSync(path: string): Buffer;
-  statSync(path: string): { size: number; mtime: Date; isDirectory(): boolean; isFile(): boolean };
+  readFileSync: NonNullable<InputFileSystem['readFileSync']>;
+  statSync: NonNullable<InputFileSystem['statSync']>;
 }
 
 function shouldNotWrite(): never {