Merge pull request #113 from Service-Soft/update-to-angular-20

updated to angular 20

Author: tim-fabian

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ jobs:
             - uses: actions/checkout@v4
             - run: docker pull adminer
             - run: docker pull postgres
-            - run: npm i -g @angular/cli@18 @loopback/cli@6 @nestjs/cli@11
+            - run: npm i -g @angular/cli@20 zibri-cli @loopback/cli@6 @nestjs/cli@11
             - run: npm ci
             - run: npm run build
             - run: npm run test

src/__testing__/mock/constants.ts

@@ -1,9 +1,9 @@
 /* eslint-disable jsdoc/require-jsdoc */
-import { ANGULAR_JSON_FILE_NAME, ANGULAR_ROUTES_FILE_NAME, APP_CONFIG_FILE_NAME, APPS_DIRECTORY_NAME, DEV_DOCKER_COMPOSE_FILE_NAME, PROD_DOCKER_COMPOSE_FILE_NAME, ENV_FILE_NAME, ENVIRONMENT_MODEL_TS_FILE_NAME, ENVIRONMENT_TS_FILE_NAME, ESLINT_CONFIG_FILE_NAME, GLOBAL_ENVIRONMENT_MODEL_FILE_NAME, LIBS_DIRECTORY_NAME, PACKAGE_JSON_FILE_NAME, LOCAL_DOCKER_COMPOSE_FILE_NAME, WORKSPACE_FILE_NAME, BASE_TS_CONFIG_FILE_NAME, STAGE_DOCKER_COMPOSE_FILE_NAME, ENV_PUBLIC_FILE_NAME } from '../../constants';
+import { ANGULAR_JSON_FILE_NAME, ANGULAR_ROUTES_FILE_NAME, APP_CONFIG_FILE_NAME, APPS_DIRECTORY_NAME, DEV_DOCKER_COMPOSE_FILE_NAME, PROD_DOCKER_COMPOSE_FILE_NAME, ENV_FILE_NAME, ENVIRONMENT_MODEL_TS_FILE_NAME, ENVIRONMENT_TS_FILE_NAME, ESLINT_CONFIG_FILE_NAME, GLOBAL_ENVIRONMENT_MODEL_FILE_NAME, LIBS_DIRECTORY_NAME, PACKAGE_JSON_FILE_NAME, LOCAL_DOCKER_COMPOSE_FILE_NAME, WORKSPACE_FILE_NAME, BASE_TS_CONFIG_FILE_NAME, STAGE_DOCKER_COMPOSE_FILE_NAME, ENV_PUBLIC_FILE_NAME, ANGULAR_APP_COMPONENT_FILE_NAME } from '../../constants';
 import { OmitStrict } from '../../types';
 import { getPath, Path } from '../../utilities';
 
-export const MAX_ADD_TIME: number = 90000;
+export const MAX_ADD_TIME: number = 100000;
 
 export const MAX_GEN_CODE_TIME: number = 10000;
 
