@nx/angular 0.0.0-pr-22179-271588f → 0.0.0-pr-26482-ebe2dba

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

@@ -25,3 +25,25 @@ export declare class StylesheetProcessor {
     destroy(): void;
     private createRenderWorker;
 }
+/**
+ * This class is used when ng-packagr version is 17.2.0. The async `loadPostcssConfiguration` function
+ * introduced in ng-packagr 17.2.0 causes a memory leak due to multiple workers being created. We must
+ * keep this class to support any workspace that might be using ng-packagr 17.2.0 where that function
+ * need to be awaited.
+ */
+export declare class AsyncStylesheetProcessor {
+    private readonly projectBasePath;
+    private readonly basePath;
+    private readonly cssUrl?;
+    private readonly includePaths?;
+    private readonly cacheDirectory?;
+    private renderWorker;
+    constructor(projectBasePath: string, basePath: string, cssUrl?: CssUrl, includePaths?: string[], cacheDirectory?: string | false);
+    process({ filePath, content, }: {
+        filePath: string;
+        content: string;
+    }): Promise<string>;
+    /** Destory workers in pool. */
+    destroy(): void;
+    private createRenderWorker;
+}

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

@@ -1,2 +1,2 @@
-import { FactoryProvider } from 'injection-js';
+import type { FactoryProvider } from 'injection-js';
 export declare const STYLESHEET_PROCESSOR: FactoryProvider;

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

@@ -2,9 +2,15 @@
 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: () => stylesheet_processor_1.StylesheetProcessor,
+    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;
+    },
     deps: [],
 };

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

@@ -7,8 +7,9 @@
  * config at the root of the workspace.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylesheetProcessor = exports.CssUrl = void 0;
-const browserslist = require("browserslist");
+exports.AsyncStylesheetProcessor = exports.StylesheetProcessor = exports.CssUrl = void 0;
+const tslib_1 = require("tslib");
+const browserslist_1 = tslib_1.__importDefault(require("browserslist"));
 const fs_1 = require("fs");
 const path_1 = require("path");
 const Piscina = require('piscina');
