@nx/angular 21.1.2 → 21.2.0-beta.2

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

@@ -7,7 +7,6 @@ const buildable_libs_utils_1 = require("@nx/js/src/utils/buildable-libs-utils");
 const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
-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) {
@@ -27,10 +26,7 @@ async function initializeNgPackagr(options, context, projectDependencies) {
  */
 function createLibraryExecutor(initializeNgPackagr) {
     return async function* (options, context) {
-        const { major: angularMajorVersion, version: angularVersion } = (0, angular_version_utils_1.getInstalledAngularVersionInfo)();
-        if (angularMajorVersion < 18 && options.poll !== undefined) {
-            throw new Error(`The "poll" option requires Angular version 18.0.0 or greater. You are currently using version ${angularVersion}.`);
-        }
+        options.project ??= (0, path_1.join)(context.projectsConfigurations.projects[context.projectName].root, 'ng-package.json');
         const { dependencies } = (0, buildable_libs_utils_1.calculateProjectBuildableDependencies)(context.taskGraph, context.projectGraph, context.root, context.projectName, context.targetName, context.configurationName);
         if (options.watch) {
             return yield* (0, rxjs_for_await_1.eachValueFrom)((0, rxjs_1.from)(initializeNgPackagr(options, context, dependencies)).pipe((0, operators_1.switchMap)((packagr) => packagr.watch()), (0, operators_1.mapTo)({ success: true })));

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

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

package/src/executors/package/schema.json

@@ -31,9 +31,8 @@
     },
     "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_."
+      "description": "Enable and define the file watching poll time period in milliseconds."
     }
   },
-  "additionalProperties": false,
-  "required": ["project"]
+  "additionalProperties": false
 }

package/src/executors/utilities/builder-package.d.ts

@@ -0,0 +1 @@
+export declare function assertBuilderPackageIsInstalled(packageName: string): void;

package/src/executors/utilities/builder-package.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertBuilderPackageIsInstalled = assertBuilderPackageIsInstalled;
+function assertBuilderPackageIsInstalled(packageName) {
+    try {
+        require.resolve(packageName);
+    }
+    catch {
+        throw new Error(`This executor requires the package ${packageName} to be installed. Please make sure it is installed and try again.`);
+    }
+}

package/src/executors/utilities/esbuild-extensions.d.ts

@@ -1,4 +1,5 @@
-type Plugin = Parameters<typeof import('@angular-devkit/build-angular').buildApplication>[2]['codePlugins'][number];
+import type { buildApplication } from '@angular/build';
+type Plugin = Parameters<typeof buildApplication>[2]['codePlugins'][number];
 export type PluginSpec = {
     path: string;
     options: any;

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

@@ -1 +1,3 @@
-export declare function importNgPackagrPath<T>(path: string, ngPackagrMajorVersion: number): T;
+type NgPackagrImportPath = `ng-packagr/src/${string}`;
+export declare function importNgPackagrPath<T>(path: NgPackagrImportPath, ngPackagrMajorVersion: number): T;
+export {};

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.importNgPackagrPath = importNgPackagrPath;
 function importNgPackagrPath(path, ngPackagrMajorVersion) {
     let finalPath = path;
-    if (ngPackagrMajorVersion >= 20 && !path.startsWith('ng-packagr/src/')) {
-        finalPath = path.replace(/^ng-packagr\//, 'ng-packagr/src/');
+    if (ngPackagrMajorVersion < 20 && path.startsWith('ng-packagr/src/')) {
+        finalPath = path.replace(/^ng-packagr\/src\//, 'ng-packagr/');
     }
     return require(finalPath);
 }

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

@@ -2,8 +2,8 @@
  * Adapted from the original ng-packagr source.
  *
  * Changes made:
- * - Use our own function to get the TailwindCSS config path to support a
- * config at the root of the workspace.
+ * - Resolve `piscina` from the installed `ng-packagr` package.
+ * - Additionally search for the TailwindCSS config in the workspace root.
  */
 export declare enum CssUrl {
     inline = "inline",
@@ -25,25 +25,3 @@ 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/pre-v19/stylesheet-processor.js

@@ -3,22 +3,17 @@
  * Adapted from the original ng-packagr source.
  *
  * Changes made:
- * - Use our own function to get the TailwindCSS config path to support a
- * config at the root of the workspace.
+ * - Resolve `piscina` from the installed `ng-packagr` package.
+ * - Additionally search for the TailwindCSS config in the workspace root.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AsyncStylesheetProcessor = exports.StylesheetProcessor = exports.CssUrl = void 0;
+exports.StylesheetProcessor = exports.CssUrl = void 0;
 const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
 const browserslist_1 = tslib_1.__importDefault(require("browserslist"));
 const fs_1 = require("fs");
+const color_1 = require("ng-packagr/src/lib/utils/color");
 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 devkit_1 = require("@nx/devkit");
-const semver_1 = require("semver");
-const ng_packagr_version_1 = require("../ng-packagr-version");
 const maxWorkersVariable = process.env['NG_BUILD_MAX_WORKERS'];
 const maxThreads = typeof maxWorkersVariable === 'string' && maxWorkersVariable !== ''
     ? +maxWorkersVariable
@@ -72,25 +67,16 @@ class StylesheetProcessor {
             currentDir = (0, path_1.dirname)(prevDir);
         }
         const browserslistData = (0, browserslist_1.default)(undefined, { path: this.basePath });
-        const { version: ngPackagrVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
-        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);
-        }
+        const { findTailwindConfiguration, generateSearchDirectories, loadPostcssConfiguration, } = require('ng-packagr/lib/styles/postcss-configuration');
+        let searchDirs = generateSearchDirectories([this.projectBasePath]);
+        const postcssConfiguration = loadPostcssConfiguration(searchDirs);
+        // (nx-specific): we support loading the TailwindCSS config from the root of the workspace
+        searchDirs = generateSearchDirectories([
+            this.projectBasePath,
+            devkit_1.workspaceRoot,
+        ]);
+        const tailwindConfigPath = findTailwindConfiguration(searchDirs);
+        const Piscina = getPiscina();
         this.renderWorker = new Piscina({
             filename: require.resolve('ng-packagr/lib/styles/stylesheet-processor-worker'),
             maxThreads,
@@ -113,84 +99,6 @@ class StylesheetProcessor {
     }
 }
 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',
-            'last 2 Safari major versions',
-            'last 2 iOS major versions',
-            'Firefox ESR',
-        ];
-    }
-    async process({ filePath, content, }) {
-        await this.createRenderWorker();
-        return this.renderWorker.run({ content, filePath });
-    }
-    /** Destory workers in pool. */
-    destroy() {
-        void this.renderWorker?.destroy();
-    }
-    async 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, ng_packagr_version_1.getNgPackagrVersionInfo)();
-        let postcssConfiguration;
-        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,
-            },
-            workerData: {
-                postcssConfiguration,
-                tailwindConfigPath: (0, tailwindcss_1.getTailwindConfigPath)(this.projectBasePath, devkit_1.workspaceRoot),
-                projectBasePath: this.projectBasePath,
-                browserslistData,
-                targets: transformSupportedBrowsersToTargets(browserslistData),
-                cacheDirectory: this.cacheDirectory,
-                cssUrl: this.cssUrl,
-                styleIncludePaths,
-            },
-        });
-    }
-}
-exports.AsyncStylesheetProcessor = AsyncStylesheetProcessor;
 function transformSupportedBrowsersToTargets(supportedBrowsers) {
     const transformed = [];
     // https://esbuild.github.io/api/#target
@@ -221,3 +129,28 @@ function transformSupportedBrowsersToTargets(supportedBrowsers) {
     }
     return transformed.length ? transformed : undefined;
 }