@@ -86,8 +86,8 @@ export function getMockConstants(projectName: string): MockConstants {
         ANGULAR_ESLINT_CONFIG_MJS: getPath(ANGULAR_APP_DIR, ESLINT_CONFIG_FILE_NAME),
         ANGULAR_APP_NAME: ANGULAR_APP_NAME,
         ANGULAR_APP_DIR: ANGULAR_APP_DIR,
-        ANGULAR_APP_COMPONENT_TS: getPath(ANGULAR_APP_DIR, 'src', 'app', 'app.component.ts'),
-        ANGULAR_APP_COMPONENT_HTML: getPath(ANGULAR_APP_DIR, 'src', 'app', 'app.component.html'),
+        ANGULAR_APP_COMPONENT_TS: getPath(ANGULAR_APP_DIR, 'src', 'app', ANGULAR_APP_COMPONENT_FILE_NAME),
+        ANGULAR_APP_COMPONENT_HTML: getPath(ANGULAR_APP_DIR, 'src', 'app', 'app.html'),
         ANGULAR_APP_ROUTES_TS: getPath(ANGULAR_APP_DIR, 'src', 'app', 'app.routes.ts'),
         ANGULAR_ROUTES_TS: getPath(ANGULAR_APP_DIR, 'src', 'app', ANGULAR_ROUTES_FILE_NAME),
         ANGULAR_APP_CONFIG_TS: getPath(ANGULAR_APP_DIR, 'src', 'app', APP_CONFIG_FILE_NAME),

src/__testing__/mock/file-mock.utilities.ts

@@ -114,7 +114,17 @@ export abstract class FileMockUtilities {
                     projectType: 'application',
                     schematics: {
                         '@schematics/angular:component': {
-                            style: 'css'
+                            style: 'css',
+                            type: 'component'
+                        },
+                        '@schematics/angular:service': {
+                            type: 'service'
+                        },
+                        '@schematics/angular:pipe': {
+                            typeSeparator: '.'
+                        },
+                        '@schematics/angular:guard': {
+                            typeSeparator: '.'
                         }
                     },
                     root: '',
@@ -167,8 +177,8 @@ export abstract class FileMockUtilities {
             '\tselector: \'app-root\',',
             '\tstandalone: true,',
             '\timports: [RouterOutlet],',
-            '\ttemplateUrl: \'./app.component.html\',',
-            '\tstyleUrl: \'./app.component.css\'',
+            '\ttemplateUrl: \'./app.html\',',
+            '\tstyleUrl: \'./app.css\'',
             '})',
             'export class AppComponent {}'
         ], true, false);

src/angular/angular-json.model.ts

@@ -152,6 +152,14 @@ interface AngularJsonSchematicOptions {
      * Style for the schematic.
      */
     style?: 'css' | 'scss' | 'sass' | 'less',
+    /**
+     * The type of the schematic.
+     */
+    type?: 'component' | 'service' | 'directive',
+    /**
+     * The separator for the filename.
+     */
+    typeSeparator?: string,
     /**
      * Whether or not to use inlineTemplates.
      */

src/angular/angular-utilities.test.ts

@@ -42,8 +42,8 @@ describe('AngularUtilities', () => {
             '    selector: \'app-root\',',
             '    standalone: true,',
             `    imports: [RouterOutlet, ${def.element}],`,
-            '    templateUrl: \'./app.component.html\',',
-            '    styleUrl: \'./app.component.css\'',
+            '    templateUrl: \'./app.html\',',
+            '    styleUrl: \'./app.css\'',
             '})',
             'export class AppComponent {}'
         ]);
@@ -75,8 +75,8 @@ describe('AngularUtilities', () => {
             '    selector: \'app-root\',',
             '    standalone: true,',
             '    imports: [RouterOutlet, NgxMatNavigationNavbarComponent, NgxMatNavigationFooterComponent],',
-            '    templateUrl: \'./app.component.html\',',
-            '    styleUrl: \'./app.component.css\'',
+            '    templateUrl: \'./app.html\',',
+            '    styleUrl: \'./app.css\'',
             '})',
             'export class AppComponent {',
             '    navbarRows: NavbarRow[] = navbarRows;',
@@ -325,7 +325,7 @@ describe('AngularUtilities', () => {
         await AngularUtilities.setupPwa(mockConstants.ANGULAR_APP_DIR, mockConstants.ANGULAR_APP_NAME);
 
         expect(cpExecSyncMock).toHaveBeenCalledTimes(1);
-        expect(cpExecSyncMock).toHaveBeenCalledWith(`cd ${mockConstants.ANGULAR_APP_DIR} && npx @angular/cli@18 add @angular/pwa@18 --skip-confirmation`);
+        expect(cpExecSyncMock).toHaveBeenCalledWith(`cd ${mockConstants.ANGULAR_APP_DIR} && npx @angular/cli@20 add @angular/pwa@20 --skip-confirmation`);
         expect(npmInstallMock).toHaveBeenCalledTimes(1);
         expect(npmInstallMock).toHaveBeenCalledWith(mockConstants.ANGULAR_APP_NAME, ['ngx-pwa']);
 
@@ -342,8 +342,8 @@ describe('AngularUtilities', () => {
             '    selector: \'app-root\',',
             '    standalone: true,',
             '    imports: [RouterOutlet, NgxPwaOfflineStatusBarComponent],',
-            '    templateUrl: \'./app.component.html\',',
-            '    styleUrl: \'./app.component.css\'',
+            '    templateUrl: \'./app.html\',',
+            '    styleUrl: \'./app.css\'',
             '})',
             'export class AppComponent {}'
         ]);

src/angular/angular.utilities.ts

@@ -62,7 +62,15 @@ type NewOptions = {
     /**
      * Whether or not to use inline styles instead of a whole css file for each component.
      */
-    '--inline-style'?: boolean
+    '--inline-style'?: boolean,
+    /**
+     * Whether or not to configure some ai.
+     */
+    '--ai-config': 'none',
+    /**
+     * Whether or not to use zoneless change detection.
+     */
+    '--zoneless': false
 };
 
 /**
@@ -103,7 +111,7 @@ type AngularCliOptions<T extends AngularCliCommands> =
  */
 export abstract class AngularUtilities {
 
-    private static readonly CLI_VERSION: number = 18;
+    private static readonly CLI_VERSION: number = 20;
 
     /**
      * Sets up logging.
@@ -454,14 +462,14 @@ export abstract class AngularUtilities {
      * @param root - The root of the angular project to setup material for.
      */
     static async setupMaterial(root: string): Promise<void> {
-        await Promise.all([
-            this.addProvider(
-                root,
-                'provideAnimations()',
-                [{ defaultImport: false, element: 'provideAnimations', path: '@angular/platform-browser/animations' }]
-            ),
-            FsUtilities.updateFile(getPath(root, 'src', 'styles.css'), [
-                '@import "@angular/material/prebuilt-themes/indigo-pink.css";',
+        await this.addProvider(
+            root,
+            'provideAnimations()',
+            [{ defaultImport: false, element: 'provideAnimations', path: '@angular/platform-browser/animations' }]
+        );
+        await FsUtilities.updateFile(
+            getPath(root, 'src', 'styles.css'),
+            [
                 '',
                 'html,',
                 'body {',
@@ -473,8 +481,14 @@ export abstract class AngularUtilities {
                 '\tmargin: 0;',
                 '\tfont-family: Arial, Helvetica, sans-serif;',
                 '}'
-            ], 'append')
-        ]);
+            ],
+            'append'
+        );
+        await FsUtilities.updateFile(
+            getPath(root, 'src', 'styles.css'),
+            '\'@import "@angular/material/prebuilt-themes/indigo-pink.css";\'',
+            'prepend'
+        );
     }
 
     /**
@@ -671,7 +685,7 @@ export abstract class AngularUtilities {
 
         await NpmUtilities.install(name, [NpmPackage.NGX_MATERIAL_NAVIGATION]);
         await FsUtilities.updateFile(
-            getPath(root, 'src', 'app', 'app.component.html'),
+            getPath(root, 'src', 'app', 'app.html'),
             [
                 // eslint-disable-next-line stylistic/max-len
                 '<ngx-mat-navigation-navbar [minHeight]="80" [minSidenavWidth]="\'30%\'" [minHeightOtherElements]="70" [navbarRows]="navbarRows">',
@@ -808,7 +822,7 @@ export abstract class AngularUtilities {
         await this.runCommand(root, `add @angular/pwa@${this.CLI_VERSION}`, { '--skip-confirmation': true });
         await NpmUtilities.install(name, [NpmPackage.NGX_PWA]);
         await FsUtilities.updateFile(
-            getPath(root, 'src', 'app', 'app.component.html'),
+            getPath(root, 'src', 'app', 'app.html'),
             ['<ngx-pwa-offline-status-bar></ngx-pwa-offline-status-bar>'],
             'prepend'
         );

src/commands/add/add-angular-library/add-angular-library.command.ts

@@ -1,5 +1,5 @@
 import { AngularUtilities } from '../../../angular';
-import { ANGULAR_JSON_FILE_NAME, BASE_TS_CONFIG_FILE_NAME, GIT_IGNORE_FILE_NAME, LIBS_DIRECTORY_NAME, PACKAGE_JSON_FILE_NAME } from '../../../constants';
+import { ANGULAR_JSON_FILE_NAME, BASE_TS_CONFIG_FILE_NAME, ESLINT_CONFIG_FILE_NAME, GIT_IGNORE_FILE_NAME, LIBS_DIRECTORY_NAME, PACKAGE_JSON_FILE_NAME } from '../../../constants';
 import { FsUtilities, JsonUtilities, QuestionsFor } from '../../../encapsulation';
 import { EslintUtilities } from '../../../eslint';
 import { NpmUtilities, PackageJson } from '../../../npm';
@@ -50,7 +50,7 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
     override async run(): Promise<void> {
         const config: AddAngularLibraryConfiguration = await this.getConfig();
         const result: CreateResult = await this.createProject(config);
-
+        await EslintUtilities.setupProjectEslint(result.root, false);
         await Promise.all([
             FsUtilities.rm(getPath(result.root, '.vscode')),
             FsUtilities.rm(getPath(result.root, '.editorconfig')),
@@ -61,10 +61,22 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
             this.updateAngularJson(result.root, config.name),
             this.setupTsConfig(result.root, config),
             this.updatePackageJson(result, config.name),
-            this.setupTailwind(result.root),
-            EslintUtilities.setupProjectEslint(result.root, false)
+            this.setupTailwind(result.root)
         ]);
         await FsUtilities.rm(getPath(result.root, 'projects'));
+        await FsUtilities.replaceInFile(
+            getPath(result.root, ESLINT_CONFIG_FILE_NAME),
+            '    ...baseConfig,',
+            [
+                '    ...baseConfig,',
+                '    {',
+                '        files: [\'**/*.stories.ts\'],',
+                '        rules: {',
+                '            \'jsdoc/require-jsdoc\': \'off\'',
+                '        }',
+                '    }'
+            ].join('\n')
+        );
     }
 
     private async updatePublicApi(root: string): Promise<void> {
@@ -94,7 +106,7 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
         await AngularUtilities.runCommand(
             getPath(LIBS_DIRECTORY_NAME),
             `new ${config.name}`,
-            { '--no-create-application': true }
+            { '--no-create-application': true, '--ai-config': 'none', '--zoneless': false }
         );
         // eslint-disable-next-line no-console
         console.log('Creates the base library');
@@ -140,6 +152,30 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
         await FsUtilities.replaceInFile(getPath(LIBS_DIRECTORY_NAME, config.name, ANGULAR_JSON_FILE_NAME), '"root": ,', '"root": "./",');
 
         const newProject: WorkspaceProject = await WorkspaceUtilities.findProjectOrFail(config.name, getPath('.'));
+        await AngularUtilities.updateAngularJson(
+            getPath(newProject.path, ANGULAR_JSON_FILE_NAME),
+            {
+                projects: {
+                    [newProject.name]: {
+                        schematics: {
+                            '@schematics/angular:component': {
+                                style: 'css',
+                                type: 'component'
+                            },
+                            '@schematics/angular:service': {
+                                type: 'service'
+                            },
+                            '@schematics/angular:pipe': {
+                                typeSeparator: '.'
+                            },
+                            '@schematics/angular:guard': {
+                                typeSeparator: '.'
+                            }
+                        }
+                    }
+                }
+            }
+        );
         await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', '.eslintrc.json'));
         return { root: newProject.path, oldPackageJson };
     }
@@ -201,7 +237,8 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
             files: ['src/public-api.ts'],
             include: [
                 'src/**/*.spec.ts',
-                'src/**/*.d.ts'
+                'src/**/*.d.ts',
+                'src/**/*.stories.ts'
             ]
         };
         await FsUtilities.createFile(getPath(root, 'tsconfig.eslint.json'), JsonUtilities.stringify(eslintTsconfig));
@@ -244,6 +281,11 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
                             options: {
                                 tsConfig: 'tsconfig.spec.json'
                             }
+                        },
+                        storybook: {
+                            options: {
+                                styles: ['src/styles.css']
+                            }
                         }
                     }
                 }

src/commands/add/add-angular-website/add-angular-website.command.ts

@@ -1,5 +1,5 @@
 import { AngularUtilities, NavElementTypes } from '../../../angular';
-import { ANGULAR_JSON_FILE_NAME, APPS_DIRECTORY_NAME, BASE_TS_CONFIG_FILE_NAME, DOCKER_FILE_NAME, GIT_IGNORE_FILE_NAME } from '../../../constants';
+import { ANGULAR_APP_COMPONENT_FILE_NAME, ANGULAR_JSON_FILE_NAME, APPS_DIRECTORY_NAME, BASE_TS_CONFIG_FILE_NAME, DOCKER_FILE_NAME, GIT_IGNORE_FILE_NAME } from '../../../constants';
 import { DockerUtilities } from '../../../docker';
 import { FsUtilities, JsonUtilities, QuestionsFor } from '../../../encapsulation';
 import { DefaultEnvKeys, EnvUtilities } from '../../../env';
@@ -82,7 +82,7 @@ export class AddAngularWebsiteCommand extends BaseAddCommand<AddAngularWebsiteCo
 
         await AngularUtilities.addSitemapAndRobots(root, config.name, domain);
 
-        await this.cleanUp(root);
+        await this.cleanUp(root, config.name);
         await this.setupTsConfig(root, config.name);
         await this.createDockerfile(root, config);
         await AngularUtilities.setupNavigation(root, config.name);
@@ -222,13 +222,23 @@ export class AddAngularWebsiteCommand extends BaseAddCommand<AddAngularWebsiteCo
         await FsUtilities.createFile(getPath(root, 'tsconfig.eslint.json'), JsonUtilities.stringify(eslintTsconfig));
     }
 