@@ -38,7 +39,98 @@ class StylesheetProcessor {
         // 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.defaults = [
+        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',
+        ];
+    }
+    async process({ filePath, content, }) {
+        this.createRenderWorker();
+        return this.renderWorker.run({ content, filePath });
+    }
+    /** Destory workers in pool. */
+    destroy() {
+        void this.renderWorker?.destroy();
+    }
+    createRenderWorker() {
+        if (this.renderWorker) {
+            return;
+        }
+        const styleIncludePaths = [...this.includePaths];
+        let prevDir = null;
+        let currentDir = this.basePath;
+        while (currentDir !== prevDir) {
+            const p = (0, path_1.join)(currentDir, 'node_modules');
+            if ((0, fs_1.existsSync)(p)) {
+                styleIncludePaths.push(p);
+            }
+            prevDir = currentDir;
+            currentDir = (0, path_1.dirname)(prevDir);
+        }
+        const browserslistData = (0, browserslist_1.default)(undefined, { path: this.basePath });
+        const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
+        let tailwindConfigPath;
+        let postcssConfiguration;
+        if ((0, semver_1.gte)(ngPackagrVersion, '18.0.0')) {
+            const { findTailwindConfiguration, generateSearchDirectories, loadPostcssConfiguration, } = require('ng-packagr/lib/styles/postcss-configuration');
+            let searchDirs = generateSearchDirectories([this.projectBasePath]);
+            postcssConfiguration = loadPostcssConfiguration(searchDirs);
+            // (nx-specific): we support loading the TailwindCSS config from the root of the workspace
+            searchDirs = generateSearchDirectories([
+                this.projectBasePath,
+                devkit_1.workspaceRoot,
+            ]);
+            tailwindConfigPath = findTailwindConfiguration(searchDirs);
+        }
+        else if ((0, semver_1.gt)(ngPackagrVersion, '17.2.0')) {
+            const { loadPostcssConfiguration, } = require('ng-packagr/lib/styles/postcss-configuration');
+            postcssConfiguration = loadPostcssConfiguration(this.projectBasePath);
+            tailwindConfigPath = (0, tailwindcss_1.getTailwindConfigPath)(this.projectBasePath, devkit_1.workspaceRoot);
+        }
+        this.renderWorker = new Piscina({
+            filename: require.resolve('ng-packagr/lib/styles/stylesheet-processor-worker'),
+            maxThreads,
+            recordTiming: false,
+            env: {
+                ...process.env,
+                FORCE_COLOR: '' + color_1.colors.enabled,
+            },
+            workerData: {
+                postcssConfiguration,
+                tailwindConfigPath,
+                projectBasePath: this.projectBasePath,
+                browserslistData,
+                targets: transformSupportedBrowsersToTargets(browserslistData),
+                cacheDirectory: this.cacheDirectory,
+                cssUrl: this.cssUrl,
+                styleIncludePaths,
+            },
+        });
+    }
+}
+exports.StylesheetProcessor = StylesheetProcessor;
+/**
+ * This class is used when ng-packagr version is 17.2.0. The async `loadPostcssConfiguration` function
+ * introduced in ng-packagr 17.2.0 causes a memory leak due to multiple workers being created. We must
+ * keep this class to support any workspace that might be using ng-packagr 17.2.0 where that function
+ * need to be awaited.
+ */
+class AsyncStylesheetProcessor {
+    constructor(projectBasePath, basePath, cssUrl, includePaths, cacheDirectory) {
+        this.projectBasePath = projectBasePath;
+        this.basePath = basePath;
+        this.cssUrl = cssUrl;
+        this.includePaths = includePaths;
+        this.cacheDirectory = cacheDirectory;
+        // 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',
@@ -70,16 +162,17 @@ class StylesheetProcessor {
             prevDir = currentDir;
             currentDir = (0, path_1.dirname)(prevDir);
         }
-        const browserslistData = browserslist(undefined, { path: this.basePath });
+        const browserslistData = (0, browserslist_1.default)(undefined, { path: this.basePath });
         const { version: ngPackagrVersion } = (0, angular_version_utils_1.getInstalledPackageVersionInfo)('ng-packagr');
         let postcssConfiguration;
-        if ((0, semver_1.gte)(ngPackagrVersion, '17.2.0')) {
-            const { loadPostcssConfiguration } = await Promise.resolve().then(() => require('ng-packagr/lib/styles/postcss-configuration'));
+        if (ngPackagrVersion === '17.2.0') {
+            const { loadPostcssConfiguration, } = require('ng-packagr/lib/styles/postcss-configuration');
             postcssConfiguration = await loadPostcssConfiguration(this.projectBasePath);
         }
         this.renderWorker = new Piscina({
             filename: require.resolve('ng-packagr/lib/styles/stylesheet-processor-worker'),
             maxThreads,
+            recordTiming: false,
             env: {
                 ...process.env,
                 FORCE_COLOR: '' + color_1.colors.enabled,
@@ -97,7 +190,7 @@ class StylesheetProcessor {
         });
     }
 }
-exports.StylesheetProcessor = StylesheetProcessor;
+exports.AsyncStylesheetProcessor = AsyncStylesheetProcessor;
 function transformSupportedBrowsersToTargets(supportedBrowsers) {
     const transformed = [];
     // https://esbuild.github.io/api/#target

package/src/executors/utilities/typescript.d.ts

@@ -6,8 +6,7 @@
  * - Added an extra function that updates the configFilePath in the returned parsed options
  * to be the original tsconfig file.
  */
-import type { ParsedConfiguration } from '@angular/compiler-cli';
 /**
  * Proxy function that ensures the configFilePath option points to the original file path.
  */
-export declare function parseRemappedTsConfigAndMergeDefaults(workspaceRoot: string, originalFilePath: string, remappedFilePath: string): Promise<ParsedConfiguration>;
+export declare function parseRemappedTsConfigAndMergeDefaults(workspaceRoot: string, originalFilePath: string, remappedFilePath: string): Promise<any>;

package/src/executors/utilities/typescript.js

@@ -9,9 +9,10 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseRemappedTsConfigAndMergeDefaults = void 0;
+const tslib_1 = require("tslib");
 const path_1 = require("path");
-const ts = require("typescript");
-const ng_compiler_cli_1 = require("./ng-compiler-cli");
+const ts = tslib_1.__importStar(require("typescript"));
+const module_loader_1 = require("./module-loader");
 async function readDefaultTsConfig(fileName) {
     // these options are mandatory
     const extraOptions = {
@@ -29,7 +30,7 @@ async function readDefaultTsConfig(fileName) {
         flatModuleId: 'AUTOGENERATED',
         flatModuleOutFile: 'AUTOGENERATED',
     };
-    const { readConfiguration } = await (0, ng_compiler_cli_1.ngCompilerCli)();
+    const { readConfiguration } = await (0, module_loader_1.loadEsmModule)('@angular/compiler-cli');
     return readConfiguration(fileName, extraOptions);
 }
 /**

package/src/generators/add-linting/add-linting.d.ts

@@ -1,4 +1,4 @@
-import { GeneratorCallback, Tree } from '@nx/devkit';
+import { type GeneratorCallback, type Tree } from '@nx/devkit';
 import type { AddLintingGeneratorSchema } from './schema';
 export declare function addLintingGenerator(tree: Tree, options: AddLintingGeneratorSchema): Promise<GeneratorCallback>;
 export default addLintingGenerator;

package/src/generators/add-linting/add-linting.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLintingGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const eslint_1 = require("@nx/eslint");
-const add_angular_eslint_dependencies_1 = require("./lib/add-angular-eslint-dependencies");
-const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 const string_utils_1 = require("@nx/devkit/src/utils/string-utils");
+const eslint_1 = require("@nx/eslint");
 const global_eslint_config_1 = require("@nx/eslint/src/generators/init/global-eslint-config");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+const add_angular_eslint_dependencies_1 = require("./lib/add-angular-eslint-dependencies");
+const buildable_project_1 = require("./lib/buildable-project");
 async function addLintingGenerator(tree, options) {
     const tasks = [];
     const rootProject = options.projectRoot === '.' || options.projectRoot === '';
@@ -22,6 +23,7 @@ async function addLintingGenerator(tree, options) {
         rootProject: rootProject,
         addPlugin: false,
         addExplicitTargets: true,
+        skipPackageJson: options.skipPackageJson,
     });
     tasks.push(lintTask);
     if ((0, eslint_file_1.isEslintConfigSupported)(tree)) {
@@ -73,7 +75,7 @@ async function addLintingGenerator(tree, options) {
                  */
                 rules: {},
             },
-            ...(isBuildableLibraryProject(tree, options.projectName)
+            ...((0, buildable_project_1.isBuildableLibraryProject)(tree, options.projectName)
                 ? [
                     {
                         files: ['*.json'],
@@ -87,7 +89,7 @@ async function addLintingGenerator(tree, options) {
         ]);
     }
     if (!options.skipPackageJson) {
-        const installTask = (0, add_angular_eslint_dependencies_1.addAngularEsLintDependencies)(tree);
+        const installTask = (0, add_angular_eslint_dependencies_1.addAngularEsLintDependencies)(tree, options.projectName);
         tasks.push(installTask);
     }
     if (!options.skipFormat) {
@@ -96,10 +98,4 @@ async function addLintingGenerator(tree, options) {
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.addLintingGenerator = addLintingGenerator;
-function isBuildableLibraryProject(tree, projectName) {
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
-    return (projectConfig.projectType === 'library' &&
-        projectConfig.targets?.build &&
-        !!projectConfig.targets.build);
-}
 exports.default = addLintingGenerator;

package/src/generators/add-linting/lib/add-angular-eslint-dependencies.d.ts

@@ -1,2 +1,2 @@
-import type { GeneratorCallback, Tree } from '@nx/devkit';
-export declare function addAngularEsLintDependencies(tree: Tree): GeneratorCallback;
+import { type GeneratorCallback, type Tree } from '@nx/devkit';
+export declare function addAngularEsLintDependencies(tree: Tree, projectName: string): GeneratorCallback;

package/src/generators/add-linting/lib/add-angular-eslint-dependencies.js

@@ -3,14 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addAngularEsLintDependencies = void 0;
 const devkit_1 = require("@nx/devkit");
 const version_utils_1 = require("../../utils/version-utils");
-function addAngularEsLintDependencies(tree) {
-    const angularEslintVersionToInstall = (0, version_utils_1.versions)(tree).angularEslintVersion;
-    const jsoncEslintParserVersionToInstall = (0, version_utils_1.versions)(tree).jsoncEslintParserVersion;
-    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+const buildable_project_1 = require("./buildable-project");
+function addAngularEsLintDependencies(tree, projectName) {
+    const compatVersions = (0, version_utils_1.versions)(tree);
+    const angularEslintVersionToInstall = compatVersions.angularEslintVersion;
+    const devDependencies = {
         '@angular-eslint/eslint-plugin': angularEslintVersionToInstall,
         '@angular-eslint/eslint-plugin-template': angularEslintVersionToInstall,
         '@angular-eslint/template-parser': angularEslintVersionToInstall,
-        'jsonc-eslint-parser': jsoncEslintParserVersionToInstall,
-    });
+    };
+    if ('typescriptEslintVersion' in compatVersions) {
+        devDependencies['@typescript-eslint/utils'] =
+            compatVersions.typescriptEslintVersion;
+    }
+    if ((0, buildable_project_1.isBuildableLibraryProject)(tree, projectName)) {
+        const jsoncEslintParserVersionToInstall = (0, version_utils_1.versions)(tree).jsoncEslintParserVersion;
+        devDependencies['jsonc-eslint-parser'] = jsoncEslintParserVersionToInstall;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies);
 }
 exports.addAngularEsLintDependencies = addAngularEsLintDependencies;

package/src/generators/add-linting/lib/buildable-project.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function isBuildableLibraryProject(tree: Tree, projectName: string): boolean;

package/src/generators/add-linting/lib/buildable-project.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBuildableLibraryProject = void 0;
+const devkit_1 = require("@nx/devkit");
+function isBuildableLibraryProject(tree, projectName) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    return (projectConfig.projectType === 'library' && !!projectConfig.targets?.build);
+}
+exports.isBuildableLibraryProject = isBuildableLibraryProject;

package/src/generators/add-linting/lib/create-eslint-configuration.d.ts

@@ -29,7 +29,7 @@ export declare const extendAngularEslintJson: (json: Linter.Config, options: Esl
             [name: string]: boolean;
         };
         globals?: {
-            [name: string]: boolean | "readable" | "off" | "readonly" | "writable" | "writeable";
+            [name: string]: boolean | "off" | "readonly" | "readable" | "writable" | "writeable";
         };
         noInlineConfig?: boolean;
         overrides?: Linter.ConfigOverride<Linter.RulesRecord>[];
@@ -61,7 +61,7 @@ export declare const extendAngularEslintJson: (json: Linter.Config, options: Esl
     };
     extends?: string | string[];
     globals?: {
-        [name: string]: boolean | "readable" | "off" | "readonly" | "writable" | "writeable";
+        [name: string]: boolean | "off" | "readonly" | "readable" | "writable" | "writeable";
     };
     noInlineConfig?: boolean;
     parser?: string;

package/src/generators/add-linting/schema.json

@@ -8,7 +8,7 @@
   "examples": [
     {
       "command": "nx g @nx/angular:add-linting --prefix=cool --projectName=cool-lib --projectRoot=libs/cool-lib",
-      "description": "Adds ESLint with Angular-specific rules for an existing project named `cool-lib` with the [prefix](https://angular.io/guide/styleguide#style-02-07) `cool`"
+      "description": "Adds ESLint with Angular-specific rules for an existing project named `cool-lib` with the [prefix](https://angular.dev/style-guide#style-02-07) `cool`"
     }
   ],
   "properties": {

package/src/generators/application/application.js

@@ -29,7 +29,9 @@ async function applicationGeneratorInternal(tree, schema) {
         ...options,
         skipFormat: true,
     });
-    (0, ensure_angular_dependencies_1.ensureAngularDependencies)(tree);
+    if (!options.skipPackageJson) {
+        (0, ensure_angular_dependencies_1.ensureAngularDependencies)(tree);
+    }
     (0, lib_1.createProject)(tree, options);
     await (0, lib_1.createFiles)(tree, options, rootOffset);
     if (options.addTailwind) {
@@ -62,6 +64,7 @@ async function applicationGeneratorInternal(tree, schema) {
         await (0, setup_ssr_1.setupSsr)(tree, {
             project: options.name,
             standalone: options.standalone,
+            skipPackageJson: options.skipPackageJson,
         });
     }
     if (!options.skipFormat) {

package/src/generators/application/files/ng-module/src/main.ts__tpl__

@@ -2,5 +2,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 
 platformBrowserDynamic()
-  .bootstrapModule(AppModule)
+  .bootstrapModule(AppModule<% if (useEventCoalescing) { %>, {
+    ngZoneEventCoalescing: true
+  }<% } %>)
   .catch((err) => console.error(err));

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

@@ -1,7 +1,7 @@
-import { ApplicationConfig } from <% if (angularMajorVersion >= 16) { %>'@angular/core';<% } else { %>'@angular/platform-browser';<% } %><% if (routing) { %>
+import { ApplicationConfig<% if (useEventCoalescing) { %>, provideZoneChangeDetection<% } %> } from '@angular/core';<% if (routing) { %>
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';<% } %>
 
 export const appConfig: ApplicationConfig = {
-  providers: [<% if (routing) { %>provideRouter(appRoutes) <% } %>]
+  providers: [<% if (useEventCoalescing) { %>provideZoneChangeDetection({ eventCoalescing: true }), <% } %><% if (routing) { %>provideRouter(appRoutes) <% } %>]
 };

package/src/generators/application/lib/add-e2e.js

@@ -27,8 +27,8 @@ async function addE2e(tree, options) {
             linter: options.linter,
             skipPackageJson: options.skipPackageJson,
             skipFormat: true,
-            devServerTarget: `${options.name}:serve:development`,
-            baseUrl: 'http://localhost:4200',
+            devServerTarget: `${options.name}:${options.e2eWebServerTarget}:development`,
+            baseUrl: options.e2eWebServerAddress,
             rootProject: options.rootProject,
             addPlugin,
         });
@@ -50,8 +50,8 @@ async function addE2e(tree, options) {
             js: false,
             linter: options.linter,
             setParserOptionsProject: options.setParserOptionsProject,
-            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
-            webServerAddress: `http://localhost:${options.port ?? 4200}`,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.name}`,
+            webServerAddress: options.e2eWebServerAddress,
             rootProject: options.rootProject,
             addPlugin,
         });
@@ -59,7 +59,9 @@ async function addE2e(tree, options) {
 }
 exports.addE2e = addE2e;
 function addFileServerTarget(tree, options, targetName) {
-    (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': versions_1.nxVersion });
+    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 projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.name);
@@ -67,10 +69,11 @@ function addFileServerTarget(tree, options, targetName) {
         executor: '@nx/web:file-server',
         options: {
             buildTarget: `${options.name}:build`,
-            port: options.port,
+            port: options.e2ePort,
             staticFilePath: isUsingApplicationBuilder
                 ? (0, devkit_1.joinPathFragments)(options.outputPath, 'browser')
                 : undefined,
+            spa: true,
         },
     };
     (0, devkit_1.updateProjectConfiguration)(tree, options.name, projectConfig);

package/src/generators/application/lib/add-linting.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLinting = void 0;
+const tslib_1 = require("tslib");
 const eslint_1 = require("@nx/eslint");
-const add_linting_1 = require("../../add-linting/add-linting");
+const add_linting_1 = tslib_1.__importDefault(require("../../add-linting/add-linting"));
 async function addLinting(host, options) {
     if (options.linter === eslint_1.Linter.None) {
         return;

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

@@ -29,9 +29,16 @@ async function createFiles(tree, options, rootOffset) {
         angularMajorVersion,
         rootOffset,
         isUsingApplicationBuilder,
+        useEventCoalescing: angularMajorVersion >= 18,
         tpl: '',
     };
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/base'), options.appProjectRoot, substitutions);
+    if (angularMajorVersion >= 18) {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/base-18+'), options.appProjectRoot, substitutions);
+    }
+    else {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/base-pre18'), options.appProjectRoot, substitutions);
+    }
     if (options.standalone) {
         (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/standalone-components'), options.appProjectRoot, substitutions);
     }

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

@@ -56,12 +56,19 @@ function createProject(tree, options) {
                     index: `${options.appProjectSourceRoot}/index.html`,
                     [buildMainOptionName]: `${options.appProjectSourceRoot}/main.ts`,
                     polyfills: ['zone.js'],
-                    tsConfig: `${options.appProjectRoot}/tsconfig.app.json`,
+                    tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
                     inlineStyleLanguage,
-                    assets: [
-                        `${options.appProjectSourceRoot}/favicon.ico`,
-                        `${options.appProjectSourceRoot}/assets`,
-                    ],
+                    assets: angularMajorVersion >= 18
+                        ? [
+                            {
+                                glob: '**/*',
+                                input: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'public'),
+                            },
+                        ]
+                        : [
+                            `${options.appProjectSourceRoot}/favicon.ico`,
+                            `${options.appProjectSourceRoot}/assets`,
+                        ],
                     styles: [`${options.appProjectSourceRoot}/styles.${options.style}`],
                     scripts: [],
                 },

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

@@ -17,8 +17,19 @@ async function normalizeOptions(host, options) {
     });
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    let e2eWebServerTarget = 'serve';
+    let e2ePort = options.port ?? 4200;
+    if (nxJson.targetDefaults?.[e2eWebServerTarget] &&
+        (nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+            nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT)) {
+        e2ePort =
+            nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+                nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT;
+    }
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+    const e2eWebServerAddress = `http://localhost:${e2ePort}`;
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
@@ -36,7 +47,7 @@ async function normalizeOptions(host, options) {
         skipTests: options.unitTestRunner === test_runners_1.UnitTestRunner.None,
         skipFormat: false,
         unitTestRunner: test_runners_1.UnitTestRunner.Jest,
-        e2eTestRunner: test_runners_1.E2eTestRunner.Cypress,
+        e2eTestRunner: test_runners_1.E2eTestRunner.Playwright,
         linter: eslint_1.Linter.EsLint,
         strict: true,
         standalone: true,
@@ -47,6 +58,9 @@ async function normalizeOptions(host, options) {
         appProjectSourceRoot: `${appProjectRoot}/src`,
         e2eProjectRoot,
         e2eProjectName,
+        e2eWebServerAddress,
+        e2eWebServerTarget,
+        e2ePort,
         parsedTags,
         bundler,
         outputPath: (0, devkit_1.joinPathFragments)('dist', !options.rootProject ? appProjectRoot : appProjectName),

package/src/generators/application/lib/normalized-schema.d.ts

@@ -10,6 +10,9 @@ export interface NormalizedSchema extends Schema {
     appProjectSourceRoot: string;
     e2eProjectName: string;
     e2eProjectRoot: string;
+    e2eWebServerAddress: string;
+    e2eWebServerTarget: string;
+    e2ePort: number;
     parsedTags: string[];
     outputPath: string;
 }

package/src/generators/application/schema.json

@@ -110,10 +110,10 @@
     },
     "e2eTestRunner": {
       "type": "string",
-      "enum": ["cypress", "playwright", "none"],
+      "enum": ["playwright", "cypress", "none"],
       "description": "Test runner to use for end to end (E2E) tests.",
       "x-prompt": "Which E2E test runner would you like to use?",
-      "default": "cypress"
+      "default": "playwright"
     },
     "tags": {
       "type": "string",

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

@@ -22,15 +22,15 @@ export interface Schema {
   skipFormat?: boolean;
 
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v19.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v20.
    */
   flat?: boolean;
   /**
-   * @deprecated Provide the `directory` option instead. It will be removed in Nx v19.
+   * @deprecated Provide the `directory` option instead. It will be removed in Nx v20.
    */
   path?: string;
   /**
-   * @deprecated Provide the `directory` option instead. The project will be determined from the directory provided. It will be removed in Nx v19.
+   * @deprecated Provide the `directory` option instead. The project will be determined from the directory provided. It will be removed in Nx v20.
    */
   project?: string;
 }

package/src/generators/component/schema.json

@@ -34,7 +34,7 @@
         "$source": "projectName"
       },
       "x-dropdown": "projects",
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20."
     },
     "prefix": {
       "type": "string",
@@ -98,7 +98,7 @@
       "type": "boolean",
       "description": "Create the new files at the top level of the current project.",
       "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v19."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v20."
     },
     "skipImport": {
       "type": "boolean",

package/src/generators/component-test/component-test.js

@@ -6,7 +6,7 @@ const versions_1 = require("../../utils/versions");
 const storybook_inputs_1 = require("../utils/storybook-ast/storybook-inputs");
 async function componentTestGenerator(tree, options) {
     (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-    const { assertMinimumCypressVersion } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/cypress-version'));
+    const { assertMinimumCypressVersion } = require('@nx/cypress/src/utils/cypress-version');
     assertMinimumCypressVersion(10);
     const { root } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const componentDirPath = (0, devkit_1.joinPathFragments)(root, options.componentDir);