+/**
+ * Loads the `piscina` package from the installed `ng-packagr` package.
+ */
+function getPiscina() {
+    const ngPackagrPath = getInstalledNgPackagrPath();
+    try {
+        // Resolve the main piscina module entry point
+        const piscinaModulePath = require.resolve('piscina', {
+            paths: [ngPackagrPath],
+        });
+        return require(piscinaModulePath);
+    }
+    catch (error) {
+        throw new Error(`Failed to load the \`piscina\` package from \`ng-packagr\` dependencies: ${error.message}`);
+    }
+}
+function getInstalledNgPackagrPath() {
+    try {
+        const ngPackagrPackageJsonPath = require.resolve('ng-packagr/package.json');
+        return (0, path_1.dirname)(ngPackagrPackageJsonPath);
+    }
+    catch (e) {
+        throw new Error('The `ng-packagr` package is not installed. The package is required to use this executor. Please install it in your workspace.');
+    }
+}

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

@@ -4,8 +4,8 @@ exports.getStylesheetProcessorFactoryProvider = getStylesheetProcessorFactoryPro
 const ng_packagr_version_1 = require("./ng-packagr-version");
 const package_imports_1 = require("./package-imports");
 function getStylesheetProcessorFactoryProvider() {
-    const { major: ngPackagrMajorVersion, version: ngPackagrVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
-    const { STYLESHEET_PROCESSOR_TOKEN } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/styles/stylesheet-processor.di', ngPackagrMajorVersion);
+    const { major: ngPackagrMajorVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
+    const { STYLESHEET_PROCESSOR_TOKEN } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/src/lib/styles/stylesheet-processor.di', ngPackagrMajorVersion);
     return {
         provide: STYLESHEET_PROCESSOR_TOKEN,
         useFactory: () => {
@@ -13,12 +13,8 @@ function getStylesheetProcessorFactoryProvider() {
                 const { getStylesheetProcessor, } = require('./v19+/stylesheet-processor');
                 return getStylesheetProcessor();
             }
-            if (ngPackagrVersion !== '17.2.0') {
-                const { StylesheetProcessor, } = require('./pre-v19/stylesheet-processor');
-                return StylesheetProcessor;
-            }
-            const { AsyncStylesheetProcessor, } = require('./pre-v19/stylesheet-processor');
-            return AsyncStylesheetProcessor;
+            const { StylesheetProcessor } = require('./pre-v19/stylesheet-processor');
+            return StylesheetProcessor;
         },
         deps: [],
     };

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

@@ -4,7 +4,7 @@
  * Changes made:
  * - Add the project root to the search directories.
  */
-import type { NgPackageEntryConfig } from 'ng-packagr/ng-entrypoint.schema';
+import type { NgPackageEntryConfig } from 'ng-packagr/src/ng-entrypoint.schema';
 export declare enum CssUrl {
     inline = "inline",
     none = "none"

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

@@ -20,22 +20,29 @@ var CssUrl;
 })(CssUrl || (exports.CssUrl = CssUrl = {}));
 function getStylesheetProcessor() {
     const { major: ngPackagrMajorVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
-    const { ComponentStylesheetBundler } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/styles/component-stylesheets', ngPackagrMajorVersion);
-    const { generateSearchDirectories, getTailwindConfig, loadPostcssConfiguration, } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/lib/styles/postcss-configuration', ngPackagrMajorVersion);
+    const { ComponentStylesheetBundler } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/src/lib/styles/component-stylesheets', ngPackagrMajorVersion);
+    const { generateSearchDirectories, getTailwindConfig, loadPostcssConfiguration, } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/src/lib/styles/postcss-configuration', ngPackagrMajorVersion);
     class StylesheetProcessor extends 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',
-            ];
+            // https://angular.dev/reference/versions#browser-support
+            if (ngPackagrMajorVersion >= 20) {
+                browserslist_1.default.defaults = (0, browserslist_1.default)(undefined, {
+                    path: require.resolve('ng-packagr/.browserslistrc'),
+                });
+            }
+            else {
+                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 = generateSearchDirectories([projectBasePath]);
             const postcssConfiguration = loadPostcssConfiguration(searchDirs);

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

@@ -55,6 +55,10 @@ async function addLintingGenerator(tree, options) {
                             style: 'kebab-case',
                         },
                     ],
+                    // Temporary disable these rules until Angular ESLint recommended
+                    // rules are updated with the new Style Guide
+                    '@angular-eslint/component-class-suffix': 'off',
+                    '@angular-eslint/directive-class-suffix': 'off',
                 },
             });
             (0, eslint_file_1.addOverrideToLintConfig)(tree, options.projectRoot, {
@@ -95,6 +99,10 @@ async function addLintingGenerator(tree, options) {
                                 style: 'kebab-case',
                             },
                         ],
+                        // Temporary disable these rules until Angular ESLint recommended
+                        // rules are updated with the new Style Guide
+                        '@angular-eslint/component-class-suffix': 'off',
+                        '@angular-eslint/directive-class-suffix': 'off',
                     },
                 },
                 {

package/src/generators/application/application.js

@@ -5,11 +5,12 @@ const devkit_1 = require("@nx/devkit");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const js_1 = require("@nx/js");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const init_1 = require("../init/init");
 const convert_to_rspack_1 = require("../convert-to-rspack/convert-to-rspack");
+const init_1 = require("../init/init");
 const setup_ssr_1 = require("../setup-ssr/setup-ssr");
 const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 const ensure_angular_dependencies_1 = require("../utils/ensure-angular-dependencies");
+const version_utils_1 = require("../utils/version-utils");
 const lib_1 = require("./lib");
 async function applicationGenerator(tree, schema) {
     (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(tree, 'angular', 'application');
@@ -46,7 +47,7 @@ async function applicationGenerator(tree, schema) {
     await (0, lib_1.addUnitTestRunner)(tree, options);
     const e2ePort = await (0, lib_1.addE2e)(tree, options);
     (0, lib_1.addServeStaticTarget)(tree, options, options.e2eTestRunner !== 'none' ? e2ePort : options.port);
-    (0, lib_1.updateEditorTsConfig)(tree, options);
+    (0, lib_1.updateTsconfigFiles)(tree, options);
     (0, lib_1.setGeneratorDefaults)(tree, options);
     if (options.rootProject) {
         const nxJson = (0, devkit_1.readNxJson)(tree);
@@ -56,12 +57,6 @@ async function applicationGenerator(tree, schema) {
     if (options.backendProject) {
         (0, lib_1.addProxyConfig)(tree, options);
     }
-    if (options.strict) {
-        (0, lib_1.enableStrictTypeChecking)(tree, options);
-    }
-    else {
-        (0, lib_1.setApplicationStrictDefault)(tree, false);
-    }
     if (options.ssr) {
         await (0, setup_ssr_1.setupSsr)(tree, {
             project: options.name,
@@ -83,6 +78,25 @@ async function applicationGenerator(tree, schema) {
             });
         }
     }
+    if (!options.skipPackageJson) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        if (angularMajorVersion >= 20) {
+            const angularDevkitVersion = (0, version_utils_1.getInstalledAngularDevkitVersion)(tree) ??
+                (0, version_utils_1.versions)(tree).angularDevkitVersion;
+            const devDependencies = {};
+            if (options.bundler === 'esbuild') {
+                devDependencies['@angular/build'] = angularDevkitVersion;
+            }
+            else if (isRspack) {
+                devDependencies['@angular/build'] = angularDevkitVersion;
+                devDependencies['@angular-devkit/build-angular'] = angularDevkitVersion;
+            }
+            else {
+                devDependencies['@angular-devkit/build-angular'] = angularDevkitVersion;
+            }
+            (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies, undefined, true);
+        }
+    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/application/files/base/tsconfig.app.json__tpl__

@@ -4,7 +4,16 @@
     "outDir": "<%= rootOffset %>dist/out-tsc",
     "types": []
   },
+  <%_ if (angularMajorVersion < 20) { _%>
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  <%_ } else { _%>
+  "include": ["src/**/*.ts"],
+  <%_ } _%>
+  "exclude": [
+    "jest.config.ts",
+    "src/test-setup.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts"
+  ]
 }

package/src/generators/application/files/base/tsconfig.json__tpl__

@@ -1,18 +1,17 @@
 {
-  "compilerOptions": {
-    "target": "es2022"<% if (disableModernClassFieldsBehavior) { %>,
-    "useDefineForClassFields": false<% } %><% if (isUsingApplicationBuilder) { %>,
-    "esModuleInterop": true<% } %>
+  "extends": "<%= rootTsConfig %>",
+  "compilerOptions": {},
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false
   },
   "files": [],
   "include": [],
-  "references": [
+  "references": [<% if (angularMajorVersion < 20) { %>
     {
       "path": "./tsconfig.editor.json"
-    },
+    },<% } %>
     {
       "path": "./tsconfig.app.json"
     }
-  ],
-  "extends": "<%= rootTsConfig %>"
+  ]
 }

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

@@ -0,0 +1,28 @@
+import { TestBed } from '@angular/core/testing';
+import { App<%= componentType %> } from './app<%= componentFileSuffix %>';<% if(!minimal) { %>
+import { NxWelcome<%= componentType %> } from './nx-welcome<%= componentFileSuffix %>';<% } %><% if(routing) { %>
+import { RouterModule } from '@angular/router';<% } %>
+
+describe('App<%= componentType %>', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [<% if(routing) { %>RouterModule.forRoot([])<% } %>],
+      declarations: [App<%= componentType %><% if(!minimal) { %>, NxWelcome<%= componentType %><% } %>]
+    }).compileComponents();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(App<%= componentType %>);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Welcome <%= appName %>'
+    );
+  });<% if(!minimal && angularMajorVersion < 20) { %>
+
+  it(`should have as title '<%= appName %>'`, () => {
+    const fixture = TestBed.createComponent(App<%= componentType %>);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('<%= appName %>');
+  });<% } %>
+});

