@nx/angular 20.2.0-canary.20241130-ec5a5e6 → 20.2.0-canary.20241204-75b2080

package/src/executors/package/package.impl.d.ts

@@ -9,8 +9,8 @@ import type { BuildAngularLibraryExecutorOptions } from './schema';
  */
 export declare function createLibraryExecutor(initializeNgPackagr: (options: BuildAngularLibraryExecutorOptions, context: ExecutorContext, projectDependencies: DependentBuildableProjectNode[]) => Promise<NgPackagr>): (options: BuildAngularLibraryExecutorOptions, context: ExecutorContext) => AsyncGenerator<{
     success: boolean;
-}, any, undefined>;
+}, any, any>;
 export declare const packageExecutor: (options: BuildAngularLibraryExecutorOptions, context: ExecutorContext) => AsyncGenerator<{
     success: boolean;
-}, any, undefined>;
+}, any, any>;
 export default packageExecutor;

package/src/executors/package/package.impl.js

@@ -11,7 +11,7 @@ const angular_version_utils_1 = require("../utilities/angular-version-utils");
 const typescript_1 = require("../utilities/typescript");
 const ng_packagr_1 = require("./ng-packagr-adjustments/ng-packagr");
 async function initializeNgPackagr(options, context, projectDependencies) {
-    const ngPackagr = await (0, ng_packagr_1.getNgPackagrInstance)(options);
+    const ngPackagr = await (0, ng_packagr_1.getNgPackagrInstance)();
     ngPackagr.forProject((0, path_1.resolve)(context.root, options.project));
     if (options.tsConfig) {
         const remappedTsConfigFilePath = (0, buildable_libs_utils_1.createTmpTsConfig)((0, path_1.join)(context.root, options.tsConfig), context.root, context.projectsConfigurations.projects[context.projectName].root, projectDependencies);

package/src/executors/package/schema.d.ts

@@ -1,6 +1,4 @@
 import type { NgPackagrBuilderOptions } from '@angular-devkit/build-angular';
 
 export interface BuildAngularLibraryExecutorOptions
-  extends NgPackagrBuilderOptions {
-  tailwindConfig?: string;
-}
+  extends NgPackagrBuilderOptions {}

package/src/executors/package/schema.json

@@ -7,10 +7,6 @@
   "cli": "nx",
   "type": "object",
   "presets": [
-    {
-      "name": "Publishable Library with Tailwind",
-      "keys": ["project", "tailwindConfig"]
-    },
     {
       "name": "Updating Project Dependencies for Publishable Library",
       "keys": ["project"]
@@ -36,12 +32,6 @@
     "poll": {
       "type": "number",
       "description": "Enable and define the file watching poll time period in milliseconds. _Note: this is only supported in Angular versions >= 18.0.0_."
-    },
-    "tailwindConfig": {
-      "type": "string",
-      "description": "The full path for the Tailwind configuration file, relative to the workspace root. If not provided and a `tailwind.config.js` file exists in the project or workspace root, it will be used. Otherwise, Tailwind will not be configured. _Note: starting with Angular v17, this option is no longer used and the configuration will be picked up if exists at the project or workspace root_.",
-      "x-completion-type": "file",
-      "x-completion-glob": "tailwind.config@(.js|.cjs|.mjs|.ts)"
     }
   },
   "additionalProperties": false,

package/src/executors/utilities/ng-packagr/{stylesheet-processor.js → pre-v19/stylesheet-processor.js}

@@ -15,10 +15,10 @@ const path_1 = require("path");
 const Piscina = require('piscina');
 const color_1 = require("ng-packagr/lib/utils/color");
 // using this instead of the one from ng-packagr
-const tailwindcss_1 = require("./tailwindcss");
+const tailwindcss_1 = require("../tailwindcss");
 const devkit_1 = require("@nx/devkit");
 const semver_1 = require("semver");
-const angular_version_utils_1 = require("../angular-version-utils");
+const angular_version_utils_1 = require("../../angular-version-utils");
 const maxWorkersVariable = process.env['NG_BUILD_MAX_WORKERS'];
 const maxThreads = typeof maxWorkersVariable === 'string' && maxWorkersVariable !== ''
     ? +maxWorkersVariable

package/src/executors/utilities/ng-packagr/stylesheet-processor.di.js

@@ -3,14 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.STYLESHEET_PROCESSOR = void 0;
 const stylesheet_processor_di_1 = require("ng-packagr/lib/styles/stylesheet-processor.di");
 const angular_version_utils_1 = require("../angular-version-utils");
-const stylesheet_processor_1 = require("./stylesheet-processor");
 exports.STYLESHEET_PROCESSOR = {
     provide: stylesheet_processor_di_1.STYLESHEET_PROCESSOR_TOKEN,
     useFactory: () => {
-        const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
-        return ngPackagrVersion !== '17.2.0'
-            ? stylesheet_processor_1.StylesheetProcessor
-            : stylesheet_processor_1.AsyncStylesheetProcessor;
+        const { major: ngPackagrMajorVersion, version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+        if (ngPackagrMajorVersion >= 19) {
+            const { StylesheetProcessor } = require('./v19+/stylesheet-processor');
+            return StylesheetProcessor;
+        }
+        if (ngPackagrVersion !== '17.2.0') {
+            const { StylesheetProcessor } = require('./pre-v19/stylesheet-processor');
+            return StylesheetProcessor;
+        }
+        const { AsyncStylesheetProcessor, } = require('./pre-v19/stylesheet-processor');
+        return AsyncStylesheetProcessor;
     },
     deps: [],
 };

package/src/executors/utilities/ng-packagr/tailwindcss.d.ts

@@ -1,7 +1 @@
-export interface TailwindSetup {
-    tailwindConfigPath: string;
-    tailwindPackagePath: string;
-}
-export declare function getTailwindSetup(basePath: string, tailwindConfig?: string): TailwindSetup | undefined;
 export declare function getTailwindConfigPath(projectRoot: string, workspaceRoot: string): string | undefined;
-export declare function getTailwindPostCssPlugin({ tailwindConfigPath, tailwindPackagePath, }: TailwindSetup): any;

package/src/executors/utilities/ng-packagr/tailwindcss.js

@@ -1,37 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTailwindSetup = getTailwindSetup;
 exports.getTailwindConfigPath = getTailwindConfigPath;
-exports.getTailwindPostCssPlugin = getTailwindPostCssPlugin;
-const devkit_1 = require("@nx/devkit");
-const devkit_2 = require("@nx/devkit");
 const fs_1 = require("fs");
 const path_1 = require("path");
-function getTailwindSetup(basePath, tailwindConfig) {
-    let tailwindConfigPath = tailwindConfig;
-    if (!tailwindConfigPath) {
-        tailwindConfigPath = getTailwindConfigPath(basePath, devkit_2.workspaceRoot);
-    }
-    // Only load Tailwind CSS plugin if configuration file was found.
-    if (!tailwindConfigPath) {
-        return undefined;
-    }
-    let tailwindPackagePath;
-    try {
-        tailwindPackagePath = require.resolve('tailwindcss');
-    }
-    catch {
-        const relativeTailwindConfigPath = (0, path_1.relative)(devkit_2.workspaceRoot, tailwindConfigPath);
-        devkit_1.logger.warn(`Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
-            ` but the 'tailwindcss' package is not installed.` +
-            ` To enable Tailwind CSS, please install the 'tailwindcss' package.`);
-        return undefined;
-    }
-    if (!tailwindPackagePath) {
-        return undefined;
-    }
-    return { tailwindConfigPath, tailwindPackagePath };
-}
 function getTailwindConfigPath(projectRoot, workspaceRoot) {
     // valid tailwind config files https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/resolveConfigPath.js#L4
     const tailwindConfigFiles = [
@@ -50,6 +21,3 @@ function getTailwindConfigPath(projectRoot, workspaceRoot) {
     }
     return undefined;
 }
-function getTailwindPostCssPlugin({ tailwindConfigPath, tailwindPackagePath, }) {
-    return require(tailwindPackagePath)({ config: tailwindConfigPath });
-}

package/src/executors/utilities/ng-packagr/v19+/stylesheet-processor.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Adapted from the original ng-packagr source.
+ *
+ * Changes made:
+ * - Add the project root to the search directories.
+ */
+import { NgPackageEntryConfig } from 'ng-packagr/ng-entrypoint.schema';
+import { ComponentStylesheetBundler } from 'ng-packagr/lib/styles/component-stylesheets';
+export declare enum CssUrl {
+    inline = "inline",
+    none = "none"
+}
+export declare class StylesheetProcessor extends ComponentStylesheetBundler {
+    protected readonly projectBasePath: string;
+    protected readonly basePath: string;
+    protected readonly cssUrl?: CssUrl;
+    protected readonly includePaths?: string[];
+    protected readonly sass?: NgPackageEntryConfig['lib']['sass'];
+    protected readonly cacheDirectory?: string | false;
+    protected readonly watch?: boolean;
+    constructor(projectBasePath: string, basePath: string, cssUrl?: CssUrl, includePaths?: string[], sass?: NgPackageEntryConfig['lib']['sass'], cacheDirectory?: string | false, watch?: boolean);
+    destroy(): void;
+}

package/src/executors/utilities/ng-packagr/v19+/stylesheet-processor.js

@@ -0,0 +1,93 @@
+"use strict";
+/**
+ * Adapted from the original ng-packagr source.
+ *
+ * Changes made:
+ * - Add the project root to the search directories.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StylesheetProcessor = exports.CssUrl = void 0;
+const tslib_1 = require("tslib");
+const browserslist_1 = tslib_1.__importDefault(require("browserslist"));
+const component_stylesheets_1 = require("ng-packagr/lib/styles/component-stylesheets");
+const postcss_configuration_1 = require("ng-packagr/lib/styles/postcss-configuration");
+const devkit_1 = require("@nx/devkit");
+var CssUrl;
+(function (CssUrl) {
+    CssUrl["inline"] = "inline";
+    CssUrl["none"] = "none";
+})(CssUrl || (exports.CssUrl = CssUrl = {}));
+class StylesheetProcessor extends component_stylesheets_1.ComponentStylesheetBundler {
+    constructor(projectBasePath, basePath, cssUrl, includePaths, sass, cacheDirectory, watch) {
+        // By default, browserslist defaults are too inclusive
+        // https://github.com/browserslist/browserslist/blob/83764ea81ffaa39111c204b02c371afa44a4ff07/index.js#L516-L522
+        // We change the default query to browsers that Angular support.
+        // https://angular.io/guide/browser-support
+        browserslist_1.default.defaults = [
+            'last 2 Chrome versions',
+            'last 1 Firefox version',
+            'last 2 Edge major versions',
+            'last 2 Safari major versions',
+            'last 2 iOS major versions',
+            'Firefox ESR',
+        ];
+        const browserslistData = (0, browserslist_1.default)(undefined, { path: basePath });
+        let searchDirs = (0, postcss_configuration_1.generateSearchDirectories)([projectBasePath]);
+        const postcssConfiguration = (0, postcss_configuration_1.loadPostcssConfiguration)(searchDirs);
+        // (nx-specific): we support loading the TailwindCSS config from the root of the workspace
+        searchDirs = (0, postcss_configuration_1.generateSearchDirectories)([projectBasePath, devkit_1.workspaceRoot]);
+        super({
+            cacheDirectory: cacheDirectory,
+            postcssConfiguration: postcssConfiguration,
+            tailwindConfiguration: postcssConfiguration
+                ? undefined
+                : (0, postcss_configuration_1.getTailwindConfig)(searchDirs, projectBasePath),
+            sass: sass,
+            workspaceRoot: projectBasePath,
+            cssUrl: cssUrl,
+            target: transformSupportedBrowsersToTargets(browserslistData),
+            includePaths: includePaths,
+        }, 'css', watch);
+        this.projectBasePath = projectBasePath;
+        this.basePath = basePath;
+        this.cssUrl = cssUrl;
+        this.includePaths = includePaths;
+        this.sass = sass;
+        this.cacheDirectory = cacheDirectory;
+        this.watch = watch;
+    }
+    destroy() {
+        void super.dispose();
+    }
+}
+exports.StylesheetProcessor = StylesheetProcessor;
+function transformSupportedBrowsersToTargets(supportedBrowsers) {
+    const transformed = [];
+    // https://esbuild.github.io/api/#target
+    const esBuildSupportedBrowsers = new Set([
+        'safari',
+        'firefox',
+        'edge',
+        'chrome',
+        'ios',
+    ]);
+    for (const browser of supportedBrowsers) {
+        let [browserName, version] = browser.split(' ');
+        // browserslist uses the name `ios_saf` for iOS Safari whereas esbuild uses `ios`
+        if (browserName === 'ios_saf') {
+            browserName = 'ios';
+        }
+        // browserslist uses ranges `15.2-15.3` versions but only the lowest is required
+        // to perform minimum supported feature checks. esbuild also expects a single version.
+        [version] = version.split('-');
+        if (esBuildSupportedBrowsers.has(browserName)) {
+            if (browserName === 'safari' && version === 'tp') {
+                // esbuild only supports numeric versions so `TP` is converted to a high number (999) since
+                // a Technology Preview (TP) of Safari is assumed to support all currently known features.
+                version = '999';
+            }
+            transformed.push(browserName + version);
+        }
+    }
+    return transformed.length ? transformed : undefined;
+}

package/src/generators/application/application.js

@@ -61,6 +61,7 @@ async function applicationGenerator(tree, schema) {
             project: options.name,
             standalone: options.standalone,
             skipPackageJson: options.skipPackageJson,
+            serverRouting: options.serverRouting,
         });
     }
     if (!options.skipFormat) {

package/src/generators/application/files/ng-module/src/app/app.component.ts__tpl__

@@ -1,13 +1,12 @@
 import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from '@angular/core';
 
 @Component({
-  selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
+  selector: '<%= rootSelector %>',<% if (setStandaloneFalse) { %>
+  standalone: false,<% } if(!inlineTemplate) { %>
   templateUrl: './app.component.html',<% } else { %>
-  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if (angularMajorVersion < 17) { if(!inlineStyle) { %>
-  styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
   styleUrl: './app.component.<%= style %>',<% } else { %>
-  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
+  styles: ``,<% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
 export class AppComponent {<% if(!minimal) { %>

package/src/generators/application/files/nx-welcome/claimed/ng-module/src/app/nx-welcome.component.ts__tpl__

@@ -1,7 +1,8 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneFalse) { %>
+  standalone: false,<% } %>
   template: `
     <!--
      * * * * * * * * * * * * * * * * * * * * * * * * * * * *

package/src/generators/application/files/nx-welcome/claimed/standalone/src/app/nx-welcome.component.ts__tpl__

@@ -2,8 +2,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
-  standalone: true,
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [CommonModule],
   template: `
     <!--

package/src/generators/application/files/nx-welcome/not-configured/ng-module/src/app/nx-welcome.component.ts__tpl__

@@ -1,7 +1,8 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneFalse) { %>
+  standalone: false,<% } %>
   template: `
     <!--
      * * * * * * * * * * * * * * * * * * * * * * * * * * * *

package/src/generators/application/files/nx-welcome/not-configured/standalone/src/app/nx-welcome.component.ts__tpl__

@@ -2,8 +2,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
-  standalone: true,
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [CommonModule],
   template: `
     <!--

package/src/generators/application/files/nx-welcome/unclaimed/ng-module/src/app/nx-welcome.component.ts__tpl__

@@ -1,7 +1,8 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneFalse) { %>
+  standalone: false,<% } %>
   template: `
     <!--
      * * * * * * * * * * * * * * * * * * * * * * * * * * * *

package/src/generators/application/files/nx-welcome/unclaimed/standalone/src/app/nx-welcome.component.ts__tpl__

@@ -2,8 +2,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
-  standalone: true,
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [CommonModule],
   template: `
     <!--

package/src/generators/application/files/standalone-components/src/app/app.component.ts__tpl__

@@ -2,16 +2,14 @@ import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from
 import { RouterModule } from '@angular/router';<% } %><% if(!minimal) { %>
 import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
 
-@Component({
-  standalone: true,
+@Component({<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [<% if(!minimal) { %>NxWelcomeComponent, <% } %><% if(routing) { %>RouterModule<% } %>],
   selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
   templateUrl: './app.component.html',<% } else { %>
-  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if (angularMajorVersion < 17) { if(!inlineStyle) { %>
-  styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
   styleUrl: './app.component.<%= style %>',<% } else { %>
-  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
+  styles: ``,<% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
 export class AppComponent {<% if(!minimal) { %>

package/src/generators/application/lib/add-serve-static-target.d.ts

@@ -1,3 +1,3 @@
-import { Tree } from '@nx/devkit';
+import { type Tree } from '@nx/devkit';
 import type { NormalizedSchema } from './normalized-schema';
 export declare function addServeStaticTarget(tree: Tree, options: NormalizedSchema, port: number): void;

package/src/generators/application/lib/add-serve-static-target.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addServeStaticTarget = addServeStaticTarget;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
-const version_utils_1 = require("../../utils/version-utils");
 function addServeStaticTarget(tree, options, port) {
     addFileServerTarget(tree, options, 'serve-static', port);
 }
@@ -11,8 +10,7 @@ function addFileServerTarget(tree, options, targetName, e2ePort) {
     if (!options.skipPackageJson) {
         (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': versions_1.nxVersion });
     }
-    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    const isUsingApplicationBuilder = angularMajorVersion >= 17 && options.bundler === 'esbuild';
+    const isUsingApplicationBuilder = options.bundler === 'esbuild';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.name);
     projectConfig.targets[targetName] = {
         executor: '@nx/web:file-server',

package/src/generators/application/lib/create-files.js

@@ -11,7 +11,7 @@ const version_utils_1 = require("../../utils/version-utils");
 const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
 async function createFiles(tree, options, rootOffset) {
     const { major: angularMajorVersion, version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    const isUsingApplicationBuilder = angularMajorVersion >= 17 && options.bundler === 'esbuild';
+    const isUsingApplicationBuilder = options.bundler === 'esbuild';
     const disableModernClassFieldsBehavior = (0, semver_1.lt)(angularVersion, '18.1.0-rc.0');
     const rootSelector = `${options.prefix}-root`;
     (0, selector_1.validateHtmlSelector)(rootSelector);
@@ -38,6 +38,9 @@ async function createFiles(tree, options, rootOffset) {
         disableModernClassFieldsBehavior,
         useEventCoalescing: angularMajorVersion >= 18,
         useRouterTestingModule: angularMajorVersion < 18,
+        // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+        setStandaloneFalse: angularMajorVersion >= 19,
+        setStandaloneTrue: angularMajorVersion < 19,
         connectCloudUrl,
         tutorialUrl: options.standalone
             ? 'https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx-project'

package/src/generators/application/lib/create-project.js

@@ -8,36 +8,29 @@ function createProject(tree, options) {
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const buildExecutor = options.bundler === 'webpack'
         ? '@angular-devkit/build-angular:browser'
-        : angularMajorVersion >= 17
-            ? '@angular-devkit/build-angular:application'
-            : '@angular-devkit/build-angular:browser-esbuild';
-    const buildTargetOptionName = angularMajorVersion >= 17 ? 'buildTarget' : 'browserTarget';
-    const buildMainOptionName = angularMajorVersion >= 17 && options.bundler === 'esbuild'
-        ? 'browser'
-        : 'main';
+        : '@angular-devkit/build-angular:application';
+    const buildMainOptionName = options.bundler === 'esbuild' ? 'browser' : 'main';
     (0, target_defaults_utils_1.addBuildTargetDefaults)(tree, buildExecutor);
     let budgets = undefined;
-    if (options.bundler === 'webpack' || angularMajorVersion >= 17) {
-        if (options.strict) {
-            budgets = [
-                { type: 'initial', maximumWarning: '500kb', maximumError: '1mb' },
-                {
-                    type: 'anyComponentStyle',
-                    maximumWarning: '2kb',
-                    maximumError: '4kb',
-                },
-            ];
-        }
-        else {
-            budgets = [
-                { type: 'initial', maximumWarning: '2mb', maximumError: '5mb' },
-                {
-                    type: 'anyComponentStyle',
-                    maximumWarning: '6kb',
-                    maximumError: '10kb',
-                },
-            ];
-        }
+    if (options.strict) {
+        budgets = [
+            { type: 'initial', maximumWarning: '500kb', maximumError: '1mb' },
+            {
+                type: 'anyComponentStyle',
+                maximumWarning: '4kb',
+                maximumError: '8kb',
+            },
+        ];
+    }
+    else {
+        budgets = [
+            { type: 'initial', maximumWarning: '2mb', maximumError: '5mb' },
+            {
+                type: 'anyComponentStyle',
+                maximumWarning: '6kb',
+                maximumError: '10kb',
+            },
+        ];
     }
     const inlineStyleLanguage = options?.style !== 'css' ? options.style : undefined;
     const project = {
@@ -97,10 +90,10 @@ function createProject(tree, options) {
                     : undefined,
                 configurations: {
                     production: {
-                        [buildTargetOptionName]: `${options.name}:build:production`,
+                        buildTarget: `${options.name}:build:production`,
                     },
                     development: {
-                        [buildTargetOptionName]: `${options.name}:build:development`,
+                        buildTarget: `${options.name}:build:development`,
                     },
                 },
                 defaultConfiguration: 'development',
@@ -108,7 +101,7 @@ function createProject(tree, options) {
             'extract-i18n': {
                 executor: '@angular-devkit/build-angular:extract-i18n',
                 options: {
-                    [buildTargetOptionName]: `${options.name}:build`,
+                    buildTarget: `${options.name}:build`,
                 },
             },
         },

package/src/generators/application/lib/normalize-options.js

@@ -5,7 +5,6 @@ const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const eslint_1 = require("@nx/eslint");
 const test_runners_1 = require("../../../utils/test-runners");
-const version_utils_1 = require("../../utils/version-utils");
 async function normalizeOptions(host, options) {
     await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
     const { projectName: appProjectName, projectRoot: appProjectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
@@ -20,11 +19,7 @@ async function normalizeOptions(host, options) {
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
-    let bundler = options.bundler;
-    if (!bundler) {
-        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(host);
-        bundler = angularMajorVersion >= 17 ? 'esbuild' : 'webpack';
-    }
+    const bundler = options.bundler ?? 'esbuild';
     // Set defaults and then overwrite with user options
     return {
         style: 'css',

package/src/generators/application/schema.d.ts

@@ -29,5 +29,6 @@ export interface Schema {
   minimal?: boolean;
   bundler?: 'webpack' | 'esbuild';
   ssr?: boolean;
+  serverRouting?: boolean;
   nxCloudToken?: string;
 }

package/src/generators/application/schema.json

@@ -169,9 +169,10 @@
       "default": false
     },
     "bundler": {
-      "description": "Bundler to use to build the application. It defaults to `esbuild` for Angular versions >= 17.0.0. Otherwise, it defaults to `webpack`. _Note: The `esbuild` bundler is only considered stable from Angular v17._",
+      "description": "Bundler to use to build the application.",
       "type": "string",
-      "enum": ["webpack", "esbuild"],
+      "enum": ["esbuild", "webpack"],
+      "default": "esbuild",
       "x-prompt": "Which bundler do you want to use to build the application?",
       "x-priority": "important"
     },
@@ -180,6 +181,10 @@
       "type": "boolean",
       "x-prompt": "Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?",
       "default": false
+    },
+    "serverRouting": {
+      "description": "Creates a server application using the Server Routing and App Engine APIs (Developer Preview). _Note: this is only supported in Angular versions >= 19.0.0_.",
+      "type": "boolean"
     }
   },
   "additionalProperties": false,

package/src/generators/component/component.js

@@ -12,6 +12,7 @@ async function componentGenerator(tree, rawOptions) {
         name: options.name,
         fileName: options.fileName,
         symbolName: options.symbolName,
+        exportDefault: options.exportDefault,
         style: options.style,
         inlineStyle: options.inlineStyle,
         inlineTemplate: options.inlineTemplate,
@@ -21,6 +22,9 @@ async function componentGenerator(tree, rawOptions) {
         viewEncapsulation: options.viewEncapsulation,
         displayBlock: options.displayBlock,
         selector: options.selector,
+        // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+        setStandalone: (angularMajorVersion >= 19 && !options.standalone) ||
+            (angularMajorVersion < 19 && options.standalone),
         angularMajorVersion,
         tpl: '',
     });

package/src/generators/component/files/__fileName__.spec.ts__tpl__

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { <%= symbolName %> } from './<%= fileName %>';
+import <% if (exportDefault) { %><%= symbolName %><% } else { %>{ <%= symbolName %> }<% } %> from './<%= fileName %>';
 
 describe('<%= symbolName %>', () => {
   let component: <%= symbolName %>;

package/src/generators/component/files/__fileName__.ts__tpl__

@@ -2,26 +2,18 @@ import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%
 import { CommonModule } from '@angular/common';<% } %>
 
 @Component({<% if(!skipSelector) {%>
-  selector: '<%= selector %>',<%}%><% if(standalone) {%>
-  standalone: true,
+  selector: '<%= selector %>',<%}%><% if (setStandalone) { %>
+  standalone: <%= standalone %>,<% } %><% if(standalone) { %>
   imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
   template: `<p><%= name %> works!</p>`<% } else { %>
-  templateUrl: './<%= fileName %>.html'<% } if (angularMajorVersion < 17) { if(inlineStyle) { %>,
-  styles: [<% if(displayBlock){ %>
-    `
-      :host {
-        display: block;
-      }
-    `<% } %>
-  ]<% } else if (style !== 'none') { %>,
-  styleUrls: ['./<%= fileName %>.<%= style %>']<% } %><% } else { if(inlineStyle) { %>,
+  templateUrl: './<%= fileName %>.html'<% } if(inlineStyle) { %>,
   styles: `<% if(displayBlock){ %>
     :host {
       display: block;
     }
   <% } %>`<% } else if (style !== 'none') { %>,
-  styleUrl: './<%= fileName %>.<%= style %>'<% } %><% } %><% if(!!viewEncapsulation) { %>,
+  styleUrl: './<%= fileName %>.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })
-export class <%= symbolName %> {}
+export <% if (exportDefault) {%>default <%}%>class <%= symbolName %> {}