@nx/angular 21.1.1 → 21.2.0-beta.1

package/src/generators/utils/add-jest.js

@@ -3,10 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addJest = addJest;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
+const version_utils_1 = require("./version-utils");
 async function addJest(tree, options) {
     if (!options.skipPackageJson) {
         process.env.npm_config_legacy_peer_deps ??= 'true';
-        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { 'jest-preset-angular': versions_1.jestPresetAngularVersion }, undefined, true);
+        const pkgVersions = (0, version_utils_1.versions)(tree);
+        (0, devkit_1.addDependenciesToPackageJson)(tree, {
+            // TODO(leo): jest-preset-angular still needs this until https://github.com/thymikee/jest-preset-angular/pull/3079 is merged
+            '@angular/platform-browser-dynamic': pkgVersions.angularVersion,
+        }, { 'jest-preset-angular': pkgVersions.jestPresetAngularVersion }, undefined, true);
     }
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
     await configurationGenerator(tree, {

package/src/generators/utils/app-components-info.d.ts

@@ -0,0 +1,9 @@
+import { type ProjectConfiguration, type Tree } from '@nx/devkit';
+export type ComponentMetadata = {
+    fileName: string;
+    extensionlessFileName: string;
+    path: string;
+    symbolName: string;
+};
+export declare function getAppComponentInfo(tree: Tree, componentFileSuffix: string, project: ProjectConfiguration): ComponentMetadata;
+export declare function getNxWelcomeComponentInfo(tree: Tree, componentFileSuffix: string, project: ProjectConfiguration): ComponentMetadata;

package/src/generators/utils/app-components-info.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppComponentInfo = getAppComponentInfo;
+exports.getNxWelcomeComponentInfo = getNxWelcomeComponentInfo;
+const devkit_1 = require("@nx/devkit");
+const node_path_1 = require("node:path");
+const version_utils_1 = require("./version-utils");
+function getAppComponentInfo(tree, componentFileSuffix, project) {
+    return getComponentInfo(tree, 'app', componentFileSuffix, project);
+}
+function getNxWelcomeComponentInfo(tree, componentFileSuffix, project) {
+    return getComponentInfo(tree, 'nx-welcome', componentFileSuffix, project);
+}
+// TODO(leo): follow this up and improve it by using static analysis
+function getComponentInfo(tree, component, componentFileSuffix, project) {
+    let componentPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${component}.component.ts`);
+    if (!tree.exists(componentPath)) {
+        componentPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${component}.ts`);
+    }
+    if (!tree.exists(componentPath)) {
+        if (componentFileSuffix) {
+            componentPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${component}${componentFileSuffix}.ts`);
+        }
+    }
+    if (!tree.exists(componentPath)) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        componentPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, angularMajorVersion >= 20
+            ? `app/${component}.ts`
+            : `app/${component}.component.ts`);
+    }
+    const fileName = (0, node_path_1.basename)(componentPath);
+    const extensionlessFileName = fileName.slice(0, -3);
+    return {
+        fileName,
+        extensionlessFileName,
+        path: componentPath,
+        symbolName: (0, devkit_1.names)(extensionlessFileName).className,
+    };
+}

package/src/generators/utils/artifact-types.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+export declare function getComponentType(tree: Tree): string | undefined;
+export declare function getModuleTypeSeparator(tree: Tree): '-' | '.';

package/src/generators/utils/artifact-types.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentType = getComponentType;
+exports.getModuleTypeSeparator = getModuleTypeSeparator;
+const devkit_1 = require("@nx/devkit");
+const version_utils_1 = require("./version-utils");
+function getComponentType(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    let componentType = nxJson.generators?.['@nx/angular:component']?.type ??
+        nxJson.generators?.['@nx/angular']?.component?.type;
+    if (!componentType) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        if (angularMajorVersion < 20) {
+            componentType = 'component';
+        }
+    }
+    return componentType;
+}
+function getModuleTypeSeparator(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    // We don't have a "module" generator but the @nx/angular collection extends
+    // from the @schematics/angular collection so the "module" generator is
+    // available there. We check for a generator default for each collection.
+    let typeSeparator = nxJson.generators?.['@nx/angular:module']?.typeSeparator ??
+        nxJson.generators?.['@nx/angular']?.module?.typeSeparator ??
+        nxJson.generators?.['@schematics/angular:module']?.typeSeparator ??
+        nxJson.generators?.['@schematics/angular']?.module?.typeSeparator;
+    if (!typeSeparator) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        typeSeparator = angularMajorVersion >= 20 ? '-' : '.';
+    }
+    return typeSeparator;
+}

package/src/generators/utils/assert-mf-utils.d.ts

@@ -0,0 +1 @@
+export declare function assertRspackIsCSR(bundler: 'webpack' | 'rspack', ssr: boolean, serverRouting: boolean): void;

package/src/generators/utils/assert-mf-utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertRspackIsCSR = assertRspackIsCSR;
+function assertRspackIsCSR(bundler, ssr, serverRouting) {
+    if (bundler === 'rspack' && serverRouting) {
+        throw new Error('Server Routing is not currently supported for Angular Rspack Module Federation. Please use webpack instead.');
+    }
+    if (bundler === 'rspack' && ssr) {
+        throw new Error('SSR is not currently supported for Angular Rspack Module Federation. Please use webpack instead.');
+    }
+}

package/src/generators/utils/ensure-angular-dependencies.js

@@ -24,13 +24,12 @@ function ensureAngularDependencies(tree) {
         dependencies['@angular/core'] = angularVersion;
         dependencies['@angular/forms'] = angularVersion;
         dependencies['@angular/platform-browser'] = angularVersion;
-        dependencies['@angular/platform-browser-dynamic'] = angularVersion;
         dependencies['@angular/router'] = angularVersion;
         dependencies.rxjs = rxjsVersion;
         dependencies.tslib = tsLibVersion;
         dependencies['zone.js'] = zoneJsVersion;
     }
-    const installedAngularDevkitVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, '@angular-devkit/build-angular');
+    const installedAngularDevkitVersion = (0, version_utils_1.getInstalledAngularDevkitVersion)(tree);
     if (!installedAngularDevkitVersion) {
         /**
          * If `@angular-devkit/build-angular` is already installed, we assume the workspace
@@ -43,8 +42,12 @@ function ensureAngularDependencies(tree) {
     }
     // Ensure the `@nx/angular` peer dependencies are always installed.
     const angularDevkitVersion = installedAngularDevkitVersion ?? pkgVersions.angularDevkitVersion;
-    devDependencies['@angular-devkit/build-angular'] = angularDevkitVersion;
     devDependencies['@angular-devkit/schematics'] = angularDevkitVersion;
     devDependencies['@schematics/angular'] = angularDevkitVersion;
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    if (angularMajorVersion < 20) {
+        devDependencies['@angular/build'] = angularDevkitVersion;
+        devDependencies['@angular-devkit/build-angular'] = angularDevkitVersion;
+    }
     return (0, devkit_1.addDependenciesToPackageJson)(tree, dependencies, devDependencies, undefined, true);
 }

package/src/generators/utils/export-scam.d.ts

@@ -4,6 +4,7 @@ export type GenerationOptions = {
     filePath: string;
     name: string;
     projectName: string;
+    modulePath: string;
     export?: boolean;
     inlineScam?: boolean;
 };

package/src/generators/utils/export-scam.js

@@ -27,8 +27,7 @@ function exportScam(tree, options) {
     let updatedEntryPointContent = (0, devkit_1.stripIndents) `${entryPointContent}
     export * from '${relativePathFromEntryPoint}';`;
     if (!options.inlineScam) {
-        const moduleFilePath = (0, devkit_1.joinPathFragments)(options.directory, `${(0, devkit_1.names)(options.name).fileName}.module.ts`);
-        const relativePathFromModule = (0, path_1.getRelativeImportToFile)(entryPointPath, moduleFilePath);
+        const relativePathFromModule = (0, path_1.getRelativeImportToFile)(entryPointPath, options.modulePath);
         updatedEntryPointContent = (0, devkit_1.stripIndents) `${updatedEntryPointContent}
         export * from '${relativePathFromModule}';`;
     }

package/src/generators/utils/find-module.js

@@ -9,38 +9,43 @@ const js_1 = require("@nx/js");
 const insert_ngmodule_import_1 = require("./insert-ngmodule-import");
 let tsModule;
 function findModule(tree, path, module) {
-    let modulePath = '';
+    const candidatePaths = [];
     let pathToSearch = path;
     while (pathToSearch !== '.' && pathToSearch !== '/') {
         if (module) {
             const pathToModule = (0, devkit_1.joinPathFragments)(pathToSearch, module);
             if (tree.exists(pathToModule)) {
-                modulePath = pathToModule;
+                candidatePaths.push(pathToModule);
                 break;
             }
         }
         else {
             const potentialOptions = tree
                 .children(pathToSearch)
-                .filter((f) => f.endsWith('.module.ts'));
-            if (potentialOptions.length > 1) {
-                throw new Error(`More than one NgModule was found. Please provide the NgModule you wish to use.`);
-            }
-            else if (potentialOptions.length === 1) {
-                modulePath = (0, devkit_1.joinPathFragments)(pathToSearch, potentialOptions[0]);
+                .filter((f) => f.endsWith('.module.ts') || f.endsWith('-module.ts'));
+            if (potentialOptions.length > 0) {
+                candidatePaths.push(...potentialOptions.map((p) => (0, devkit_1.joinPathFragments)(pathToSearch, p)));
                 break;
             }
         }
         pathToSearch = (0, path_1.dirname)(pathToSearch);
     }
-    if (modulePath === '') {
+    if (candidatePaths.length === 0) {
         throw new Error('Could not find a declaring module file.');
     }
-    const moduleContents = tree.read(modulePath, 'utf-8');
-    if (!moduleContents.includes('@NgModule')) {
-        throw new Error(`Declaring module file (${modulePath}) does not contain an @NgModule Declaration.`);
+    const modules = candidatePaths.filter((p) => {
+        const moduleContents = tree.read(p, 'utf-8');
+        return moduleContents.includes('@NgModule');
+    });
+    if (modules.length === 0) {
+        throw new Error(candidatePaths.length === 1
+            ? `Declaring module file (${candidatePaths[0]}) does not contain an @NgModule Declaration.`
+            : `Declaring module files (${candidatePaths.join(', ')}) do not contain an @NgModule Declaration.`);
+    }
+    if (modules.length > 1) {
+        throw new Error(`More than one NgModule was found. Please provide the NgModule you wish to use.`);
     }
-    return modulePath;
+    return modules[0];
 }
 function addToNgModule(tree, path, modulePath, name, className, fileName, ngModuleProperty, 
 // TODO(leo): remove once all consumers are updated

package/src/generators/utils/storybook-ast/component-info.js

@@ -14,15 +14,15 @@ function getComponentsInfo(tree, entryPoint, moduleFilePaths, projectName) {
     return moduleFilePaths
         .flatMap((moduleFilePath) => {
         const file = (0, ast_utils_1.getTsSourceFile)(tree, moduleFilePath);
-        const declaredComponents = (0, module_info_1.getModuleDeclaredComponents)(file, moduleFilePath, projectName);
-        if (declaredComponents.length === 0) {
+        const moduleDeclarations = (0, module_info_1.getModuleDeclarations)(file, moduleFilePath, projectName);
+        if (moduleDeclarations.length === 0) {
             return undefined;
         }
         if (!tsModule) {
             tsModule = (0, ensure_typescript_1.ensureTypescript)();
         }
         const imports = file.statements.filter((statement) => statement.kind === tsModule.SyntaxKind.ImportDeclaration);
-        const componentsInfo = declaredComponents.map((componentName) => getComponentInfo(tree, entryPoint, file, imports, moduleFilePath, componentName));
+        const componentsInfo = moduleDeclarations.map((maybeComponentName) => tryGetComponentInfo(tree, entryPoint, file, imports, moduleFilePath, maybeComponentName));
         return componentsInfo;
     })
         .filter((f) => f !== undefined);
@@ -100,7 +100,7 @@ function getComponentImportPath(componentName, imports) {
         .slice(1, -1);
     return importPath;
 }
-function getComponentInfo(tree, entryPoint, sourceFile, imports, moduleFilePath, componentName) {
+function tryGetComponentInfo(tree, entryPoint, sourceFile, imports, moduleFilePath, symbolName) {
     try {
         if (!tsquery) {
             (0, ensure_typescript_1.ensureTypescript)();
@@ -108,38 +108,53 @@ function getComponentInfo(tree, entryPoint, sourceFile, imports, moduleFilePath,
         }
         const moduleFolderPath = (0, path_1.dirname)(moduleFilePath);
         // try to get the component from the same file (inline scam)
-        const node = tsquery(sourceFile, `ClassDeclaration:has(Decorator > CallExpression > Identifier[name=Component]):has(Identifier[name=${componentName}])`, { visitAllChildren: true })[0];
+        const node = tsquery(sourceFile, `ClassDeclaration:has(Decorator > CallExpression > Identifier[name=Component]):has(Identifier[name=${symbolName}])`, { visitAllChildren: true })[0];
         if (node) {
             return {
                 componentFileName: (0, path_1.basename)(moduleFilePath, '.ts'),
                 moduleFolderPath,
-                name: componentName,
+                name: symbolName,
                 path: '.',
                 entryPointName: entryPoint.name,
             };
         }
         // try to get the component from the imports
-        const componentFilePathRelativeToModule = getComponentImportPath(componentName, imports);
-        const componentImportPath = getFullComponentFilePath(moduleFolderPath, componentFilePathRelativeToModule);
-        if (tree.exists(componentImportPath) && !tree.isFile(componentImportPath)) {
-            return getComponentInfoFromDir(tree, entryPoint, componentImportPath, componentName, moduleFolderPath);
+        const symbolFilePathRelativeToModule = getComponentImportPath(symbolName, imports);
+        let symbolImportPath = getFullComponentFilePath(moduleFolderPath, symbolFilePathRelativeToModule);
+        if (tree.exists(symbolImportPath) && !tree.isFile(symbolImportPath)) {
+            return tryGetComponentInfoFromDir(tree, entryPoint, symbolImportPath, symbolName, moduleFolderPath);
         }
-        const path = (0, path_1.dirname)(componentFilePathRelativeToModule);
-        const componentFileName = (0, path_1.basename)(componentFilePathRelativeToModule);
-        return {
-            componentFileName,
-            moduleFolderPath,
-            name: componentName,
-            path,
-            entryPointName: entryPoint.name,
-        };
+        const candidatePaths = [
+            symbolImportPath,
+            `${symbolImportPath}.ts`,
+            `${symbolImportPath}.js`,
+        ];
+        for (const candidatePath of candidatePaths) {
+            if (!tree.exists(candidatePath)) {
+                continue;
+            }
+            const content = tree.read(candidatePath, 'utf-8');
+            const classAndComponentRegex = new RegExp(`@Component[\\s\\S\n]*?\\bclass ${symbolName}\\b`, 'g');
+            if (content.match(classAndComponentRegex)) {
+                const path = (0, path_1.dirname)(symbolFilePathRelativeToModule);
+                const componentFileName = (0, path_1.basename)(symbolFilePathRelativeToModule);
+                return {
+                    componentFileName,
+                    moduleFolderPath,
+                    name: symbolName,
+                    path,
+                    entryPointName: entryPoint.name,
+                };
+            }
+        }
+        return undefined;
     }
     catch (ex) {
-        devkit_1.logger.warn(`Could not generate a story for ${componentName}. Error: ${ex}`);
+        devkit_1.logger.warn(`Could not generate a story for ${symbolName}. Error: ${ex}`);
         return undefined;
     }
 }
-function getComponentInfoFromDir(tree, entryPoint, dir, componentName, moduleFolderPath) {
+function tryGetComponentInfoFromDir(tree, entryPoint, dir, symbolName, moduleFolderPath) {
     let path = null;
     let componentFileName = null;
     const componentImportPathChildren = [];
@@ -149,7 +164,7 @@ function getComponentInfoFromDir(tree, entryPoint, dir, componentName, moduleFol
     for (const candidateFile of componentImportPathChildren) {
         if (candidateFile.endsWith('.ts')) {
             const content = tree.read(candidateFile, 'utf-8');
-            const classAndComponentRegex = new RegExp(`@Component[\\s\\S\n]*?\\bclass ${componentName}\\b`, 'g');
+            const classAndComponentRegex = new RegExp(`@Component[\\s\\S\n]*?\\bclass ${symbolName}\\b`, 'g');
             if (content.match(classAndComponentRegex)) {
                 path = candidateFile
                     .slice(0, candidateFile.lastIndexOf('/'))
@@ -160,12 +175,13 @@ function getComponentInfoFromDir(tree, entryPoint, dir, componentName, moduleFol
         }
     }
     if (path === null) {
-        throw new Error(`Path to component ${componentName} couldn't be found. Please open an issue on https://github.com/nrwl/nx/issues.`);
+        console.warn(`Couldn't resolve "${symbolName}" imported from ${dir} relative to ${moduleFolderPath}.`);
+        return undefined;
     }
     return {
         componentFileName,
         moduleFolderPath,
-        name: componentName,
+        name: symbolName,
         path,
         entryPointName: entryPoint.name,
     };

package/src/generators/utils/storybook-ast/module-info.d.ts

@@ -1,5 +1,5 @@
 import type { Tree } from '@nx/devkit';
 import type { SourceFile } from 'typescript';
 import type { EntryPoint } from './entry-point';
-export declare function getModuleDeclaredComponents(file: SourceFile, moduleFilePath: string, projectName: string): string[];
+export declare function getModuleDeclarations(file: SourceFile, moduleFilePath: string, projectName: string): string[];
 export declare function getModuleFilePaths(tree: Tree, entryPoint: EntryPoint): string[];

package/src/generators/utils/storybook-ast/module-info.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getModuleDeclaredComponents = getModuleDeclaredComponents;
+exports.getModuleDeclarations = getModuleDeclarations;
 exports.getModuleFilePaths = getModuleFilePaths;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
@@ -8,7 +8,7 @@ const path_1 = require("path");
 const ast_utils_1 = require("../../../utils/nx-devkit/ast-utils");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 let tsModule;
-function getModuleDeclaredComponents(file, moduleFilePath, projectName) {
+function getModuleDeclarations(file, moduleFilePath, projectName) {
     const ngModuleDecorator = getNgModuleDecorator(file, moduleFilePath);
     const declarationsPropertyAssignment = getNgModuleDeclarationsPropertyAssignment(ngModuleDecorator, moduleFilePath, projectName);
     if (!declarationsPropertyAssignment) {
@@ -18,7 +18,7 @@ function getModuleDeclaredComponents(file, moduleFilePath, projectName) {
     if (!declarationsArray) {
         return [];
     }
-    return getDeclaredComponentsInDeclarations(declarationsArray);
+    return getDeclaredComponentNodes(declarationsArray).map((node) => node.getText());
 }
 function getModuleFilePaths(tree, entryPoint) {
     let moduleFilePaths = [];
@@ -43,11 +43,6 @@ function hasNgModule(tree, filePath) {
     const ngModule = tsquery(ast, 'ClassDeclaration > Decorator > CallExpression > Identifier[name=NgModule]', { visitAllChildren: true });
     return ngModule.length > 0;
 }
-function getDeclaredComponentsInDeclarations(declarationsArray) {
-    return getDeclaredComponentNodes(declarationsArray)
-        .map((node) => node.getText())
-        .filter((name) => name.endsWith('Component'));
-}
 function getDeclaredComponentNodes(declarationsArray) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();

package/src/generators/utils/testing.js

@@ -52,24 +52,24 @@ async function createStorybookTestWorkspaceForLib(libName) {
         standalone: false,
         skipFormat: true,
     });
-    tree.write(`${libName}/src/lib/test-button/test-button.component.ts`, `import { Component, Input } from '@angular/core';
+    tree.write(`${libName}/src/lib/test-button/test-button.ts`, `import { Component, Input } from '@angular/core';
 
 export type ButtonStyle = 'default' | 'primary' | 'accent';
 
 @Component({
   selector: 'proj-test-button',
-  templateUrl: './test-button.component.html',
-  styleUrls: ['./test-button.component.css']
+  templateUrl: './test-button.html',
+  styleUrls: ['./test-button.css']
 })
-export class TestButtonComponent {
+export class TestButton {
   @Input('buttonType') type = 'button';
   @Input() style: ButtonStyle = 'default';
   @Input() age?: number;
   @Input() isOn = false;
 }`);
-    tree.write(`${libName}/src/lib/test-button/test-button.component.html`, `<button [attr.type]="type" [ngClass]="style"></button>`);
-    const modulePath = `${libName}/src/lib/${libName}.module.ts`;
-    tree.write(modulePath, `import * as ButtonExports from './test-button/test-button.component';
+    tree.write(`${libName}/src/lib/test-button/test-button.html`, `<button [attr.type]="type" [ngClass]="style"></button>`);
+    const modulePath = `${libName}/src/lib/${libName}-module.ts`;
+    tree.write(modulePath, `import * as ButtonExports from './test-button/test-button';
     ${tree.read(modulePath)}`);
     // create a module with component that gets exported in a barrel file
     generateModule(tree, {
@@ -83,14 +83,14 @@ export class TestButtonComponent {
         standalone: false,
         skipFormat: true,
     });
-    tree.write(`${libName}/src/lib/barrel/barrel-button/index.ts`, `export * from './barrel-button.component';`);
-    tree.write(`${libName}/src/lib/barrel/barrel.module.ts`, `import { NgModule } from '@angular/core';
+    tree.write(`${libName}/src/lib/barrel/barrel-button/index.ts`, `export * from './barrel-button';`);
+    tree.write(`${libName}/src/lib/barrel/barrel-module.ts`, `import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { BarrelButtonComponent } from './barrel-button';
+import { BarrelButton } from './barrel-button';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [BarrelButtonComponent],
+  declarations: [BarrelButton],
 })
 export class BarrelModule {}`);
     // create a module with components that get Angular exported and declared by variable
@@ -112,14 +112,14 @@ export class BarrelModule {}`);
         standalone: false,
         skipFormat: true,
     });
-    tree.write(`${libName}/src/lib/variable-declare/variable-declare.module.ts`, `import { NgModule } from '@angular/core';
+    tree.write(`${libName}/src/lib/variable-declare/variable-declare-module.ts`, `import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { VariableDeclareButtonComponent } from './variable-declare-button/variable-declare-button.component';
-import { VariableDeclareViewComponent } from './variable-declare-view/variable-declare-view.component';
+import { VariableDeclareButton } from './variable-declare-button/variable-declare-button';
+import { VariableDeclareView } from './variable-declare-view/variable-declare-view';
 
 const COMPONENTS = [
-  VariableDeclareButtonComponent,
-  VariableDeclareViewComponent
+  VariableDeclareButton,
+  VariableDeclareView
 ]
 
 @NgModule({
@@ -154,20 +154,20 @@ export class VariableDeclareModule {}`);
         standalone: false,
         skipFormat: true,
     });
-    tree.write(`${libName}/src/lib/variable-spread-declare/variable-spread-declare.module.ts`, `import { NgModule } from '@angular/core';
+    tree.write(`${libName}/src/lib/variable-spread-declare/variable-spread-declare-module.ts`, `import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { VariableSpreadDeclareButtonComponent } from './variable-spread-declare-button/variable-spread-declare-button.component';
-import { VariableSpreadDeclareViewComponent } from './variable-spread-declare-view/variable-spread-declare-view.component';
-import { VariableSpreadDeclareAnotherviewComponent } from './variable-spread-declare-anotherview/variable-spread-declare-anotherview.component';
+import { VariableSpreadDeclareButton } from './variable-spread-declare-button/variable-spread-declare-button';
+import { VariableSpreadDeclareView } from './variable-spread-declare-view/variable-spread-declare-view';
+import { VariableSpreadDeclareAnotherview } from './variable-spread-declare-anotherview/variable-spread-declare-anotherview';
 
 const COMPONENTS = [
-  VariableSpreadDeclareButtonComponent,
-  VariableSpreadDeclareViewComponent
+  VariableSpreadDeclareButton,
+  VariableSpreadDeclareView
 ]
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [...COMPONENTS, VariableSpreadDeclareAnotherviewComponent],
+  declarations: [...COMPONENTS, VariableSpreadDeclareAnotherview],
 })
 export class VariableSpreadDeclareModule {}`);
     // create a module where declared components are pulled from a static member of the module
@@ -189,10 +189,10 @@ export class VariableSpreadDeclareModule {}`);
         standalone: false,
         skipFormat: true,
     });
-    tree.write(`${libName}/src/lib/static-member-declarations/static-member-declarations.module.ts`, `import { NgModule } from '@angular/core';
+    tree.write(`${libName}/src/lib/static-member-declarations/static-member-declarations-module.ts`, `import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Cmp1Component } from './cmp1/cmp1.component';
-import { Cmp2Component } from './cmp2/cmp2.component';
+import { Cmp1 } from './cmp1/cmp1';
+import { Cmp2 } from './cmp2/cmp2';
 
 @NgModule({
   imports: [CommonModule],
@@ -200,7 +200,7 @@ import { Cmp2Component } from './cmp2/cmp2.component';
   exports: StaticMemberDeclarationsModule.COMPONENTS
 })
 export class StaticMemberDeclarationsModule {
-  static readonly COMPONENTS = [Cmp1Component, Cmp2Component];
+  static readonly COMPONENTS = [Cmp1, Cmp2];
 }`);
     // create another button in a nested subpath
     generateModule(tree, {
@@ -231,7 +231,7 @@ function generateModule(tree, options) {
         options.path = `${sourceRoot}/${projectDirName}`;
     }
     const moduleNames = (0, devkit_1.names)(options.name);
-    const moduleFilePath = `${options.path}/${moduleNames.fileName}/${moduleNames.fileName}.module.ts`;
+    const moduleFilePath = `${options.path}/${moduleNames.fileName}/${moduleNames.fileName}-module.ts`;
     tree.write(moduleFilePath, `import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
 

package/src/generators/utils/version-utils.js

@@ -49,10 +49,10 @@ function getInstalledPackageVersionInfo(tree, pkgName) {
 function versions(tree) {
     const majorAngularVersion = getInstalledAngularMajorVersion(tree);
     switch (majorAngularVersion) {
-        case 17:
-            return backward_compatible_versions_1.backwardCompatibleVersions.angularV17;
         case 18:
             return backward_compatible_versions_1.backwardCompatibleVersions.angularV18;
+        case 19:
+            return backward_compatible_versions_1.backwardCompatibleVersions.angularV19;
         default:
             return latestVersions;
     }

package/src/generators/web-worker/lib/add-snippet.js

@@ -4,9 +4,9 @@ exports.addSnippet = addSnippet;
 const devkit_1 = require("@nx/devkit");
 function addSnippet(tree, name, path) {
     const fileRegExp = new RegExp(`^${name}.*\\.ts`);
-    const children = tree.children(path);
-    const siblingModules = children
-        .filter((f) => fileRegExp.test(f) && !/(module|spec)\.ts$/.test(f))
+    const siblingModules = tree
+        .children(path)
+        .filter((f) => fileRegExp.test(f) && !/(module|spec|config|routes)\.ts$/.test(f))
         .sort();
     if (siblingModules.length === 0) {
         return;

package/src/migrations/update-21-2-0/migrate-provide-server-rendering-import.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;