@nx/angular 21.1.2 → 21.2.0-beta.2

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

@@ -810,4 +810,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/standalone-components/src/app/app.config.ts__tpl__

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

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

@@ -0,0 +1,27 @@
+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: [App<%= componentType %><% if(!minimal) { %>, NxWelcome<%= componentType %><% } %><% if(routing) { %>, RouterModule.forRoot([])<% } %>],
+    }).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/standalone-components/src/app/{app.component.ts__tpl__ → app__componentFileSuffix__.ts__tpl__}

@@ -1,17 +1,17 @@
 import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from '@angular/core';<% if(routing) { %>
 import { RouterModule } from '@angular/router';<% } %><% if(!minimal) { %>
-import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
+import { NxWelcome<%= componentType %> } from './nx-welcome<%= componentFileSuffix %>';<% } %>
 
 @Component({<% if (setStandaloneTrue) { %>
   standalone: true,<% } %>
-  imports: [<% if(!minimal) { %>NxWelcomeComponent, <% } %><% if(routing) { %>RouterModule<% } %>],
+  imports: [<% if(!minimal) { %>NxWelcome<%= componentType %>, <% } %><% if(routing) { %>RouterModule<% } %>],
   selector: '<%= rootSelector %>',<% 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/standalone-components/src/main.ts__tpl__

@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { App<%= componentType %> } from './app/app<%= componentFileSuffix %>';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
+bootstrapApplication(App<%= componentType %>, 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,16 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFiles = createFiles;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-const semver_1 = require("semver");
+const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
 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';
-    const disableModernClassFieldsBehavior = (0, semver_1.lt)(angularVersion, '18.1.0-rc.0');
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const rootSelector = `${options.prefix}-root`;
     (0, selector_1.validateHtmlSelector)(rootSelector);
     const nxWelcomeSelector = `${options.prefix}-nx-welcome`;
@@ -20,6 +18,9 @@ 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,
@@ -34,13 +35,14 @@ async function createFiles(tree, options, rootOffset) {
         rootTsConfig: (0, devkit_1.joinPathFragments)(rootOffset, (0, js_1.getRootTsConfigFileName)(tree)),
         angularMajorVersion,
         rootOffset,
-        isUsingApplicationBuilder,
-        disableModernClassFieldsBehavior,
-        useEventCoalescing: angularMajorVersion >= 18,
-        useRouterTestingModule: angularMajorVersion < 18,
-        // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+        // Angular v19 or higher defaults to true, while lower versions default 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'
@@ -49,11 +51,8 @@ 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 (angularMajorVersion >= 20) {
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.editor.json'));
     }
     if (options.standalone) {
         (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/standalone-components'), options.appProjectRoot, substitutions);
@@ -67,15 +66,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.component.spec.ts'));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.spec.ts`));
     }
     if (options.inlineTemplate) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, '/src/app/app.component.html'));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.html`));
     }
     if (options.inlineStyle) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `/src/app/app.component.${options.style}`));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.${options.style}`));
     }
     if (options.minimal) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/app/nx-welcome.component.ts'));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/nx-welcome${componentFileSuffix}.ts`));
     }
 }

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

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

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

@@ -2,14 +2,117 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createProject = createProject;
 const devkit_1 = require("@nx/devkit");
-const version_utils_1 = require("../../utils/version-utils");
 const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
