chore: Angular 20 -> 21 migration + Dependency Audits by sawankshrma · Pull Request #578 · devsecopsmaturitymodel/DevSecOps-MaturityModel

sawankshrma · 2026-07-14T07:32:19Z

description in doc

Defer detectChanges() in specs to avoid CD timing issues, add null guard in usage component, remove redundant root-level form imports.

…ps/overrides (33→1)

… issues

wurstbrot · 2026-07-14T07:47:08Z

  toggleTagFilters(event: MatChipListboxChange) {
    const selectedValues: string[] = event.value || [];
-    console.log(`${perfNow()}: Matrix: Tag filter changed: [${selectedValues.join(', ')}]`);
+    if (!environment.production) {


Usage of "production" is not good. Better is to use feature toggles. E.g. LOG_LEVEL=DEBUG .

See also https://dsomm.owasp.org/activity-description?uuid=a511799b-045e-4b96-9843-7d63d8c1e2ad

added in Backlog section in the doc for now.

wurstbrot · 2026-07-18T18:01:39Z

@vbakke please merge after review

vbakke

A minor comment for the backlog:
The Circular Heatmap moves up and down when I scroll for certain widths. It does that also at https://dsomm.owasp.org, but not in a previous version at https://dsomm.pages.dev. So looks like a minor bug that we introduces this spring.

vbakke · 2026-07-19T21:00:08Z

Sign in to view

-    "@angular-eslint/schematics": "20.7.0",
-    "@angular-eslint/template-parser": "20.7.0",
-    "@angular/compiler-cli": "20.3.25",
+    "@angular-devkit/build-angular": "21.2.19",


From https://www.npmjs.com/package/@angular-devkit/build-angular:

Angular's Webpack support is deprecated. Use the esbuild and Vite-based "@angular/build" package instead.

Yes! As of commit a7e3cf6:

We now use the leaner @angular/build package (esbuild/Vite) for build, serve, and extract-i18n.

We are keeping @angular-devkit/build-angular installed solely because Karma requires its legacy Webpack builder.

Once we migrate away from Karma to a modern runner like Vitest, we can drop the devkit package entirely.

- Remove @angular/platform-browser-dynamic (runtime + types) after completing the bootstrapApplication migration in main.ts - Drop unused packages: js-yaml, @types/js-yaml, @types/node, @angular-eslint/schematics, @typescript-eslint/eslint-plugin, prettier-eslint, qs - Bumped @typescript-eslint/parser to 8.64.0 - Migrate test.ts from BrowserDynamicTestingModule to BrowserTestingModule (static platform)

…@angular/build

…endencies + add uuid overides to pnpm-workspace.yaml Suppresses npm/pnpm allow-scripts warnings.

…ocument newer commits

Addresses an unmet peer dependency issue caused by Yarn v1 not auto-installing peer dependencies in the GitHub Actions environment, which caused the @angular-eslint plugin to crash. Pinned to v8.64.0 to match the existing parser version.

sawankshrma · 2026-07-20T22:04:11Z

The Circular Heatmap moves up and down when I scroll for certain widths. It does that also at https://dsomm.owasp.org, but not in a previous version at https://dsomm.pages.dev. So looks like a minor bug that we introduces this spring.

Noted and Added in the Backlog section.

as of now (this PR), the Backlog looks like this:

Backlog

#	Area	Issue	Priority	Notes
1	`xlsx` (SheetJS) dependency	Prototype pollution + ReDoS vulnerability, no upstream fix available (maintainers stopped publishing security patches)	Medium	Requires code changes wherever `xlsx` is imported for spreadsheet export. Options: replace with `exceljs` or `xlsx-js-style` (community fork), or accept risk if only used for non-sensitive data export. Needs a dedicated PR.
2	`CircularHeatmapComponent`	• Order-sensitive group highlight: `equalArray` compares chip/DOM order against YAML declaration order — mismatched order prevents highlighting. Fix: set-based comparison. • Group selection wipe: `toggleTeamGroupFilter` mutates `filtersTeams` in place, but `keyvalue` pipe caches on object reference — a subsequent single-chip click drops group-selected teams. Fix: signal-based state. • Stale group deselection: Deselecting a group chip visually deselects it but doesn't clear the underlying team selection. • Layout shift on scroll: Heatmap shifts vertically at certain viewport widths.	High	All issues will be fixed in one upcoming PR — migrating `CircularHeatmapComponent` to Signals (as `MatrixComponent` already does).
3	Logging	Replace `console.log()` and boolean `environment.production` checks with a proper logging library using log-level feature toggles. Preferred Library: Winston.	Low	Discussed in team meeting.
4	Test Runner	• Deprecated subdependencies: Karma pulls in `glob@7.2.3`, `inflight@1.0.6`, and `rimraf@3.0.2` — all deprecated, cluttering `pnpm install` with warnings. • pnpm incompatibility: Karma's Webpack-based builder (`@angular-devkit/build-angular:karma`) cannot resolve transitive dependencies (e.g. `@babel/runtime`) under pnpm's strict symlinked `node_modules`. Currently requires `node-linker=hoisted` in `.npmrc` as a workaround, defeating pnpm's strictness benefits. • Modern tooling alignment: Build/serve already use esbuild/Vite via `@angular/build`. Tests are the last piece still on the legacy Webpack pipeline. Migrating would allow dropping `@angular-devkit/build-angular` entirely.	High	Karma is deprecated. Migrate to a Vite-based test runner (e.g. Vitest or `@angular/build` native test support).

sawankshrma added 6 commits July 14, 2026 12:43

core upgrade 21

44e97fc

material upgrade 21

afe9ab1

fix: resolve NG0100 test failures from Angular 21 TestBed error rethrow

5acaee5

Defer detectChanges() in specs to avoid CD timing issues, add null guard in usage component, remove redundant root-level form imports.

chore(deps): remove unused Grafana SDK, patch vulnerabilities via bum…

61c090a

…ps/overrides (33→1)

docs: log Angular 21 upgrade + dep audit, backlog heatmap chip filter…

98a773d

… issues

refactor: hide verbose matrix logs inside production

69e4067

wurstbrot reviewed Jul 14, 2026

View reviewed changes

docs: add Winston logging migration to backlog

14689b7

sawankshrma requested review from vbakke and wurstbrot July 18, 2026 17:28

vbakke requested changes Jul 19, 2026

View reviewed changes

sawankshrma added 6 commits July 21, 2026 00:02

chore(deps): remove @angular/animations

d55c9b8

chore: migrate build toolchain from @angular-devkit/build-angular to …

a7e3cf6

…@angular/build

chore: approve install scripts for build toolchain (esbuild/Vite) dep…

426666c

…endencies + add uuid overides to pnpm-workspace.yaml Suppresses npm/pnpm allow-scripts warnings.

docs: consolidate backlog, add Vite test runner migration item, and d…

ea8a522

…ocument newer commits

sawankshrma changed the title ~~chore: Angular 18 to 20 migration + Dependency Audits~~ chore: Angular 20 -> 21 migration + Dependency Audits Jul 20, 2026

sawankshrma requested a review from vbakke July 20, 2026 22:05

vbakke approved these changes Jul 21, 2026

View reviewed changes

vbakke merged commit b1f4119 into devsecopsmaturitymodel:gsoc2026 Jul 21, 2026
2 checks passed

Uh oh!

Uh oh!

Conversation

sawankshrma commented Jul 14, 2026

Uh oh!

wurstbrot Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

sawankshrma Jul 18, 2026

Choose a reason for hiding this comment

Uh oh!

wurstbrot commented Jul 18, 2026

Uh oh!

vbakke left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

vbakke Jul 19, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as off-topic.

Uh oh!

sawankshrma Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sawankshrma commented Jul 20, 2026

Backlog

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants