@schematics/angular 18.0.0-next.3 → 18.0.0-next.4

package/migrations/migration-collection.json

@@ -1,28 +1,8 @@
 {
   "schematics": {
-    "replace-nguniversal-builders": {
-      "version": "17.0.0",
-      "factory": "./update-17/replace-nguniversal-builders",
-      "description": "Replace usages of '@nguniversal/builders' with '@angular-devkit/build-angular'."
-    },
-    "replace-nguniversal-engines": {
-      "version": "17.0.0",
-      "factory": "./update-17/replace-nguniversal-engines",
-      "description": "Replace usages of '@nguniversal/' packages with '@angular/ssr'."
-    },
-    "update-workspace-config": {
-      "version": "17.0.0",
-      "factory": "./update-17/update-workspace-config",
-      "description": "Replace deprecated options in 'angular.json'."
-    },
-    "add-browser-sync-dependency": {
-      "version": "17.1.0",
-      "factory": "./update-17/add-browser-sync-dependency",
-      "description": "Add 'browser-sync' as dev dependency when '@angular-devkit/build-angular:ssr-dev-server' is used, as it is no longer a direct dependency of '@angular-devkit/build-angular'."
-    },
     "use-application-builder": {
       "version": "18.0.0",
-      "factory": "./update-17/use-application-builder",
+      "factory": "./use-application-builder/migration",
       "description": "Migrate application projects using '@angular-devkit/build-angular:browser' and '@angular-devkit/build-angular:browser-esbuild' to use the '@angular-devkit/build-angular:application' builder. Read more about this here: https://angular.dev/tools/cli/esbuild#using-the-application-builder",
       "optional": true
     }

package/migrations/{update-17/use-application-builder.js → use-application-builder/migration.js}

@@ -9,7 +9,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 const posix_1 = require("node:path/posix");
+const dependencies_1 = require("../../utility/dependencies");
+const dependency_1 = require("../../utility/dependency");
 const json_file_1 = require("../../utility/json-file");
+const latest_versions_1 = require("../../utility/latest-versions");
 const workspace_1 = require("../../utility/workspace");
 const workspace_models_1 = require("../../utility/workspace-models");
 const css_import_lexer_1 = require("./css-import-lexer");
@@ -17,10 +20,6 @@ function* updateBuildTarget(projectName, buildTarget, serverTarget, tree, contex
     // Update builder target and options
     buildTarget.builder = workspace_models_1.Builders.Application;
     for (const [, options] of (0, workspace_1.allTargetOptions)(buildTarget, false)) {
-        // Show warnings for using no longer supported options
-        if (usesNoLongerSupportedOptions(options, context, projectName)) {
-            continue;
-        }
         if (options['index'] === '') {
             options['index'] = false;
         }
@@ -59,7 +58,6 @@ function* updateBuildTarget(projectName, buildTarget, serverTarget, tree, contex
             }
         }
         // Delete removed options
-        delete options['deployUrl'];
         delete options['vendorChunk'];
         delete options['commonChunk'];
         delete options['resourcesOutputPath'];
@@ -142,6 +140,45 @@ function updateProjects(tree, context) {
             const projectSourceRoot = (0, posix_1.join)(project.root, project.sourceRoot ?? 'src');
             updateStyleImports(tree, projectSourceRoot, buildTarget);
         }
+        // Check for @angular-devkit/build-angular Webpack usage
+        let hasAngularDevkitUsage = false;
+        for (const [, target] of (0, workspace_1.allWorkspaceTargets)(workspace)) {
+            switch (target.builder) {
+                case workspace_models_1.Builders.Application:
+                case workspace_models_1.Builders.DevServer:
+                case workspace_models_1.Builders.ExtractI18n:
+                    // Ignore application, dev server, and i18n extraction for devkit usage check.
+                    // Both will be replaced if no other usage is found.
+                    continue;
+            }
+            if (target.builder.startsWith('@angular-devkit/build-angular:')) {
+                hasAngularDevkitUsage = true;
+                break;
+            }
+        }
+        // Use @angular/build directly if there is no devkit package usage
+        if (!hasAngularDevkitUsage) {
+            for (const [, target] of (0, workspace_1.allWorkspaceTargets)(workspace)) {
+                switch (target.builder) {
+                    case workspace_models_1.Builders.Application:
+                        target.builder = '@angular/build:application';
+                        break;
+                    case workspace_models_1.Builders.DevServer:
+                        target.builder = '@angular/build:dev-server';
+                        break;
+                    case workspace_models_1.Builders.ExtractI18n:
+                        target.builder = '@angular/build:extract-i18n';
+                        break;
+                }
+            }
+            // Add direct @angular/build dependencies and remove @angular-devkit/build-angular
+            rules.push((0, dependency_1.addDependency)('@angular/build', latest_versions_1.latestVersions.DevkitBuildAngular, {
+                type: dependency_1.DependencyType.Dev,
+                install: dependency_1.InstallBehavior.Always,
+                existing: dependency_1.ExistingBehavior.Replace,
+            }));
+            (0, dependencies_1.removePackageJsonDependency)(tree, '@angular-devkit/build-angular');
+        }
         return (0, schematics_1.chain)(rules);
     });
 }