package/src/generators/application/files/ng-module/src/app/{app.component.ts__tpl__ → app__componentFileSuffix__.ts__tpl__}

@@ -3,12 +3,12 @@ import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from
 @Component({
   selector: '<%= rootSelector %>',<% if (setStandaloneFalse) { %>
   standalone: false,<% } if(!inlineTemplate) { %>
-  templateUrl: './app.component.html',<% } else { %>
+  templateUrl: './app<%= componentFileSuffix %>.html',<% } else { %>
   template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
-  styleUrl: './app.component.<%= style %>',<% } else { %>
+  styleUrl: './app<%= componentFileSuffix %>.<%= style %>',<% } else { %>
   styles: ``,<% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
-export class AppComponent {<% if(!minimal) { %>
-  title = '<%= appName %>';
+export class App<%= componentType %> {<% if(!minimal) { %>
+  <% if (angularMajorVersion >= 20) { %>protected <% } %>title = '<%= appName %>';
 <% } %>}

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

@@ -0,0 +1,17 @@
+import { NgModule<% if (provideGlobalErrorListener) { %>, provideBrowserGlobalErrorListeners<% } %> } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';<% if(routing) { %>
+import { RouterModule } from '@angular/router';<% } %>
+import { App<%= componentType %> } from './app<%= componentFileSuffix %>';<% if(routing) { %>
+import { appRoutes } from './app.routes';<% } %><% if(!minimal) { %>
+import { NxWelcome<%= componentType %> } from './nx-welcome<%= componentFileSuffix %>';<% } %>
+
+@NgModule({
+  declarations: [App<%= componentType %><% if(!minimal) { %>, NxWelcome<%= componentType %><% } %>],
+  imports: [
+    BrowserModule,<% if(routing) { %>
+    RouterModule.forRoot(appRoutes),<% } %>
+  ],
+  providers: [<% if (provideGlobalErrorListener) { %>provideBrowserGlobalErrorListeners()<% } %>],
+  bootstrap: [App<%= componentType %>],
+})
+export class AppModule {}

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

@@ -1,8 +1,16 @@
+<%_ if (usePlatformBrowserDynamic) { _%>
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+<%_ } else { _%>
+import { platformBrowser } from '@angular/platform-browser';
+<%_ } _%>
+import { AppModule } from './app/app<%= moduleTypeSeparator %>module';
 
+<%_ if (usePlatformBrowserDynamic) { _%>
 platformBrowserDynamic()
-  .bootstrapModule(AppModule<% if (useEventCoalescing) { %>, {
+<%_ } else { _%>
+platformBrowser()
+<%_ } _%>
+  .bootstrapModule(AppModule, {
     ngZoneEventCoalescing: true
-  }<% } %>)
+  })
   .catch((err) => console.error(err));

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

@@ -806,4 +806,4 @@ nx g &#64;nx/angular:component ui/src/lib/button</pre>
   styles: [],
   encapsulation: ViewEncapsulation.None,
 })
-export class NxWelcomeComponent {}
+export class NxWelcome<%= componentType %> {}

package/src/generators/application/files/nx-welcome/claimed/standalone/src/app/{nx-welcome.component.ts__tpl__ → nx-welcome__componentFileSuffix__.ts__tpl__}

@@ -808,4 +808,4 @@ nx g &#64;nx/angular:component ui/src/lib/button</pre>
   styles: [],
   encapsulation: ViewEncapsulation.None,
 })
-export class NxWelcomeComponent {}
+export class NxWelcome<%= componentType %> {}

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

@@ -803,4 +803,4 @@ nx g &#64;nx/angular:component ui/src/lib/button</pre>
   styles: [],
   encapsulation: ViewEncapsulation.None,
 })
-export class NxWelcomeComponent {}
+export class NxWelcome<%= componentType %> {}

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

@@ -805,4 +805,4 @@ nx g &#64;nx/angular:component ui/src/lib/button</pre>
   styles: [],
   encapsulation: ViewEncapsulation.None,
 })
-export class NxWelcomeComponent {}
+export class NxWelcome<%= componentType %> {}

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

@@ -808,4 +808,4 @@ nx g &#64;nx/angular:component ui/src/lib/button</pre>
   styles: [],
   encapsulation: ViewEncapsulation.None,
 })
-export class NxWelcomeComponent {}
+export class NxWelcome<%= componentType %> {}