-    private async cleanUp(root: string): Promise<void> {
+    private async cleanUp(root: string, name: string): Promise<void> {
         // eslint-disable-next-line no-console
         console.log('cleans up');
+        await FsUtilities.replaceInFile(
+            getPath(root, 'src', 'app', ANGULAR_APP_COMPONENT_FILE_NAME),
+            `protected readonly title = signal('${name}');`,
+            '  constructor() {}'
+        );
+        await FsUtilities.replaceInFile(
+            getPath(root, 'src', 'app', ANGULAR_APP_COMPONENT_FILE_NAME),
+            'Component, signal',
+            'Component'
+        );
         await FsUtilities.rm(getPath(root, '.vscode'));
         await FsUtilities.rm(getPath(root, '.editorconfig'));
         await FsUtilities.rm(getPath(root, GIT_IGNORE_FILE_NAME));
-        await FsUtilities.rm(getPath(root, 'src', 'app', 'app.component.spec.ts'));
+        await FsUtilities.rm(getPath(root, 'src', 'app', 'app.spec.ts'));
     }
 
     private async createProject(config: AddAngularWebsiteConfiguration): Promise<Path> {
@@ -237,10 +247,34 @@ export class AddAngularWebsiteCommand extends BaseAddCommand<AddAngularWebsiteCo
         await AngularUtilities.runCommand(
             getPath(APPS_DIRECTORY_NAME),
             `new ${config.name}`,
-            { '--skip-git': true, '--style': 'css', '--inline-style': true, '--ssr': true }
+            { '--skip-git': true, '--style': 'css', '--inline-style': true, '--ssr': true, '--ai-config': 'none', '--zoneless': false }
         );
         const newProject: WorkspaceProject = await WorkspaceUtilities.findProjectOrFail(config.name, getPath('.'));
-        await FsUtilities.updateFile(getPath(newProject.path, 'src', 'app', 'app.component.html'), '', 'replace');
+        await AngularUtilities.updateAngularJson(
+            getPath(newProject.path, ANGULAR_JSON_FILE_NAME),
+            {
+                projects: {
+                    [newProject.name]: {
+                        schematics: {
+                            '@schematics/angular:component': {
+                                style: 'css',
+                                type: 'component'
+                            },
+                            '@schematics/angular:service': {
+                                type: 'service'
+                            },
+                            '@schematics/angular:pipe': {
+                                typeSeparator: '.'
+                            },
+                            '@schematics/angular:guard': {
+                                typeSeparator: '.'
+                            }
+                        }
+                    }
+                }
+            }
+        );
+        await FsUtilities.updateFile(getPath(newProject.path, 'src', 'app', 'app.html'), '', 'replace');
         await AngularUtilities.addProvider(newProject.path, 'provideHttpClient(withInterceptorsFromDi(), withFetch())', [
             // eslint-disable-next-line sonar/no-duplicate-string
             { defaultImport: false, element: 'provideHttpClient', path: '@angular/common/http' },