+const version_utils_1 = require("../../utils/version-utils");
 function createProject(tree, options) {
+    let project;
+    if (options.bundler === 'esbuild') {
+        project = createProjectForEsbuild(tree, options);
+    }
+    else {
+        project = createProjectForWebpack(tree, options);
+    }
+    (0, devkit_1.addProjectConfiguration)(tree, options.name, project);
+}
+function createProjectForEsbuild(tree, options) {
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    const buildExecutor = options.bundler === 'webpack'
-        ? '@angular-devkit/build-angular:browser'
+    const buildExecutor = angularMajorVersion >= 20
+        ? '@angular/build:application'
         : '@angular-devkit/build-angular:application';
-    const buildMainOptionName = options.bundler === 'esbuild' ? 'browser' : 'main';
+    (0, target_defaults_utils_1.addBuildTargetDefaults)(tree, buildExecutor);
+    let budgets = undefined;
+    if (options.strict) {
+        budgets = [
+            { type: 'initial', maximumWarning: '500kb', maximumError: '1mb' },
+            {
+                type: 'anyComponentStyle',
+                maximumWarning: '4kb',
+                maximumError: '8kb',
+            },
+        ];
+    }
+    else {
+        budgets = [
+            { type: 'initial', maximumWarning: '2mb', maximumError: '5mb' },
+            {
+                type: 'anyComponentStyle',
+                maximumWarning: '6kb',
+                maximumError: '10kb',
+            },
+        ];
+    }
+    const inlineStyleLanguage = options?.style !== 'css' ? options.style : undefined;
+    const project = {
+        name: options.name,
+        projectType: 'application',
+        prefix: options.prefix,
+        root: options.appProjectRoot,
+        sourceRoot: options.appProjectSourceRoot,
+        tags: options.parsedTags,
+        targets: {
+            build: {
+                executor: buildExecutor,
+                outputs: ['{options.outputPath}'],
+                options: {
+                    outputPath: options.outputPath,
+                    index: angularMajorVersion >= 20
+                        ? undefined
+                        : `${options.appProjectSourceRoot}/index.html`,
+                    browser: `${options.appProjectSourceRoot}/main.ts`,
+                    polyfills: ['zone.js'],
+                    tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+                    inlineStyleLanguage,
+                    assets: [
+                        {
+                            glob: '**/*',
+                            input: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'public'),
+                        },
+                    ],
+                    styles: [`${options.appProjectSourceRoot}/styles.${options.style}`],
+                },
+                configurations: {
+                    production: {
+                        budgets,
+                        outputHashing: 'all',
+                    },
+                    development: {
+                        optimization: false,
+                        extractLicenses: false,
+                        sourceMap: true,
+                    },
+                },
+                defaultConfiguration: 'production',
+            },
+            serve: {
+                continuous: true,
+                executor: angularMajorVersion >= 20
+                    ? '@angular/build:dev-server'
+                    : '@angular-devkit/build-angular:dev-server',
+                options: options.port ? { port: options.port } : undefined,
+                configurations: {
+                    production: {
+                        buildTarget: `${options.name}:build:production`,
+                    },
+                    development: {
+                        buildTarget: `${options.name}:build:development`,
+                    },
+                },
+                defaultConfiguration: 'development',
+            },
+            'extract-i18n': {
+                executor: angularMajorVersion >= 20
+                    ? '@angular/build:extract-i18n'
+                    : '@angular-devkit/build-angular:extract-i18n',
+                options: {
+                    buildTarget: `${options.name}:build`,
+                },
+            },
+        },
+    };
+    return project;
+}
+function createProjectForWebpack(tree, options) {
+    const buildExecutor = '@angular-devkit/build-angular:browser';
     (0, target_defaults_utils_1.addBuildTargetDefaults)(tree, buildExecutor);
     let budgets = undefined;
     if (options.strict) {
@@ -47,23 +150,17 @@ function createProject(tree, options) {
                 options: {
                     outputPath: options.outputPath,
                     index: `${options.appProjectSourceRoot}/index.html`,
-                    [buildMainOptionName]: `${options.appProjectSourceRoot}/main.ts`,
+                    main: `${options.appProjectSourceRoot}/main.ts`,
                     polyfills: ['zone.js'],
                     tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
                     inlineStyleLanguage,
-                    assets: angularMajorVersion >= 18
-                        ? [
-                            {
-                                glob: '**/*',
-                                input: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'public'),
-                            },
-                        ]
-                        : [
-                            `${options.appProjectSourceRoot}/favicon.ico`,
-                            `${options.appProjectSourceRoot}/assets`,
-                        ],
+                    assets: [
+                        {
+                            glob: '**/*',
+                            input: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'public'),
+                        },
+                    ],
                     styles: [`${options.appProjectSourceRoot}/styles.${options.style}`],
-                    scripts: [],
                 },
                 configurations: {
                     production: {
@@ -71,12 +168,12 @@ function createProject(tree, options) {
                         outputHashing: 'all',
                     },
                     development: {
-                        buildOptimizer: options.bundler === 'webpack' ? false : undefined,
+                        buildOptimizer: false,
                         optimization: false,
-                        vendorChunk: options.bundler === 'webpack' ? true : undefined,
+                        vendorChunk: true,
                         extractLicenses: false,
                         sourceMap: true,
-                        namedChunks: options.bundler === 'webpack' ? true : undefined,
+                        namedChunks: true,
                     },
                 },
                 defaultConfiguration: 'production',
@@ -84,11 +181,7 @@ function createProject(tree, options) {
             serve: {
                 continuous: true,
                 executor: '@angular-devkit/build-angular:dev-server',
-                options: options.port
-                    ? {
-                        port: options.port,
-                    }
-                    : undefined,
+                options: options.port ? { port: options.port } : undefined,
                 configurations: {
                     production: {
                         buildTarget: `${options.name}:build:production`,
@@ -107,5 +200,5 @@ function createProject(tree, options) {
             },
         },
     };
-    (0, devkit_1.addProjectConfiguration)(tree, options.name, project);
+    return project;
 }

package/src/generators/application/lib/enable-strict-type-checking.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableStrictTypeChecking = enableStrictTypeChecking;
 const devkit_1 = require("@nx/devkit");
+const version_utils_1 = require("../../utils/version-utils");
 function enableStrictTypeChecking(host, options) {
     // This matches the settings defined by the Angular CLI https://angular.io/guide/strict-mode
     const compilerOptions = {
-        forceConsistentCasingInFileNames: true,
         strict: true,
         noImplicitOverride: true,
         noPropertyAccessFromIndexSignature: true,
@@ -14,12 +14,14 @@ function enableStrictTypeChecking(host, options) {
     };
     const appTsConfigPath = `${options.appProjectRoot}/tsconfig.json`;
     if (host.exists(appTsConfigPath)) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(host);
         (0, devkit_1.updateJson)(host, appTsConfigPath, (json) => {
             json.compilerOptions = { ...json.compilerOptions, ...compilerOptions };
             json.angularCompilerOptions = {
-                enableI18nLegacyMessageIdFormat: false,
+                ...json.angularCompilerOptions,
                 strictInjectionParameters: true,
                 strictInputAccessModifiers: true,
+                typeCheckHostBindings: angularMajorVersion >= 20 ? true : undefined,
                 strictTemplates: true,
             };
             return json;

package/src/generators/application/lib/index.d.ts

@@ -7,7 +7,6 @@ export * from './create-project';
 export * from './enable-strict-type-checking';
 export * from './normalize-options';
 export * from './normalized-schema';
-export * from './set-app-strict-default';
 export * from './set-generator-defaults';
-export * from './update-editor-tsconfig';
+export * from './update-tsconfig-files';
 export * from './add-serve-static-target';

package/src/generators/application/lib/index.js

@@ -10,7 +10,6 @@ tslib_1.__exportStar(require("./create-project"), exports);
 tslib_1.__exportStar(require("./enable-strict-type-checking"), exports);
 tslib_1.__exportStar(require("./normalize-options"), exports);
 tslib_1.__exportStar(require("./normalized-schema"), exports);
-tslib_1.__exportStar(require("./set-app-strict-default"), exports);
 tslib_1.__exportStar(require("./set-generator-defaults"), exports);
-tslib_1.__exportStar(require("./update-editor-tsconfig"), exports);
+tslib_1.__exportStar(require("./update-tsconfig-files"), exports);
 tslib_1.__exportStar(require("./add-serve-static-target"), exports);

package/src/generators/application/lib/set-generator-defaults.js

@@ -10,6 +10,7 @@ function setGeneratorDefaults(tree, options) {
         linter: options.linter,
         style: options.style,
         unitTestRunner: options.unitTestRunner,
+        strict: !options.strict ? false : undefined,
         ...(nxJson.generators['@nx/angular:application'] || {}),
     };
     (0, devkit_1.updateNxJson)(tree, nxJson);

package/src/generators/application/lib/{update-editor-tsconfig.d.ts → update-tsconfig-files.d.ts}

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

package/src/generators/application/lib/update-tsconfig-files.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateTsconfigFiles = updateTsconfigFiles;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const configuration_1 = require("@nx/js/src/utils/typescript/configuration");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const semver_1 = require("semver");
+const update_app_editor_tsconfig_excluded_files_1 = require("../../utils/update-app-editor-tsconfig-excluded-files");
+const version_utils_1 = require("../../utils/version-utils");
+const enable_strict_type_checking_1 = require("./enable-strict-type-checking");
+function updateTsconfigFiles(tree, options) {
+    (0, enable_strict_type_checking_1.enableStrictTypeChecking)(tree, options);
+    updateEditorTsConfig(tree, options);
+    const compilerOptions = {
+        skipLibCheck: true,
+        experimentalDecorators: true,
+        importHelpers: true,
+        target: 'es2022',
+        moduleResolution: 'bundler',
+    };
+    const rootTsConfigPath = (0, js_1.getRootTsConfigFileName)(tree);
+    const { major: angularMajorVersion, version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    if ((0, semver_1.lt)(angularVersion, '18.1.0')) {
+        compilerOptions.useDefineForClassFields = false;
+    }
+    if ((0, semver_1.gte)(angularVersion, '18.2.0')) {
+        compilerOptions.isolatedModules = true;
+    }
+    if ((0, semver_1.gte)(angularVersion, '19.1.0')) {
+        // Angular started warning about emitDecoratorMetadata and isolatedModules
+        // in v19.1.0. If enabled in the root tsconfig, we need to disable it.
+        if (shouldDisableEmitDecoratorMetadata(tree, rootTsConfigPath)) {
+            compilerOptions.emitDecoratorMetadata = false;
+        }
+    }
+    if (angularMajorVersion >= 20) {
+        compilerOptions.module = 'preserve';
+    }
+    else {
+        compilerOptions.module = 'es2022';
+        if (options.bundler === 'esbuild') {
+            compilerOptions.esModuleInterop = true;
+        }
+    }
+    const tsconfigPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.json');
+    (0, devkit_1.updateJson)(tree, tsconfigPath, (json) => {
+        json.compilerOptions = {
+            ...json.compilerOptions,
+            ...compilerOptions,
+        };
+        json.compilerOptions = (0, configuration_1.getNeededCompilerOptionOverrides)(tree, json.compilerOptions, rootTsConfigPath);
+        return json;
+    });
+    if (options.unitTestRunner === 'jest') {
+        const tsconfigSpecPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.spec.json');
+        (0, devkit_1.updateJson)(tree, tsconfigSpecPath, (json) => {
+            json.compilerOptions = {
+                ...json.compilerOptions,
+                module: 'commonjs',
+                moduleResolution: 'node10',
+            };
+            json.compilerOptions = (0, configuration_1.getNeededCompilerOptionOverrides)(tree, json.compilerOptions, tsconfigPath);
+            return json;
+        });
+    }
+}
+function updateEditorTsConfig(tree, options) {
+    const tsconfigEditorPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.editor.json');
+    if (!tree.exists(tsconfigEditorPath)) {
+        return;
+    }
+    const appTsConfig = (0, devkit_1.readJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'));
+    const types = appTsConfig?.compilerOptions?.types ?? [];
+    if (types?.length) {
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.editor.json'), (json) => {
+            json.compilerOptions ??= {};
+            json.compilerOptions.types = Array.from(new Set(types));
+            return json;
+        });
+    }
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.name);
+    (0, update_app_editor_tsconfig_excluded_files_1.updateAppEditorTsConfigExcludedFiles)(tree, project);
+}
+function shouldDisableEmitDecoratorMetadata(tree, tsConfigPath) {
+    const ts = (0, ensure_typescript_1.ensureTypescript)();
+    const tsSysFromTree = {
+        ...ts.sys,
+        readFile: (path) => tree.read(path, 'utf-8'),
+    };
+    const parsed = ts.parseJsonConfigFileContent(ts.readConfigFile(tsConfigPath, tsSysFromTree.readFile).config, tsSysFromTree, tree.root);
+    return parsed.options.emitDecoratorMetadata === true;
+}

package/src/generators/application/schema.json

@@ -177,7 +177,7 @@
       "default": false
     },
     "serverRouting": {
-      "description": "Creates a server application using the Server Routing and App Engine APIs (Developer Preview). _Note: this is only supported in Angular versions >= 19.0.0_.",
+      "description": "Creates a server application using the Server Routing and App Engine APIs for application using the `application` builder (Developer Preview). _Note: this is only supported in Angular versions 19.x.x_. From Angular 20 onwards, SSR will always enable server routing when using the `application` builder.",
       "type": "boolean"
     }
   },

package/src/generators/component/component.js

@@ -22,10 +22,11 @@ async function componentGenerator(tree, rawOptions) {
         viewEncapsulation: options.viewEncapsulation,
         displayBlock: options.displayBlock,
         selector: options.selector,
-        // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+        // Angular v19 or higher defaults to true, while lower versions default to false
         setStandalone: (angularMajorVersion >= 19 && !options.standalone) ||
             (angularMajorVersion < 19 && options.standalone),
         angularMajorVersion,
+        ngext: options.ngHtml ? '.ng' : '',
         tpl: '',
     });
     if (options.skipTests) {
@@ -41,7 +42,17 @@ async function componentGenerator(tree, rawOptions) {
         tree.delete(pathToStyleFile);
     }
     if (!options.skipImport && !options.standalone) {
-        const modulePath = (0, lib_1.findModuleFromOptions)(tree, options, options.projectRoot);
+        let modulePath;
+        try {
+            modulePath = (0, lib_1.findModuleFromOptions)(tree, options, options.projectRoot);
+        }
+        catch (e) {
+            modulePath = (0, lib_1.findModuleFromOptions)(tree, {
+                ...options,
+                moduleExt: '-module.ts',
+                routingModuleExt: '-routing-module.ts',
+            }, options.projectRoot);
+        }
         (0, utils_1.addToNgModule)(tree, options.directory, modulePath, options.name, options.symbolName, options.fileName, 'declarations', true, options.export);
     }
     (0, lib_1.exportComponentInEntryPoint)(tree, options);

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

@@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';<% } %>
   standalone: <%= standalone %>,<% } %><% if(standalone) { %>
   imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
   template: `<p><%= name %> works!</p>`<% } else { %>
-  templateUrl: './<%= fileName %>.html'<% } if(inlineStyle) { %>,
+  templateUrl: './<%= fileName %><%= ngext %>.html'<% } if(inlineStyle) { %>,
   styles: `<% if(displayBlock){ %>
     :host {
       display: block;

package/src/generators/component/lib/component.js

@@ -21,7 +21,17 @@ function exportComponentInEntryPoint(tree, schema) {
         return;
     }
     if (!schema.standalone) {
-        const modulePath = (0, module_1.findModuleFromOptions)(tree, schema, root);
+        let modulePath;
+        try {
+            modulePath = (0, module_1.findModuleFromOptions)(tree, schema, root);
+        }
+        catch (e) {
+            modulePath = (0, module_1.findModuleFromOptions)(tree, {
+                ...schema,
+                moduleExt: '-module.ts',
+                routingModuleExt: '-routing-module.ts',
+            }, root);
+        }
         if (!shouldExportInEntryPoint(tree, entryPointPath, modulePath)) {
             return;
         }

package/src/generators/component/lib/module.d.ts

@@ -1,3 +1,8 @@
 import type { Tree } from '@nx/devkit';
-import type { NormalizedSchema } from '../schema';
-export declare function findModuleFromOptions(tree: Tree, options: NormalizedSchema, projectRoot: string): string;
+export type ModuleOptions = {
+    directory: string;
+    module?: string;
+    moduleExt?: string;
+    routingModuleExt?: string;
+};
+export declare function findModuleFromOptions(tree: Tree, options: ModuleOptions, projectRoot: string): string;