@schematics/angular 17.1.0-next.0 → 17.1.0-next.1

package/migrations/migration-collection.json

@@ -14,6 +14,17 @@
       "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",
+      "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/add-browser-sync-dependency.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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

@@ -0,0 +1,36 @@
+"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/use-application-builder.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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/use-application-builder.js

@@ -0,0 +1,141 @@
+"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 core_1 = require("@angular-devkit/core");
+const schematics_1 = require("@angular-devkit/schematics");
+const node_path_1 = require("node:path");
+const json_file_1 = require("../../utility/json-file");
+const workspace_1 = require("../../utility/workspace");
+const workspace_models_1 = require("../../utility/workspace-models");
+function default_1() {
+    return async (tree, context) => {
+        const rules = [];
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        for (const [name, 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;
+            }
+            const buildTarget = project.targets.get('build');
+            if (!buildTarget || buildTarget.builder === workspace_models_1.Builders.Application) {
+                continue;
+            }
+            if (buildTarget.builder !== workspace_models_1.Builders.BrowserEsbuild &&
+                buildTarget.builder !== workspace_models_1.Builders.Browser) {
+                context.logger.error(`Cannot update project "${name}" to use the application builder.` +
+                    ` Only "${workspace_models_1.Builders.BrowserEsbuild}" and "${workspace_models_1.Builders.Browser}" can be automatically migrated.`);
+                continue;
+            }
+            // Update builder target and options
+            buildTarget.builder = workspace_models_1.Builders.Application;
+            const hasServerTarget = project.targets.has('server');
+            for (const [, options] of (0, workspace_1.allTargetOptions)(buildTarget, false)) {
+                // Show warnings for using no longer supported options
+                if (usesNoLongerSupportedOptions(options, context, name)) {
+                    continue;
+                }
+                // Rename and transform options
+                options['browser'] = options['main'];
+                if (hasServerTarget && typeof options['browser'] === 'string') {
+                    options['server'] = (0, node_path_1.dirname)(options['browser']) + '/main.server.ts';
+                }
+                options['serviceWorker'] = options['ngswConfigPath'] ?? options['serviceWorker'];
+                if (typeof options['polyfills'] === 'string') {
+                    options['polyfills'] = [options['polyfills']];
+                }
+                if (typeof options['outputPath'] === 'string') {
+                    options['outputPath'] = options['outputPath']?.replace(/\/browser\/?$/, '');
+                }
+                // Delete removed options
+                delete options['deployUrl'];
+                delete options['vendorChunk'];
+                delete options['commonChunk'];
+                delete options['resourcesOutputPath'];
+                delete options['buildOptimizer'];
+                delete options['main'];
+                delete options['ngswConfigPath'];
+            }
+            // Merge browser and server tsconfig
+            if (hasServerTarget) {
+                const browserTsConfig = buildTarget?.options?.tsConfig;
+                const serverTsConfig = project.targets.get('server')?.options?.tsConfig;
+                if (typeof browserTsConfig !== 'string') {
+                    throw new schematics_1.SchematicsException(`Cannot update project "${name}" to use the application builder` +
+                        ` as the browser tsconfig cannot be located.`);
+                }
+                if (typeof serverTsConfig !== 'string') {
+                    throw new schematics_1.SchematicsException(`Cannot update project "${name}" to use the application builder` +
+                        ` as the server tsconfig cannot be located.`);
+                }
+                const browserJson = new json_file_1.JSONFile(tree, browserTsConfig);
+                const serverJson = new json_file_1.JSONFile(tree, serverTsConfig);
+                const filesPath = ['files'];
+                const files = new Set([
+                    ...(browserJson.get(filesPath) ?? []),
+                    ...(serverJson.get(filesPath) ?? []),
+                ]);
+                // Server file will be added later by the means of the ssr schematic.
+                files.delete('server.ts');
+                browserJson.modify(filesPath, Array.from(files));
+                const typesPath = ['compilerOptions', 'types'];
+                browserJson.modify(typesPath, Array.from(new Set([
+                    ...(browserJson.get(typesPath) ?? []),
+                    ...(serverJson.get(typesPath) ?? []),
+                ])));
+                // Delete server tsconfig
+                tree.delete(serverTsConfig);
+            }
+            // Update main tsconfig
+            const rootJson = new json_file_1.JSONFile(tree, 'tsconfig.json');
+            rootJson.modify(['compilerOptions', 'esModuleInterop'], true);
+            rootJson.modify(['compilerOptions', 'downlevelIteration'], undefined);
+            rootJson.modify(['compilerOptions', 'allowSyntheticDefaultImports'], undefined);
+            // Update server file
+            const ssrMainFile = project.targets.get('server')?.options?.['main'];
+            if (typeof ssrMainFile === 'string') {
+                tree.delete(ssrMainFile);
+                rules.push((0, schematics_1.externalSchematic)('@schematics/angular', 'ssr', {
+                    project: name,
+                    skipInstall: true,
+                }));
+            }
+            // Delete package.json helper scripts
+            const pkgJson = new json_file_1.JSONFile(tree, 'package.json');
+            ['build:ssr', 'dev:ssr', 'serve:ssr', 'prerender'].forEach((s) => pkgJson.remove(['scripts', s]));
+            // Delete all redundant targets
+            for (const [key, target] of project.targets) {
+                switch (target.builder) {
+                    case workspace_models_1.Builders.Server:
+                    case workspace_models_1.Builders.Prerender:
+                    case workspace_models_1.Builders.AppShell:
+                    case workspace_models_1.Builders.SsrDevServer:
+                        project.targets.delete(key);
+                        break;
+                }
+            }
+        }
+        // Save workspace changes
+        await core_1.workspaces.writeWorkspace(workspace, new workspace_1.TreeWorkspaceHost(tree));
+        return (0, schematics_1.chain)(rules);
+    };
+}
+exports.default = default_1;
+function usesNoLongerSupportedOptions({ deployUrl, resourcesOutputPath }, 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.`);
+    }
+    if (typeof resourcesOutputPath === 'string' && /^\/?media\/?$/.test(resourcesOutputPath)) {
+        hasUsage = true;
+        context.logger.warn(`Skipping migration for project "${projectName}". "resourcesOutputPath" option is not available in the application builder.` +
+            `Media files will be output into a "media" directory within the output location.`);
+    }
+    return hasUsage;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematics/angular",
-  "version": "17.1.0-next.0",
+  "version": "17.1.0-next.1",
   "description": "Schematics specific to Angular",
   "homepage": "https://github.com/angular/angular-cli",
   "keywords": [
@@ -23,8 +23,8 @@
   },
   "schematics": "./collection.json",
   "dependencies": {
-    "@angular-devkit/core": "17.1.0-next.0",
-    "@angular-devkit/schematics": "17.1.0-next.0",
+    "@angular-devkit/core": "17.1.0-next.1",
+    "@angular-devkit/schematics": "17.1.0-next.1",
     "jsonc-parser": "3.2.0"
   },
   "repository": {

package/ssr/index.js

@@ -169,8 +169,8 @@ function updateWebpackBuilderServerTsConfigRule(options) {
         }
     };
 }
-function addDependencies() {
-    return (0, schematics_1.chain)([
+function addDependencies(isUsingApplicationBuilder) {
+    const rules = [
         (0, utility_1.addDependency)('@angular/ssr', latest_versions_1.latestVersions.AngularSSR, {
             type: utility_1.DependencyType.Default,
         }),
@@ -180,7 +180,13 @@ function addDependencies() {
         (0, utility_1.addDependency)('@types/express', latest_versions_1.latestVersions['@types/express'], {
             type: utility_1.DependencyType.Dev,
         }),
-    ]);
+    ];
+    if (!isUsingApplicationBuilder) {
+        rules.push((0, utility_1.addDependency)('browser-sync', latest_versions_1.latestVersions['browser-sync'], {
+            type: utility_1.DependencyType.Dev,
+        }));
+    }
+    return (0, schematics_1.chain)(rules);
 }
 function addServerFile(options, isStandalone) {
     return async (host) => {
@@ -214,7 +220,7 @@ function default_1(options) {
         }
         const isUsingApplicationBuilder = clientProject.targets.get('build')?.builder === workspace_models_1.Builders.Application;
         return (0, schematics_1.chain)([
-            (0, schematics_1.externalSchematic)('@schematics/angular', 'server', {
+            (0, schematics_1.schematic)('server', {
                 ...options,
                 skipInstall: true,
             }),
@@ -229,7 +235,7 @@ function default_1(options) {
                 ]),
             addServerFile(options, isStandalone),
             addScriptsRule(options, isUsingApplicationBuilder),
-            addDependencies(),
+            addDependencies(isUsingApplicationBuilder),
         ]);
     };
 }

package/utility/latest-versions/package.json

@@ -6,6 +6,7 @@
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
+    "browser-sync": "^2.29.3",
     "express": "^4.18.2",
     "jasmine-core": "~5.1.0",
     "jasmine-spec-reporter": "~7.0.0",
@@ -19,7 +20,7 @@
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "ts-node": "~10.9.0",
-    "typescript": "~5.2.2",
+    "typescript": "~5.3.2",
     "zone.js": "~0.14.2"
   }
 }

package/utility/latest-versions.js

@@ -14,6 +14,6 @@ exports.latestVersions = {
     ...require('./latest-versions/package.json')['dependencies'],
     // As Angular CLI works with same minor versions of Angular Framework, a tilde match for the current
     Angular: '^17.1.0-next.0',
-    DevkitBuildAngular: '^17.1.0-next.0',
-    AngularSSR: '^17.1.0-next.0',
+    DevkitBuildAngular: '^17.1.0-next.1',
+    AngularSSR: '^17.1.0-next.1',
 };

package/utility/workspace-models.d.ts

@@ -20,6 +20,8 @@ export declare enum Builders {
     AppShell = "@angular-devkit/build-angular:app-shell",
     Server = "@angular-devkit/build-angular:server",
     Browser = "@angular-devkit/build-angular:browser",
+    SsrDevServer = "@angular-devkit/build-angular:ssr-dev-server",
+    Prerender = "@angular-devkit/build-angular:prerender",
     BrowserEsbuild = "@angular-devkit/build-angular:browser-esbuild",
     Karma = "@angular-devkit/build-angular:karma",
     TsLint = "@angular-devkit/build-angular:tslint",

package/utility/workspace-models.js

@@ -25,6 +25,8 @@ var Builders;
     Builders["AppShell"] = "@angular-devkit/build-angular:app-shell";
     Builders["Server"] = "@angular-devkit/build-angular:server";
     Builders["Browser"] = "@angular-devkit/build-angular:browser";
+    Builders["SsrDevServer"] = "@angular-devkit/build-angular:ssr-dev-server";
+    Builders["Prerender"] = "@angular-devkit/build-angular:prerender";
     Builders["BrowserEsbuild"] = "@angular-devkit/build-angular:browser-esbuild";
     Builders["Karma"] = "@angular-devkit/build-angular:karma";
     Builders["TsLint"] = "@angular-devkit/build-angular:tslint";

package/utility/workspace.d.ts

@@ -10,6 +10,17 @@ import { Rule, Tree } from '@angular-devkit/schematics';
 export type WorkspaceDefinition = workspaces.WorkspaceDefinition;
 export type ProjectDefinition = workspaces.ProjectDefinition;
 export type TargetDefinition = workspaces.TargetDefinition;
+/**
+ * A {@link workspaces.WorkspaceHost} backed by a Schematics {@link Tree} instance.
+ */
+export declare class TreeWorkspaceHost implements workspaces.WorkspaceHost {
+    private readonly tree;
+    constructor(tree: Tree);
+    readFile(path: string): Promise<string>;
+    writeFile(path: string, data: string): Promise<void>;
+    isDirectory(path: string): Promise<boolean>;
+    isFile(path: string): Promise<boolean>;
+}
 /**
  * Updates the workspace file (`angular.json`) found within the root of the schematic's tree.
  * The workspace object model can be directly modified within the provided updater function

package/utility/workspace.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.allTargetOptions = exports.allWorkspaceTargets = exports.createDefaultPath = exports.buildDefaultPath = exports.writeWorkspace = exports.getWorkspace = exports.updateWorkspace = void 0;
+exports.allTargetOptions = exports.allWorkspaceTargets = exports.createDefaultPath = exports.buildDefaultPath = exports.writeWorkspace = exports.getWorkspace = exports.updateWorkspace = exports.TreeWorkspaceHost = void 0;
 const core_1 = require("@angular-devkit/core");
 const schematics_1 = require("@angular-devkit/schematics");
 const workspace_models_1 = require("./workspace-models");
@@ -39,6 +39,7 @@ class TreeWorkspaceHost {
         return this.tree.exists(path);
     }
 }
+exports.TreeWorkspaceHost = TreeWorkspaceHost;
 /**
  * Updates the workspace file (`angular.json`) found within the root of the schematic's tree.
  * The workspace object model can be directly modified within the provided updater function
@@ -50,11 +51,10 @@ class TreeWorkspaceHost {
  * workspace. A {@link WorkspaceDefinition} is provided as the first argument to the function.
  */
 function updateWorkspace(updater) {
-    return async (tree) => {
-        const host = new TreeWorkspaceHost(tree);
-        const { workspace } = await core_1.workspaces.readWorkspace(DEFAULT_WORKSPACE_PATH, host);
+    return async (host) => {
+        const workspace = await getWorkspace(host);
         const result = await updater(workspace);
-        await core_1.workspaces.writeWorkspace(workspace, host);
+        await core_1.workspaces.writeWorkspace(workspace, new TreeWorkspaceHost(host));
         return result || schematics_1.noop;
     };
 }

package/workspace/files/tsconfig.json.template

@@ -9,6 +9,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,<% } %>
+    "skipLibCheck": true,
     "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,