@@ -262,11 +299,3 @@ function default_1() {
     ]);
 }
 exports.default = default_1;
-function usesNoLongerSupportedOptions({ deployUrl }, context, projectName) {
-    let hasUsage = false;
-    if (typeof deployUrl === 'string') {
-        hasUsage = true;
-        context.logger.warn(`Skipping migration for project "${projectName}". "deployUrl" option is not available in the application builder.`);
-    }
-    return hasUsage;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematics/angular",
-  "version": "18.0.0-next.3",
+  "version": "18.0.0-next.4",
   "description": "Schematics specific to Angular",
   "homepage": "https://github.com/angular/angular-cli",
   "keywords": [
@@ -22,8 +22,8 @@
   },
   "schematics": "./collection.json",
   "dependencies": {
-    "@angular-devkit/core": "18.0.0-next.3",
-    "@angular-devkit/schematics": "18.0.0-next.3",
+    "@angular-devkit/core": "18.0.0-next.4",
+    "@angular-devkit/schematics": "18.0.0-next.4",
     "jsonc-parser": "3.2.1"
   },
   "repository": {
@@ -31,7 +31,7 @@
     "url": "https://github.com/angular/angular-cli.git"
   },
   "engines": {
-    "node": "^18.19.1 || >=20.11.1",
+    "node": "^18.19.1 || ^20.11.1 || >=22.0.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
     "yarn": ">= 1.13.0"
   },

package/utility/latest-versions.js

@@ -15,6 +15,6 @@ exports.latestVersions = {
     ...dependencies,
     // As Angular CLI works with same minor versions of Angular Framework, a tilde match for the current
     Angular: dependencies['@angular/core'],
-    DevkitBuildAngular: '^18.0.0-next.3',
-    AngularSSR: '^18.0.0-next.3',
+    DevkitBuildAngular: '^18.0.0-next.4',
+    AngularSSR: '^18.0.0-next.4',
 };

package/migrations/update-17/add-browser-sync-dependency.d.ts

@@ -1,9 +0,0 @@
-/**
- * @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.io/license
- */
-import { Rule } from '@angular-devkit/schematics';
-export default function (): Rule;

package/migrations/update-17/add-browser-sync-dependency.js

@@ -1,36 +0,0 @@
-"use strict";
-/**
- * @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.io/license
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const utility_1 = require("../../utility");
-const dependencies_1 = require("../../utility/dependencies");
-const latest_versions_1 = require("../../utility/latest-versions");
-const workspace_1 = require("../../utility/workspace");
-const workspace_models_1 = require("../../utility/workspace-models");
-const BROWSER_SYNC_VERSION = latest_versions_1.latestVersions['browser-sync'];
-function default_1() {
-    return async (tree) => {
-        if ((0, dependencies_1.getPackageJsonDependency)(tree, 'browser-sync')?.version === BROWSER_SYNC_VERSION) {
-            return;
-        }
-        const workspace = await (0, workspace_1.getWorkspace)(tree);
-        for (const project of workspace.projects.values()) {
-            if (project.extensions.projectType !== workspace_models_1.ProjectType.Application) {
-                continue;
-            }
-            for (const target of project.targets.values()) {
-                if (target.builder === workspace_models_1.Builders.SsrDevServer) {
-                    return (0, utility_1.addDependency)('browser-sync', BROWSER_SYNC_VERSION, {
-                        type: utility_1.DependencyType.Dev,
-                    });
-                }
-            }
-        }
-    };
-}
-exports.default = default_1;

package/migrations/update-17/replace-nguniversal-builders.d.ts

@@ -1,9 +0,0 @@
-/**
- * @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.io/license
- */
-import { Rule } from '@angular-devkit/schematics';
-export default function (): Rule;

package/migrations/update-17/replace-nguniversal-builders.js

@@ -1,47 +0,0 @@
-"use strict";
-/**
- * @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.io/license
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const schematics_1 = require("@angular-devkit/schematics");
-const dependencies_1 = require("../../utility/dependencies");
-const workspace_1 = require("../../utility/workspace");
-const workspace_models_1 = require("../../utility/workspace-models");
-function default_1() {
-    return (0, schematics_1.chain)([
-        (0, workspace_1.updateWorkspace)((workspace) => {
-            for (const [, project] of workspace.projects) {
-                if (project.extensions.projectType !== workspace_models_1.ProjectType.Application) {
-                    // Only interested in application projects since these changes only effects application builders
-                    continue;
-                }
-                for (const [, target] of project.targets) {
-                    if (target.builder === '@nguniversal/builders:ssr-dev-server') {
-                        target.builder = '@angular-devkit/build-angular:ssr-dev-server';
-                    }
-                    else if (target.builder === '@nguniversal/builders:prerender') {
-                        target.builder = '@angular-devkit/build-angular:prerender';
-                        for (const [, options] of (0, workspace_1.allTargetOptions)(target, false)) {
-                            // Remove and replace builder options
-                            if (options['guessRoutes'] !== undefined) {
-                                options['discoverRoutes'] = options['guessRoutes'];
-                                delete options['guessRoutes'];
-                            }
-                            if (options['numProcesses'] !== undefined) {
-                                delete options['numProcesses'];
-                            }
-                        }
-                    }
-                }
-            }
-        }),
-        (host) => {
-            (0, dependencies_1.removePackageJsonDependency)(host, '@nguniversal/builders');
-        },
-    ]);
-}
-exports.default = default_1;

package/migrations/update-17/replace-nguniversal-engines.d.ts

@@ -1,9 +0,0 @@
-/**
- * @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.io/license
- */
-import { Rule } from '@angular-devkit/schematics';
-export default function (): Rule;

package/migrations/update-17/replace-nguniversal-engines.js

@@ -1,197 +0,0 @@
-"use strict";
-/**
- * @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.io/license
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const schematics_1 = require("@angular-devkit/schematics");
-const posix_1 = require("node:path/posix");
-const utility_1 = require("../../utility");
-const dependencies_1 = require("../../utility/dependencies");
-const latest_versions_1 = require("../../utility/latest-versions");
-const workspace_1 = require("../../utility/workspace");
-const workspace_models_1 = require("../../utility/workspace-models");
-function* visit(directory) {
-    for (const path of directory.subfiles) {
-        if (path.endsWith('.ts') && !path.endsWith('.d.ts')) {
-            const entry = directory.file(path);
-            if (entry) {
-                const content = entry.content;
-                if (content.includes('@nguniversal/')) {
-                    // Only need to rename the import so we can just string replacements.
-                    yield [entry.path, content.toString()];
-                }
-            }
-        }
-    }
-    for (const path of directory.subdirs) {
-        if (path === 'node_modules' || path.startsWith('.')) {
-            continue;
-        }
-        yield* visit(directory.dir(path));
-    }
-}
-const UNIVERSAL_PACKAGES = ['@nguniversal/common', '@nguniversal/express-engine'];
-/**
- * Regexp to match Universal packages.
- * @nguniversal/common/engine
- * @nguniversal/common
- * @nguniversal/express-engine
- **/
-const NGUNIVERSAL_PACKAGE_REGEXP = /@nguniversal\/(common(\/engine)?|express-engine)/g;
-function default_1() {
-    return async (tree) => {
-        const hasUniversalDeps = UNIVERSAL_PACKAGES.some((d) => (0, dependencies_1.getPackageJsonDependency)(tree, d));
-        if (!hasUniversalDeps) {
-            return;
-        }
-        return (0, schematics_1.chain)([
-            async (tree) => {
-                // Replace server file.
-                const workspace = await (0, workspace_1.getWorkspace)(tree);
-                for (const [, project] of workspace.projects) {
-                    if (project.extensions.projectType !== workspace_models_1.ProjectType.Application) {
-                        continue;
-                    }
-                    const serverMainFiles = new Map();
-                    for (const [, target] of project.targets) {
-                        if (target.builder !== workspace_models_1.Builders.Server) {
-                            continue;
-                        }
-                        const outputPath = project.targets.get('build')?.options?.outputPath;
-                        for (const [, { main }] of (0, workspace_1.allTargetOptions)(target, false)) {
-                            if (typeof main === 'string' &&
-                                typeof outputPath === 'string' &&
-                                tree.readText(main).includes('ngExpressEngine')) {
-                                serverMainFiles.set(main, outputPath);
-                            }
-                        }
-                    }
-                    // Replace all import specifiers in all files.
-                    let hasExpressTokens = false;
-                    const root = project.sourceRoot ?? `${project.root}/src`;
-                    const tokensFilePath = `/${root}/express.tokens.ts`;
-                    for (const file of visit(tree.getDir(root))) {
-                        const [path, content] = file;
-                        let updatedContent = content;
-                        // Check if file is importing tokens
-                        if (content.includes('@nguniversal/express-engine/tokens')) {
-                            hasExpressTokens ||= true;
-                            let tokensFileRelativePath = (0, posix_1.relative)((0, posix_1.dirname)(path), tokensFilePath);
-                            if (tokensFileRelativePath.charAt(0) !== '.') {
-                                tokensFileRelativePath = './' + tokensFileRelativePath;
-                            }
-                            updatedContent = updatedContent.replaceAll('@nguniversal/express-engine/tokens', tokensFileRelativePath.slice(0, -3));
-                        }
-                        updatedContent = updatedContent.replaceAll(NGUNIVERSAL_PACKAGE_REGEXP, '@angular/ssr');
-                        tree.overwrite(path, updatedContent);
-                    }
-                    // Replace server file and add tokens file if needed
-                    for (const [path, outputPath] of serverMainFiles.entries()) {
-                        tree.rename(path, path + '.bak');
-                        tree.create(path, getServerFileContents(outputPath, hasExpressTokens));
-                        if (hasExpressTokens) {
-                            tree.create(tokensFilePath, TOKENS_FILE_CONTENT);
-                        }
-                    }
-                }
-                // Remove universal packages from deps.
-                for (const name of UNIVERSAL_PACKAGES) {
-                    (0, dependencies_1.removePackageJsonDependency)(tree, name);
-                }
-            },
-            (0, utility_1.addDependency)('@angular/ssr', latest_versions_1.latestVersions.AngularSSR),
-        ]);
-    };
-}
-exports.default = default_1;
-const TOKENS_FILE_CONTENT = `
-import { InjectionToken } from '@angular/core';
-import { Request, Response } from 'express';
-
-export const REQUEST = new InjectionToken<Request>('REQUEST');
-export const RESPONSE = new InjectionToken<Response>('RESPONSE');
-`;
-function getServerFileContents(outputPath, hasExpressTokens) {
-    return (`
-import 'zone.js/node';
-
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
-import * as express from 'express';
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
-import bootstrap from './src/main.server';` +
-        (hasExpressTokens ? `\nimport { REQUEST, RESPONSE } from './src/express.tokens';` : '') +
-        `
-
-// The Express app is exported so that it can be used by serverless Functions.
-export function app(): express.Express {
-  const server = express();
-  const distFolder = join(process.cwd(), '${outputPath}');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
-    ? join(distFolder, 'index.original.html')
-    : join(distFolder, 'index.html');
-
-  const commonEngine = new CommonEngine();
-
-  server.set('view engine', 'html');
-  server.set('views', distFolder);
-
-  // Example Express Rest API endpoints
-  // server.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
-
-  // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
-    const { protocol, originalUrl, baseUrl, headers } = req;
-
-    commonEngine
-      .render({
-        bootstrap,
-        documentFilePath: indexHtml,
-        url: \`\${protocol}://\${headers.host}\${originalUrl}\`,
-        publicPath: distFolder,
-        providers: [
-          { provide: APP_BASE_HREF, useValue: baseUrl },` +
-        (hasExpressTokens
-            ? '\n          { provide: RESPONSE, useValue: res },\n          { provide: REQUEST, useValue: req }\n'
-            : '') +
-        `],
-      })
-      .then((html) => res.send(html))
-      .catch((err) => next(err));
-  });
-
-  return server;
-}
-
-function run(): void {
-  const port = process.env['PORT'] || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(\`Node Express server listening on http://localhost:\${port}\`);
-  });
-}
-
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-const moduleFilename = mainModule && mainModule.filename || '';
-if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
-  run();
-}
-
-export default bootstrap;
-`);
-}

package/migrations/update-17/update-workspace-config.d.ts

@@ -1,9 +0,0 @@
-/**
- * @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.io/license
- */
-import { Rule } from '@angular-devkit/schematics';
-export default function (): Rule;

package/migrations/update-17/update-workspace-config.js

@@ -1,32 +0,0 @@
-"use strict";
-/**
- * @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.io/license
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const workspace_1 = require("../../utility/workspace");
-const workspace_models_1 = require("../../utility/workspace-models");
-function default_1() {
-    return (0, workspace_1.updateWorkspace)((workspace) => {
-        for (const [, project] of workspace.projects) {
-            if (project.extensions.projectType !== workspace_models_1.ProjectType.Application) {
-                // Only interested in application projects since these changes only effects application builders
-                continue;
-            }
-            for (const [, target] of project.targets) {
-                if (target.builder === workspace_models_1.Builders.ExtractI18n || target.builder === workspace_models_1.Builders.DevServer) {
-                    for (const [, options] of (0, workspace_1.allTargetOptions)(target, false)) {
-                        if (options['browserTarget'] !== undefined) {
-                            options['buildTarget'] = options['browserTarget'];
-                            delete options['browserTarget'];
-                        }
-                    }
-                }
-            }
-        }
-    });
-}
-exports.default = default_1;