@schematics/angular 17.1.0-next.2 → 17.1.0-rc.0

package/application/index.js

@@ -77,6 +77,7 @@ function default_1(options) {
             options.ssr
                 ? (0, schematics_1.schematic)('ssr', {
                     project: options.name,
+                    skipInstall: true,
                 })
                 : (0, schematics_1.noop)(),
             options.skipPackageJson ? (0, schematics_1.noop)() : addDependenciesToPackageJson(options),

package/migrations/update-17/use-application-builder.js

@@ -9,7 +9,7 @@
 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 posix_1 = require("node:path/posix");
 const json_file_1 = require("../../utility/json-file");
 const workspace_1 = require("../../utility/workspace");
 const workspace_models_1 = require("../../utility/workspace-models");
@@ -40,17 +40,42 @@ function default_1() {
                 if (usesNoLongerSupportedOptions(options, context, name)) {
                     continue;
                 }
+                if (options['index'] === '') {
+                    options['index'] = false;
+                }
                 // 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['server'] = (0, posix_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\/?$/, '');
+                let outputPath = options['outputPath'];
+                if (typeof outputPath === 'string') {
+                    if (!/\/browser\/?$/.test(outputPath)) {
+                        // TODO: add prompt.
+                        context.logger.warn(`The output location of the browser build has been updated from "${outputPath}" to ` +
+                            `"${(0, posix_1.join)(outputPath, 'browser')}". ` +
+                            'You might need to adjust your deployment pipeline or, as an alternative, ' +
+                            'set outputPath.browser to "" in order to maintain the previous functionality.');
+                    }
+                    else {
+                        outputPath = outputPath.replace(/\/browser\/?$/, '');
+                    }
+                    options['outputPath'] = {
+                        base: outputPath,
+                    };
+                    if (typeof options['resourcesOutputPath'] === 'string') {
+                        const media = options['resourcesOutputPath'].replaceAll('/', '');
+                        if (media && media !== 'media') {
+                            options['outputPath'] = {
+                                base: outputPath,
+                                media: media,
+                            };
+                        }
+                    }
                 }
                 // Delete removed options
                 delete options['deployUrl'];
@@ -132,10 +157,5 @@ function usesNoLongerSupportedOptions({ deployUrl, resourcesOutputPath }, contex
         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/module/index.js

@@ -142,6 +142,7 @@ function default_1(options) {
             name: options.name,
             path: options.path,
             project: options.project,
+            standalone: false,
         };
         return (0, schematics_1.chain)([
             !isLazyLoadedModuleGen ? addImportToNgModule(options) : (0, schematics_1.noop)(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematics/angular",
-  "version": "17.1.0-next.2",
+  "version": "17.1.0-rc.0",
   "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.2",
-    "@angular-devkit/schematics": "17.1.0-next.2",
+    "@angular-devkit/core": "17.1.0-rc.0",
+    "@angular-devkit/schematics": "17.1.0-rc.0",
     "jsonc-parser": "3.2.0"
   },
   "repository": {

package/ssr/files/application-builder/server.ts.template

@@ -9,7 +9,7 @@ import <% if (isStandalone) { %>bootstrap<% } else { %>AppServerModule<% } %> fr
 export function app(): express.Express {
   const server = express();
   const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const browserDistFolder = resolve(serverDistFolder, '../<%= browserDistDirectory %>');
   const indexHtml = join(serverDistFolder, 'index.server.html');
 
   const commonEngine = new CommonEngine();
@@ -19,7 +19,7 @@ export function app(): express.Express {
 
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
+  // Serve static files from /<%= browserDistDirectory %>
   server.get('*.*', express.static(browserDistFolder, {
     maxAge: '1y'
   }));

package/ssr/index.js

@@ -9,6 +9,7 @@
 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 utility_1 = require("../utility");
 const json_file_1 = require("../utility/json-file");
 const latest_versions_1 = require("../utility/latest-versions");
@@ -19,20 +20,55 @@ const workspace_1 = require("../utility/workspace");
 const workspace_models_1 = require("../utility/workspace-models");
 const SERVE_SSR_TARGET_NAME = 'serve-ssr';
 const PRERENDER_TARGET_NAME = 'prerender';
-async function getOutputPath(host, projectName, target) {
+const DEFAULT_BROWSER_DIR = 'browser';
+const DEFAULT_MEDIA_DIR = 'media';
+const DEFAULT_SERVER_DIR = 'server';
+async function getLegacyOutputPaths(host, projectName, target) {
     // Generate new output paths
     const workspace = await (0, utility_1.readWorkspace)(host);
     const project = workspace.projects.get(projectName);
-    const serverTarget = project?.targets.get(target);
-    if (!serverTarget || !serverTarget.options) {
+    const architectTarget = project?.targets.get(target);
+    if (!architectTarget?.options) {
         throw new schematics_1.SchematicsException(`Cannot find 'options' for ${projectName} ${target} target.`);
     }
-    const { outputPath } = serverTarget.options;
+    const { outputPath } = architectTarget.options;
     if (typeof outputPath !== 'string') {
         throw new schematics_1.SchematicsException(`outputPath for ${projectName} ${target} target is not a string.`);
     }
     return outputPath;
 }
+async function getApplicationBuilderOutputPaths(host, projectName) {
+    // Generate new output paths
+    const target = 'build';
+    const workspace = await (0, utility_1.readWorkspace)(host);
+    const project = workspace.projects.get(projectName);
+    const architectTarget = project?.targets.get(target);
+    if (!architectTarget?.options) {
+        throw new schematics_1.SchematicsException(`Cannot find 'options' for ${projectName} ${target} target.`);
+    }
+    const { outputPath } = architectTarget.options;
+    if (outputPath === null || outputPath === undefined) {
+        throw new schematics_1.SchematicsException(`outputPath for ${projectName} ${target} target is undeined or null.`);
+    }
+    const defaultDirs = {
+        server: DEFAULT_SERVER_DIR,
+        browser: DEFAULT_BROWSER_DIR,
+    };
+    if (outputPath && (0, core_1.isJsonObject)(outputPath)) {
+        return {
+            ...defaultDirs,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ...outputPath,
+        };
+    }
+    if (typeof outputPath !== 'string') {
+        throw new schematics_1.SchematicsException(`outputPath for ${projectName} ${target} target is not a string.`);
+    }
+    return {
+        base: outputPath,
+        ...defaultDirs,
+    };
+}
 function addScriptsRule({ project }, isUsingApplicationBuilder) {
     return async (host) => {
         const pkgPath = '/package.json';
@@ -41,12 +77,12 @@ function addScriptsRule({ project }, isUsingApplicationBuilder) {
             throw new schematics_1.SchematicsException('Could not find package.json');
         }
         if (isUsingApplicationBuilder) {
-            const distPath = await getOutputPath(host, project, 'build');
+            const { base, server } = await getApplicationBuilderOutputPaths(host, project);
             pkg.scripts ??= {};
-            pkg.scripts[`serve:ssr:${project}`] = `node ${distPath}/server/server.mjs`;
+            pkg.scripts[`serve:ssr:${project}`] = `node ${node_path_1.posix.join(base, server)}/server.mjs`;
         }
         else {
-            const serverDist = await getOutputPath(host, project, 'server');
+            const serverDist = await getLegacyOutputPaths(host, project, 'server');
             pkg.scripts = {
                 ...pkg.scripts,
                 'dev:ssr': `ng run ${project}:${SERVE_SSR_TARGET_NAME}`,
@@ -79,14 +115,30 @@ function updateApplicationBuilderTsConfigRule(options) {
         }
     };
 }
-function updateApplicationBuilderWorkspaceConfigRule(projectRoot, options) {
+function updateApplicationBuilderWorkspaceConfigRule(projectRoot, options, { logger }) {
     return (0, utility_1.updateWorkspace)((workspace) => {
         const buildTarget = workspace.projects.get(options.project)?.targets.get('build');
         if (!buildTarget) {
             return;
         }
+        let outputPath = buildTarget.options?.outputPath;
+        if (outputPath && (0, core_1.isJsonObject)(outputPath)) {
+            if (outputPath.browser === '') {
+                const base = outputPath.base;
+                logger.warn(`The output location of the browser build has been updated from "${base}" to "${node_path_1.posix.join(base, DEFAULT_BROWSER_DIR)}".
+          You might need to adjust your deployment pipeline.`);
+                if ((outputPath.media && outputPath.media !== DEFAULT_MEDIA_DIR) ||
+                    (outputPath.server && outputPath.server !== DEFAULT_SERVER_DIR)) {
+                    delete outputPath.browser;
+                }
+                else {
+                    outputPath = outputPath.base;
+                }
+            }
+        }
         buildTarget.options = {
             ...buildTarget.options,
+            outputPath,
             prerender: true,
             ssr: {
                 entry: (0, core_1.join)((0, core_1.normalize)(projectRoot), 'server.ts'),
@@ -169,36 +221,43 @@ function updateWebpackBuilderServerTsConfigRule(options) {
         }
     };
 }
-function addDependencies(isUsingApplicationBuilder) {
+function addDependencies({ skipInstall }, isUsingApplicationBuilder) {
+    const install = skipInstall ? utility_1.InstallBehavior.None : utility_1.InstallBehavior.Auto;
     const rules = [
         (0, utility_1.addDependency)('@angular/ssr', latest_versions_1.latestVersions.AngularSSR, {
             type: utility_1.DependencyType.Default,
+            install,
         }),
         (0, utility_1.addDependency)('express', latest_versions_1.latestVersions['express'], {
             type: utility_1.DependencyType.Default,
+            install,
         }),
         (0, utility_1.addDependency)('@types/express', latest_versions_1.latestVersions['@types/express'], {
             type: utility_1.DependencyType.Dev,
+            install,
         }),
     ];
     if (!isUsingApplicationBuilder) {
         rules.push((0, utility_1.addDependency)('browser-sync', latest_versions_1.latestVersions['browser-sync'], {
             type: utility_1.DependencyType.Dev,
+            install,
         }));
     }
     return (0, schematics_1.chain)(rules);
 }
 function addServerFile(options, isStandalone) {
     return async (host) => {
+        const projectName = options.project;
         const workspace = await (0, utility_1.readWorkspace)(host);
-        const project = workspace.projects.get(options.project);
+        const project = workspace.projects.get(projectName);
         if (!project) {
-            throw new schematics_1.SchematicsException(`Invalid project name (${options.project})`);
+            throw new schematics_1.SchematicsException(`Invalid project name (${projectName})`);
         }
-        const browserDistDirectory = await getOutputPath(host, options.project, 'build');
-        return (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)(`./files/${project?.targets?.get('build')?.builder === workspace_models_1.Builders.Application
-            ? 'application-builder'
-            : 'server-builder'}`), [
+        const isUsingApplicationBuilder = project?.targets?.get('build')?.builder === workspace_models_1.Builders.Application;
+        const browserDistDirectory = isUsingApplicationBuilder
+            ? (await getApplicationBuilderOutputPaths(host, projectName)).browser
+            : await getLegacyOutputPaths(host, projectName, 'build');
+        return (0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)(`./files/${isUsingApplicationBuilder ? 'application-builder' : 'server-builder'}`), [
             (0, schematics_1.applyTemplates)({
                 ...core_1.strings,
                 ...options,
@@ -210,7 +269,7 @@ function addServerFile(options, isStandalone) {
     };
 }
 function default_1(options) {
-    return async (host) => {
+    return async (host, context) => {
         const browserEntryPoint = await (0, util_1.getMainFilePath)(host, options.project);
         const isStandalone = (0, ng_ast_utils_1.isStandaloneApp)(host, browserEntryPoint);
         const workspace = await (0, workspace_1.getWorkspace)(host);
@@ -226,7 +285,7 @@ function default_1(options) {
             }),
             ...(isUsingApplicationBuilder
                 ? [
-                    updateApplicationBuilderWorkspaceConfigRule(clientProject.root, options),
+                    updateApplicationBuilderWorkspaceConfigRule(clientProject.root, options, context),
                     updateApplicationBuilderTsConfigRule(options),
                 ]
                 : [
@@ -235,7 +294,7 @@ function default_1(options) {
                 ]),
             addServerFile(options, isStandalone),
             addScriptsRule(options, isUsingApplicationBuilder),
-            addDependencies(isUsingApplicationBuilder),
+            addDependencies(options, isUsingApplicationBuilder),
         ]);
     };
 }

package/utility/ast-utils.js

@@ -324,7 +324,7 @@ function addSymbolToNgModuleMetadata(source, ngModulePath, metadataField, symbol
         !ts.isArrayLiteralExpression(assignment.initializer)) {
         return [];
     }
-    let expresssion;
+    let expression;
     const assignmentInit = assignment.initializer;
     const elements = assignmentInit.elements;
     if (elements.length) {
@@ -332,21 +332,21 @@ function addSymbolToNgModuleMetadata(source, ngModulePath, metadataField, symbol
         if (symbolsArray.includes(core_1.tags.oneLine `${symbolName}`)) {
             return [];
         }
-        expresssion = elements[elements.length - 1];
+        expression = elements[elements.length - 1];
     }
     else {
-        expresssion = assignmentInit;
+        expression = assignmentInit;
     }
     let toInsert;
-    let position = expresssion.getEnd();
-    if (ts.isArrayLiteralExpression(expresssion)) {
+    let position = expression.getEnd();
+    if (ts.isArrayLiteralExpression(expression)) {
         // We found the field but it's empty. Insert it just before the `]`.
         position--;
         toInsert = `\n${core_1.tags.indentBy(4) `${symbolName}`}\n  `;
     }
     else {
         // Get the indentation of the last element, if any.
-        const text = expresssion.getFullText(source);
+        const text = expression.getFullText(source);
         const matches = text.match(/^(\r?\n)(\s*)/);
         if (matches) {
             toInsert = `,${matches[1]}${core_1.tags.indentBy(matches[2].length) `${symbolName}`}`;

package/utility/latest-versions/package.json

@@ -6,7 +6,7 @@
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
-    "browser-sync": "^2.29.3",
+    "browser-sync": "^3.0.0",
     "express": "^4.18.2",
     "jasmine-core": "~5.1.0",
     "jasmine-spec-reporter": "~7.0.0",

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.2',
-    AngularSSR: '^17.1.0-next.2',
+    DevkitBuildAngular: '^17.1.0-rc.0',
+    AngularSSR: '^17.1.0-rc.0',
 };

package/utility/workspace-models.d.ts

@@ -66,7 +66,11 @@ export interface BrowserBuilderOptions extends BrowserBuilderBaseOptions {
     webWorkerTsConfig?: string;
 }
 export interface ServeBuilderOptions {
+    /**
+     * @deprecated not used since version 17.0.0. Use the property "buildTarget" instead.
+     */
     browserTarget: string;
+    buildTarget?: string;
 }
 export interface LibraryBuilderOptions {
     tsConfig: string;