@nx/angular 0.0.0-pr-30715-a5f5e3b → 0.0.0-pr-31313-387cdca

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

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

@@ -3,17 +3,22 @@
  * Adapted from the original ng-packagr source.
  *
  * Changes made:
- * - Additionally search for the TailwindCSS config in the workspace root.
+ * - Use our own function to get the TailwindCSS config path to support a
+ * config at the root of the workspace.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylesheetProcessor = exports.CssUrl = void 0;
+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');
-const color_1 = require("ng-packagr/src/lib/utils/color");
+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
@@ -67,15 +72,25 @@ class StylesheetProcessor {
             currentDir = (0, path_1.dirname)(prevDir);
         }
         const browserslistData = (0, browserslist_1.default)(undefined, { path: this.basePath });
-        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 { 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);
+        }
         this.renderWorker = new Piscina({
             filename: require.resolve('ng-packagr/lib/styles/stylesheet-processor-worker'),
             maxThreads,
@@ -98,6 +113,84 @@ 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

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 } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
-    const { STYLESHEET_PROCESSOR_TOKEN } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/src/lib/styles/stylesheet-processor.di', ngPackagrMajorVersion);
+    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);
     return {
         provide: STYLESHEET_PROCESSOR_TOKEN,
         useFactory: () => {
@@ -13,8 +13,12 @@ function getStylesheetProcessorFactoryProvider() {
                 const { getStylesheetProcessor, } = require('./v19+/stylesheet-processor');
                 return getStylesheetProcessor();
             }
-            const { StylesheetProcessor } = require('./pre-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/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/src/ng-entrypoint.schema';
+import type { NgPackageEntryConfig } from 'ng-packagr/ng-entrypoint.schema';
 export declare enum CssUrl {
     inline = "inline",
     none = "none"

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

@@ -20,29 +20,22 @@ 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/src/lib/styles/component-stylesheets', ngPackagrMajorVersion);
-    const { generateSearchDirectories, getTailwindConfig, loadPostcssConfiguration, } = (0, package_imports_1.importNgPackagrPath)('ng-packagr/src/lib/styles/postcss-configuration', ngPackagrMajorVersion);
+    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);
     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.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',
-                ];
-            }
+            // 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 = generateSearchDirectories([projectBasePath]);
             const postcssConfiguration = loadPostcssConfiguration(searchDirs);

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

@@ -55,10 +55,6 @@ 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, {
@@ -99,10 +95,6 @@ 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,12 +5,11 @@ 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 convert_to_rspack_1 = require("../convert-to-rspack/convert-to-rspack");
 const init_1 = require("../init/init");
+const convert_to_rspack_1 = require("../convert-to-rspack/convert-to-rspack");
 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');
@@ -84,25 +83,6 @@ 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/ng-module/src/app/app.component.spec.ts__tpl__

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/generators/application/files/standalone-components/src/app/{app__componentFileSuffix__.ts__tpl__ → app.component.ts__tpl__}

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

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

@@ -1,11 +1,7 @@
-import { ApplicationConfig<% if (provideGlobalErrorListener) { %>, provideBrowserGlobalErrorListeners<% } %>, provideZoneChangeDetection } from '@angular/core';<% 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 (provideGlobalErrorListener) { %>
-    provideBrowserGlobalErrorListeners(),<% } %>
-    provideZoneChangeDetection({ eventCoalescing: true })<% if (routing) { %>,
-    provideRouter(appRoutes)<% } %>
-  ]
+  providers: [<% if (useEventCoalescing) { %>provideZoneChangeDetection({ eventCoalescing: true }), <% } %><% if (routing) { %>provideRouter(appRoutes) <% } %>]
 };

package/src/generators/application/files/standalone-components/src/main.ts__tpl__

@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { App<%= componentType %> } from './app/app<%= componentFileSuffix %>';
+import { AppComponent } from './app/app.component';
 
-bootstrapApplication(App<%= componentType %>, appConfig).catch((err) =>
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
   console.error(err)
 );

package/src/generators/application/lib/create-files.d.ts

@@ -1,3 +1,3 @@
-import { type Tree } from '@nx/devkit';
+import type { Tree } from '@nx/devkit';
 import type { NormalizedSchema } from './normalized-schema';
 export declare function createFiles(tree: Tree, options: NormalizedSchema, rootOffset: string): Promise<void>;

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

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFiles = createFiles;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
 const semver_1 = require("semver");
 const test_runners_1 = require("../../../utils/test-runners");
-const artifact_types_1 = require("../../utils/artifact-types");
 const selector_1 = require("../../utils/selector");
 const update_project_root_tsconfig_1 = require("../../utils/update-project-root-tsconfig");
 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 = options.bundler === 'esbuild';
@@ -21,9 +20,6 @@ async function createFiles(tree, options, rootOffset) {
     const onBoardingStatus = await (0, onboarding_1.createNxCloudOnboardingURLForWelcomeApp)(tree, options.nxCloudToken);
     const connectCloudUrl = onBoardingStatus === 'unclaimed' &&
         (await (0, onboarding_1.getNxCloudAppOnBoardingUrl)(options.nxCloudToken));
-    const componentType = (0, artifact_types_1.getComponentType)(tree);
-    const componentFileSuffix = componentType ? `.${componentType}` : '';
-    const moduleTypeSeparator = (0, artifact_types_1.getModuleTypeSeparator)(tree);
     const substitutions = {
         rootSelector,
         appName: options.name,
@@ -40,14 +36,11 @@ async function createFiles(tree, options, rootOffset) {
         rootOffset,
         isUsingApplicationBuilder,
         disableModernClassFieldsBehavior,
-        // Angular v19 or higher defaults to true, while lower versions default to false
+        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,
-        provideGlobalErrorListener: angularMajorVersion >= 20,
-        usePlatformBrowserDynamic: angularMajorVersion < 20,
-        componentType: componentType ? (0, devkit_1.names)(componentType).className : '',
-        componentFileSuffix,
-        moduleTypeSeparator,
         connectCloudUrl,
         tutorialUrl: options.standalone
             ? 'https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx-project'
@@ -56,6 +49,12 @@ async function createFiles(tree, options, rootOffset) {
     };
     const angularAppType = options.standalone ? 'standalone' : 'ng-module';
     (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);
     }
@@ -68,15 +67,15 @@ async function createFiles(tree, options, rootOffset) {
         tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, '/src/app/app.routes.ts'));
     }
     if (options.skipTests || options.unitTestRunner === test_runners_1.UnitTestRunner.None) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.spec.ts`));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, '/src/app/app.component.spec.ts'));
     }
     if (options.inlineTemplate) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.html`));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, '/src/app/app.component.html'));
     }
     if (options.inlineStyle) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.${options.style}`));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `/src/app/app.component.${options.style}`));
     }
     if (options.minimal) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/nx-welcome${componentFileSuffix}.ts`));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/app/nx-welcome.component.ts'));
     }
 }

package/src/generators/application/lib/create-project.d.ts

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