diff --git a/angular.json b/angular.json index 2b3baa67e..64393f567 100644 --- a/angular.json +++ b/angular.json @@ -22,7 +22,9 @@ "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", - "allowedCommonJsDependencies": ["yamljs"], + "allowedCommonJsDependencies": [ + "yamljs" + ], "assets": [ "src/favicon.ico", "src/assets" @@ -114,9 +116,18 @@ } } }, - "defaultProject": "DSOMM", "cli": { - "defaultCollection": "@angular-eslint/schematics", - "analytics": false + "analytics": false, + "schematicCollections": [ + "@angular-eslint/schematics" + ] + }, + "schematics": { + "@angular-eslint/schematics:application": { + "setParserOptionsProject": true + }, + "@angular-eslint/schematics:library": { + "setParserOptionsProject": true + } } } diff --git a/docs/logs/13-14_regression_test_failures.txt b/docs/logs/13-14_regression_test_failures.txt new file mode 100644 index 000000000..19207c822 --- /dev/null +++ b/docs/logs/13-14_regression_test_failures.txt @@ -0,0 +1,58 @@ +5 specs, 3 failures, randomized with seed 18571 +Spec List | Failures +SettingsComponent > should handle max level reset to default +TypeError: Cannot read properties of undefined (reading 'activityMeta') +TypeError: Cannot read properties of undefined (reading 'activityMeta') + at templateFn (ng:///SettingsComponent.js:535:44) + at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12126:9) + at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12011:13) + at refreshComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13085:13) + at refreshChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:11801:9) + at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12061:13) + at detectChangesInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13229:9) + at RootViewRef.detectChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13741:9) + at ComponentFixture._tick (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/testing.mjs:140:32) + at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/testing.mjs:153:22 +Expected spy SettingsService.setMaxLevel to have been called with: + [ null ] +but actual calls were: + [ 5 ]. + +Call 0: + Expected $[0] = 5 to equal null. +Error: Expected spy SettingsService.setMaxLevel to have been called with: + [ null ] +but actual calls were: + [ 5 ]. +Call 0: + Expected $[0] = 5 to equal null. + at + at UserContext.apply (http://localhost:9876/_karma_webpack_/webpack:/src/app/pages/settings/settings.component.spec.ts:98:41) + at UserContext.apply (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:2030:30) + at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:26) +SettingsComponent > should update max level settings correctly +TypeError: Cannot read properties of undefined (reading 'activityMeta') +TypeError: Cannot read properties of undefined (reading 'activityMeta') + at templateFn (ng:///SettingsComponent.js:535:44) + at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12126:9) + at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12011:13) + at refreshComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13085:13) + at refreshChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:11801:9) + at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12061:13) + at detectChangesInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13229:9) + at RootViewRef.detectChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13741:9) + at ComponentFixture._tick (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/testing.mjs:140:32) + at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/testing.mjs:153:22 +SettingsComponent > should create +TypeError: Cannot read properties of undefined (reading 'activityMeta') +TypeError: Cannot read properties of undefined (reading 'activityMeta') + at templateFn (ng:///SettingsComponent.js:535:44) + at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12126:9) + at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12011:13) + at refreshComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13085:13) + at refreshChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:11801:9) + at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12061:13) + at detectChangesInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13229:9) + at RootViewRef.detectChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13741:9) + at ComponentFixture._tick (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/testing.mjs:140:32) + at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/testing.mjs:153:22 \ No newline at end of file diff --git a/docs/logs/13-14_warnings.txt b/docs/logs/13-14_warnings.txt new file mode 100644 index 000000000..eeefdf0df --- /dev/null +++ b/docs/logs/13-14_warnings.txt @@ -0,0 +1,191 @@ +[~/xod/open/DevSecOps-MaturityModel] +✘  sawankshrma   mygsoc2026  npx ng serve +⠋ Generating browser application bundles (phase: building)...: The same density styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/main/guides/duplicate-theming-styles.md +node_modules/@angular/material/core/theming/_theming.scss 349:9 private-check-duplicate-theme-styles() +node_modules/@angular/material/core/theming/_all-theme.scss 42:3 all-component-themes() +src/custom-theme.scss 113:3 root stylesheet + +✔ Browser application bundle generation complete. + +Initial Chunk Files | Names | Raw Size +vendor.js | vendor | 7.48 MB | +polyfills.js | polyfills | 1.07 MB | +main.js | main | 838.03 kB | +styles.css, styles.js | styles | 320.01 kB | +runtime.js | runtime | 6.49 kB | + +``` + | Initial Total | 9.69 MB +``` + +Build at: 2026-05-11T15:24:59.343Z - Hash: c795257efa881b51 - Time: 21611ms + +Warning: src/app/component/activity-description/activity-description.component.html:72:44 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +72 [activityName]="currentActivity?.name || ''" +~~~~ + +src/app/component/activity-description/activity-description.component.ts:20:16 +20 templateUrl: './activity-description.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component ActivityDescriptionComponent. + +Warning: src/app/component/activity-description/activity-description.component.html:283:69 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +283 >In other frameworks and standards the '{{ currentActivity?.name }}' activity is part of +~~~~ + +src/app/component/activity-description/activity-description.component.ts:20:16 +20 templateUrl: './activity-description.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component ActivityDescriptionComponent. + +Warning: src/app/pages/matrix/matrix.component.html:43:64 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +43 {{dataStore?.meta?.getIcon(element.Category)}} +~~~~ + +src/app/pages/matrix/matrix.component.ts:31:16 +31 templateUrl: './matrix.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component MatrixComponent. + +Warning: src/app/pages/settings/settings.component.html:201:40 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +201 {{ remoteReleaseCheck?.latestRelease?.tagName }} +~~~~~~~~~~~~~ + +src/app/pages/settings/settings.component.ts:32:16 +32 templateUrl: './settings.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component SettingsComponent. + +Warning: src/app/pages/settings/settings.component.html:204:51 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +204 {{ dateFormat(remoteReleaseCheck?.latestRelease?.publishedAt) }} +~~~~~~~~~~~~~ + +src/app/pages/settings/settings.component.ts:32:16 +32 templateUrl: './settings.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component SettingsComponent. + +Warning: src/app/pages/settings/settings.component.html:209:47 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +209 [href]="remoteReleaseCheck?.latestRelease?.downloadUrl" +~~~~~~~~~~~~~ + +src/app/pages/settings/settings.component.ts:32:16 +32 templateUrl: './settings.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component SettingsComponent. + +Warning: src/app/pages/settings/settings.component.html:217:47 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +217 [href]="remoteReleaseCheck?.latestRelease?.changelogUrl" +~~~~~~~~~~~~~ + +src/app/pages/settings/settings.component.ts:32:16 +32 templateUrl: './settings.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component SettingsComponent. + +Warning: src/app/pages/settings/settings.component.html:228:41 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +228

{{ remoteReleaseCheck?.latestCheckError }}

+~~~~~~~~~~~~~~~~ + +src/app/pages/settings/settings.component.ts:32:16 +32 templateUrl: './settings.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component SettingsComponent. + +Warning: src/app/pages/settings/settings.component.html:235:49 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +235 [disabled]="remoteReleaseCheck?.isChecking"> +~~~~~~~~~~ + +src/app/pages/settings/settings.component.ts:32:16 +32 templateUrl: './settings.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component SettingsComponent. + +Warning: src/app/pages/teams/teams.component.html:18:27 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +18 {{ info[infoTitle]?.teams?.join(', ') }} +~~~~~ + +src/app/pages/teams/teams.component.ts:27:16 +27 templateUrl: './teams.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component TeamsComponent. + +Warning: src/app/pages/teams/teams.component.html:24:37 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +24 [value]="info[infoTitle]?.uniqueActivitiesCompletedCount" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +src/app/pages/teams/teams.component.ts:27:16 +27 templateUrl: './teams.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component TeamsComponent. + +Warning: src/app/pages/teams/teams.component.html:28:37 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +28 [value]="info[infoTitle]?.uniqueActivitiesInProgressCount" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +src/app/pages/teams/teams.component.ts:27:16 +27 templateUrl: './teams.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component TeamsComponent. + +Warning: src/app/pages/teams/teams.component.html:32:48 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +32 [value]="dateFormat(info[infoTitle]?.lastUpdated)" +~~~~~~~~~~~ + +src/app/pages/teams/teams.component.ts:27:16 +27 templateUrl: './teams.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component TeamsComponent. + +Warning: src/app/pages/teams/teams.component.html:33:38 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +33 [suffix]="info[infoTitle]?.lastUpdated ? '' : 'No activity registered'"> +~~~~~~~~~~~ + +src/app/pages/teams/teams.component.ts:27:16 +27 templateUrl: './teams.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component TeamsComponent. + +Warning: src/app/pages/teams/teams.component.html:64:29 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +64 {{ dataStore?.meta?.getIcon(element?.activity?.category || '') }} +~~~~ + +src/app/pages/teams/teams.component.ts:27:16 +27 templateUrl: './teams.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component TeamsComponent. + +Warning: src/app/pages/teams/teams.component.html:87:75 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator. + +87 Currently no activities in progress for {{ info[infoTitle]?.teams?.join(', ') }} +~~~~~ + +src/app/pages/teams/teams.component.ts:27:16 +27 templateUrl: './teams.component.html', +~~~~~~~~~~~~~~~~~~~~~~~~ +Error occurs in the template of component TeamsComponent. + +Warning: /home/sawankshrma/xod/open/DevSecOps-MaturityModel/src/app/service/loader/mock-data-loader.service.ts is part of the TypeScript compilation but it's unused. +Add only entry points to the 'files' or 'include' properties in your tsconfig. + +Warning: /home/sawankshrma/xod/open/DevSecOps-MaturityModel/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused. +Add only entry points to the 'files' or 'include' properties in your tsconfig. + +- * Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** + +✔ Compiled successfully. \ No newline at end of file diff --git a/docs/logs/angular-cdk-14.txt b/docs/logs/angular-cdk-14.txt new file mode 100644 index 000000000..630275404 --- /dev/null +++ b/docs/logs/angular-cdk-14.txt @@ -0,0 +1,26 @@ + [~/xod/open/DevSecOps-MaturityModel] + sawankshrma   mygsoc2026  npx ng update @angular/cdk@14 @angular/material@14 + +Using package manager: npm +Collecting installed dependencies... +Found 57 dependencies. +Fetching dependency metadata from registry... + Updating package.json with dependency @angular/cdk @ "14.2.7" (was "13.3.9")... + Updating package.json with dependency @angular/material @ "14.2.7" (was "13.3.9")... +UPDATE package.json (2532 bytes) +✔ Packages successfully installed. +** Executing migrations of package '@angular/cdk' ** + +▸ Updates the Angular CDK to v14. + + ✓ Updated Angular CDK to version 14 + + Migration completed. + +** Executing migrations of package '@angular/material' ** + +▸ Updates the Angular Material to v14. + + ✓ Updated Angular Material to version 14 + + Migration completed. diff --git a/docs/logs/angular-core-14.txt b/docs/logs/angular-core-14.txt new file mode 100644 index 000000000..8fce04e2b --- /dev/null +++ b/docs/logs/angular-core-14.txt @@ -0,0 +1,77 @@ + [~/xod/open/DevSecOps-MaturityModel] + sawankshrma   mygsoc2026  npx ng update @angular/core@14 @angular/cli@14 @angular-eslint/schematics@14 + +The installed Angular CLI version is outdated. +Installing a temporary Angular CLI versioned 14.2.13 to perform the update. +✔ Package successfully installed. +Using package manager: npm +Collecting installed dependencies... +Found 57 dependencies. +Fetching dependency metadata from registry... + Updating package.json with dependency @angular-devkit/build-angular @ "14.2.13" (was "13.3.10")... + Updating package.json with dependency @angular-eslint/builder @ "14.4.0" (was "13.5.0")... + Updating package.json with dependency @angular-eslint/eslint-plugin @ "14.4.0" (was "13.5.0")... + Updating package.json with dependency @angular-eslint/eslint-plugin-template @ "14.4.0" (was "13.5.0")... + Updating package.json with dependency @angular-eslint/schematics @ "14.4.0" (was "13.5.0")... + Updating package.json with dependency @angular-eslint/template-parser @ "14.4.0" (was "13.5.0")... + Updating package.json with dependency @angular/compiler-cli @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/animations @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/cli @ "14.2.13" (was "13.3.10")... + Updating package.json with dependency @angular/common @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/compiler @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/core @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/forms @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/localize @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/platform-browser @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/platform-browser-dynamic @ "14.3.0" (was "13.3.12")... + Updating package.json with dependency @angular/router @ "14.3.0" (was "13.3.12")... +UPDATE package.json (2530 bytes) +✔ Packages successfully installed. +** Executing migrations of package '@angular-eslint/schematics' ** + +▸ Updates @angular-eslint to v14. +UPDATE package.json (2533 bytes) +UPDATE angular.json (3570 bytes) +✔ Packages installed successfully. + Migration completed. + +** Executing migrations of package '@angular/cli' ** + +▸ Remove 'defaultProject' option from workspace configuration. + The project to use will be determined from the current working directory. +UPDATE angular.json (3541 bytes) + Migration completed. + +▸ Remove 'showCircularDependencies' option from browser and server builders. + Migration completed. + +▸ Replace 'defaultCollection' option in workspace configuration with 'schematicCollections'. + Migration completed. + +▸ Update Angular packages 'dependencies' and 'devDependencies' version prefix to '^' instead of '~'. +✔ Packages installed successfully. + Migration completed. + +▸ Remove 'package.json' files from library projects secondary entrypoints. + Migration completed. + +▸ Update TypeScript compilation target to 'ES2020'. +UPDATE tsconfig.json (863 bytes) + Migration completed. + +** Executing migrations of package '@angular/core' ** + +▸ As of Angular version 13, `entryComponents` are no longer necessary. + Migration completed. + +▸ In Angular version 14, the `pathMatch` property of `Routes` was updated to be a strict union of the two valid options: `'full'|'prefix'`. + `Routes` and `Route` variables need an explicit type so TypeScript does not infer the property as the looser `string`. + Migration completed. + +▸ As of Angular version 14, Forms model classes accept a type parameter, and existing usages must be opted out to preserve backwards-compatibility. +UPDATE src/app/pages/mapping/mapping.component.ts (6882 bytes) +UPDATE src/app/pages/matrix/matrix.component.ts (8583 bytes) +UPDATE src/app/pages/settings/settings.component.ts (12174 bytes) + Migration completed. + + \ No newline at end of file diff --git a/docs/migration-doc.md b/docs/migration-doc.md new file mode 100644 index 000000000..590b9fbb3 --- /dev/null +++ b/docs/migration-doc.md @@ -0,0 +1,341 @@ + +# Migration Log: DSOMM Modernization + + + +This log tracks the progress of the Angular modernization project from version 13 towards version 21. + + + +
+ +Angular 13 → 14 + + + +### Summary + +The initial upgrade from Angular 13 to 14 was performed using `ng update`. This phase focused on establishing a stable v14 base, resolving immediate template warnings, and adopting the new Typed Forms feature. + + + +### Commit History + + + +#### 1. Chore: Upgrade Angular 13 to 14 ([c68f708b](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/c68f708b)) + +- Executed `npx ng update @angular/core@14 @angular/cli@14 @angular-eslint/schematics@14`. [[logs](logs/angular-core-14.txt)] + +- This was followed by a `npx ng update @angular/cdk@14 @angular/material@14` [[logs](logs/angular-cdk-14.txt)] + + + + +#### 2. Fix: Remove Unnecessary Optional Chaining ([387be213](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/387be213)) + +- **Action:** Cleaned up template code to resolve `NG8107` warnings. + +- **Reason:** Angular 14's improved template type checking flagged optional chaining (`?.`) on properties that are guaranteed to be defined (or where the parent is not null/undefined). This "chore" was necessary to clear the console of noise and ensure clean build outputs. + +- **Log Reference:** [`npx ng serve` Warnings logs after prev commit - c68f708b](logs/13-14_warnings.txt) + + + +#### 3. Refactor: Migrate to Typed Reactive Forms ([3d36885e](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/3d36885e)) + +- **Action:** Converted `UntypedFormControl`, `UntypedFormGroup`, etc., to their typed counterparts. + +- **Reason:** One of the major benefits of Angular 14. This improves type safety across the application and catches potential form-related errors at compile time. + + + +#### 4. Fix: Update SettingsComponent Spec to Resolve Test Failures ([31aef4ab](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/31aef4ab)) + +- **Action:** Fixed 3 failing tests in `settings.component.spec.ts` by providing missing mock data. + +- **Reason:** Removing `?.` in commit `031ef6a1` exposed that the test environment never provided a `meta` object to the component. Since `MockLoaderService` returns no `meta`, `this.meta` stayed `undefined` at render time, causing Angular's template engine to crash with `Cannot read properties of undefined (reading 'activityMeta')`. Added a `meta` stub on the component instance before `detectChanges()`, and provided a `GithubService` spy which was also missing from the test providers. + +- **Log Reference** [Test failures logs before this commit](logs/13-14_regression_test_failures.txt) + + + +--- + + + +#### N. Fix: Correct Typography Configuration in Custom Theme ([commit_hash]) + +- **Action:** Replaced `mat.define-typography-level()` with `mat.define-legacy-typography-config()` + +and set the font-family to `Roboto, "Helvetica Neue", sans-serif`. + +- **Reason:** The original code used `mat.define-typography-level()`, which creates a *single* + +typography level (one set of font properties). However, `mat.core()` (and its v15 successor + +`mat.all-legacy-component-typographies()`) expects a *full typography config* — a map containing + +styles for every text category (headline, body, caption, etc.). Because of this type mismatch, + +Angular Material silently ignored the custom config and fell back to its default font stack + +(`Roboto, "Helvetica Neue", sans-serif`). The `Montserrat` font declared in the original code + +was never actually rendered in production. Switching to `mat.define-legacy-typography-config()` + +fixes the function signature, and using Roboto preserves visual parity with the live site. + +- **Additional Change:** Reordered `@include` statements so `mat.legacy-core()` runs before + +`mat.all-legacy-component-typographies()`, which is the documented correct order in v15 + +(foundation before typography). + + + +
+ + + +
+ +Angular 14 → 15 + + + +### Summary + +The upgrade from Angular 14 to 15 involved multiple phases: a TypeScript prerequisite upgrade, the Angular core/CLI `ng update`, the Angular Material/CDK `ng update` (which auto-aliases all components to `mat-legacy-*`), a typography configuration fix, the full MDC migration using Angular's CLI schematics, manual resolution of all `TODO(mdc-migration)` comments, several rounds of CSS/template/component fixes for chips, sliders, form-fields, buttons, and dark-mode styling, test suite updates, and finally a full migration to standalone components (removing `AppModule` and `MaterialModule` entirely). + + + +### Commit History + + + +#### 1. Chore: Upgrade TypeScript to 4.8 ([24645b16](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/24645b16)) + +- **Action:** Bumped `typescript` from `^4.6.4` to `^4.8.0` in `package.json`. + + + +#### 2. Chore: Upgrade Angular Core & CLI to v15 ([6a433bbb](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/6a433bbb)) + +- **Action:** Executed `npx ng update @angular/core@15 @angular/cli@15 @angular-eslint/schematics@15`. + +- **Key Changes:** + +- All `@angular/*` core packages bumped from `^14.3.0` to `^15.2.10`. + +- `@angular-devkit/build-angular` bumped from `^14.2.13` to `^15.2.11`. + +- `@angular-eslint/*` packages bumped from `^14.4.0` to `^15.2.1`. + +- `@typescript-eslint/*` bumped from `^5.36.2` to `^5.43.0`. + +- `tsconfig.json`: `target` changed from `es2020` to `ES2022`, added `"useDefineForClassFields": false` (required by Angular 15's class field semantics). + +- `src/test.ts`: Removed deprecated `require.context()` bootstrapping; Angular 15's test builder auto-discovers spec files. + +- `angular.json`: Added `schematics` configuration for `@angular-eslint`. + +- **Files:** `angular.json`, `package.json`, `package-lock.json`, `src/test.ts`, `tsconfig.json` + + + +#### 3. Chore: Upgrade Angular Material & CDK to v15 ([a9999c51](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/a9999c51)) + +- **Action:** Executed `npx ng update @angular/cdk@15 @angular/material@15`. + +- **Key Changes:** + +- `@angular/cdk` bumped from `^14.2.7` to `^15.2.9`. + +- `@angular/material` bumped from `^14.2.7` to `^15.2.9`. + +- **Auto-aliasing to `mat-legacy-*`:** The `ng update` schematic automatically rewrote all Material imports across the entire codebase to use legacy aliases (e.g., `MatButtonModule` → `MatLegacyButtonModule as MatButtonModule`). This is Angular Material 15's strategy for maintaining backward compatibility while introducing new MDC-based components. + +- **`material.module.ts`:** All 14 Material module imports were aliased (Button, List, Table, Chips, ProgressSpinner, Autocomplete, Input, Select, FormField, Card, Checkbox, Slider, etc.). + +- **Component files:** Dialog, Tooltip, Menu imports were aliased across `app.module.ts`, all modal components, all page components, all spec files, and the notification service. + +- **`custom-theme.scss`:** + +- `mat.core()` → `mat.legacy-core()` + +- `mat.all-component-themes()` → `mat.all-legacy-component-themes()` + +- Added auto-generated `TODO(v15)` comment about typography migration + +- Added `mat.all-legacy-component-typographies($custom-typography)` + +- **Files:** 24 files changed across `package.json`, `app.module.ts`, all component `.ts`/`.spec.ts` files, `material.module.ts`, `notification.service.ts`, `custom-theme.scss` + + + +#### 4. Fix: Correct Typography Configuration & Theme Structure ([d354b9f5](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/d354b9f5)) + +- **Action:** + +- Replaced `mat.define-typography-level()` with `mat.define-legacy-typography-config($font-family: 'Roboto, Helvetica Neue, sans-serif')`. + +- Reordered SCSS `@include` statements: `mat.legacy-core()` before `mat.all-legacy-component-typographies()`. + +- Changed `mat.all-legacy-component-themes()` → `mat.all-legacy-component-colors()` (avoids re-emitting typography/density styles). + + +- **Reason:** The original code used `mat.define-typography-level()` which produces a single level, not a full config map. Material silently ignored it and fell back to defaults. `Montserrat` was never rendered in production. Using `mat.define-legacy-typography-config()` fixes the signature, and Roboto preserves visual parity with the live site. The `all-legacy-component-colors()` mixin avoids duplicate typography emission when theme colors differ between light/dark modes. + +- **Files:** `custom-theme.scss`, `docs/migration-doc.md`, `teams.component.html`, `teams.component.ts` + + + +#### 5. Refactor: Run MDC Migration Schematics ([66c409cd](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/66c409cd)) + +- **Action:** Executed `ng generate @angular/material:mdc-migration` to migrate all legacy components to MDC. + +- **Key Changes (38 files):** + +- **CSS:** Auto-generated `TODO(mdc-migration)` comments on rules targeting legacy internal classes (`.mat-slider-horizontal`, `.mat-chip-list`, `.mat-form-field-wrapper`, `.mat-card-header`, etc.) + +- **`custom-theme.scss`:** + +- `mat.legacy-core()` → `mat.core()` + +- `mat.all-legacy-component-typographies()` → `mat.all-component-typographies()` + +- `mat.all-legacy-component-colors()` → `mat.all-component-colors()` + +- CSS selectors updated: `.mat-table` → `.mat-mdc-table`, `.mat-header-row` → `.mat-mdc-header-row`, `.mat-row` → `.mat-mdc-row`, etc. + +- **`styles.css`:** Slider rules updated with `TODO(mdc-migration)` comments. + +- **Note:** The CLI migration produced some duplicate `@include` calls and leftover `TODO` comments that were cleaned up in the next commit. + +- **Files:** 38 files across all components, specs, modules, theme, and global styles + + + +#### 6. Fix: Resolve All MDC Migration TODOs ([d414cb90](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/d414cb90)) + +- **Action:** Manually resolved every `TODO(mdc-migration)` comment generated by the CLI schematics, replacing legacy CSS selectors with their MDC-compliant equivalents. + +- **Files:** 15 files across `progress-slider`, `report-config-modal`, `circular-heatmap`, `mapping`, `matrix`, `settings` components + `custom-theme.scss` + `styles.css` + + + +#### 7. Fix: Migrate Sidenav List Directives to MDC ([b8b39d4c](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/b8b39d4c)) + +- **Action:** Updated `sidenav-buttons.component.html` to use MDC list directives. + +- **Key Changes:** + +- `mat-list-icon` → `matListItemIcon`, `mat-line` → `matListItemTitle` + +- Added component CSS for `[matListItemIcon]` with spacing overrides (`margin-right: 18px`, `margin-left: 22px`) to restore icon alignment matching the legacy layout. + +- **Reason:** The MDC `mat-list` uses structural directives (`matListItemIcon`, `matListItemTitle`, `matListItemLine`) instead of legacy attribute selectors (`mat-list-icon`, `mat-line`). The CLI migration schematic did not catch these in the sidenav component. + +- **Files:** `sidenav-buttons.component.html`, `sidenav-buttons.component.css` + + + +#### 8. Fix: Resolve Heatmap Chip Selection and Styling Issues ([769b63af](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/commit/769b63af)) + +- **Action:** Rewrote the circular heatmap's team filter chip logic and template to work correctly with MDC chips. + +- **Key Changes:** + +- **Template:** Removed wrapping `` from chip listboxes (MDC chips should not be inside form fields for selection-only use). Replaced with plain `