Migrate to new angular builder (esbuild)#564
Open
sawankshrma wants to merge 23 commits into
Open
Conversation
wrap mat-icon in span with matListItemIcon to prevent MDC from overriding color=primary. After upgrading to Material 16, the icons became grey from the primary color they were
The --prod flag was deprecated in Angular CLI v12 and removed in later versions. Replaced with --configuration=production and dropped redundant --aot flag (AOT is default for production builds).
Removed eslint-config-standard-with-typescript and its peer deps (eslint-plugin-import, eslint-plugin-n, eslint-plugin-promise) — these were never referenced in .eslintrc.json and caused ERESOLVE peer dependency conflicts during the Angular 17 upgrade, as they pulled in incompatible ESLint/TypeScript version constraints that clashed with @angular-eslint v17. Also bumped eslint-config-prettier from ^8.5.0 to pinned 9.1.0 (v8.10.1 and v9.1.1 were compromised in a July 2025 supply chain attack), eslint-plugin-prettier to ^5.2.0, and prettier to ^3.3.0.
…al MDC and Material 17 upgrade
RouterTestingModule was deprecated in Angular v17 in favor of the standalone provideRouter() API.
moved MatChip from declarations to imports in circular-heatmap spec, since MatChip is now a standalone component in Angular Material 17 and cannot appear in declarations.
Ran ng lint --fix after bumping prettier from v2 to v3.
Angular 17 requires Node ≥18.13.0. Bump actions/checkout and actions/setup-node from v1 to v4 (v1 runs on deprecated Node 12).
No need to call ActivitiesBeingDisplayed every time the filter is changed as dataSource is a computed() value now which depends on other signal() values - levels, filtersTag and filtersDim
Consumers (AppComponent & SidNavButtonsCompoent) now use computed() values rather than subscribing to observables from these Services.
Switch from webpack-based browser builder to esbuild-based application builder. Fix markdown-it default imports, enable esModuleInterop, update polyfills to array format, remove webpack-only options (buildOptimizer, vendorChunk), remove polyfills.ts, and flatten output path to dist/dsomm/.
caused the duplicate color styles warning surfaced by the esbuild builder during ng serve
vbakke
approved these changes
Jun 7, 2026
Collaborator
vbakke
left a comment
vbakke
left a comment
There was a problem hiding this comment.
Apart from my one comment, I do not have anything more to add.
Approved. :)
| "prettier-eslint": "^16.3.0", | ||
| "qs": "^6.11.0", | ||
| "typescript": "^4.8.0" | ||
| "typescript": "^5.4.5" |
Collaborator
There was a problem hiding this comment.
Suggested change
| "typescript": "^5.4.5" | |
| "typescript": "~5.4.5" |
This is not important. And has been part of DSOMM for a while. (I.e. it was not introduced now.) This is more of a comment for to something we should look into as we progress.
The ^5.4.5 installed v5.9.3 on my machine (when using pnpm). But Angular 17.3.x requires TypeScript >=5.2 <5.5, causing the build to fail.
As we will move away from Angular 17 on next phase this should be fine. But we should probably pay attention to what typescript version is supported on each phase. :)
Also, we should look into supporting pnpm and yarn by the time we finish the upgrade.
- pnpm has a huge disk benefit for developers, while
- yarn apparently has some benefits in CICD pipeline
: )
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Migrates the build system from the legacy webpack-based
browserbuilderto the esbuild-based
applicationbuilder introduced in Angular 17.Changes:
Switch builder to
@angular-devkit/build-angular:application.Fix
markdown-itnamespace imports → default imports across 4 files:esbuild handles
import *as a true namespace object, calling it as a function crashes at runtime unlike webpack.Enable
esModuleInteropintsconfig.json. Required for the defaultimport fix to compile; aligns TypeScript's module interop with the
ECMAScript spec
Convert
polyfillsfrom a file reference to an explicit array:The
applicationbuilder no longer accepts a single.tsfile as polyfills entry point; entries are declared directly inangular.jsonRemove
src/polyfills.tsand itstsconfig.app.jsonreference.Remove webpack-only options
buildOptimizerandvendorChunk.Remove
@grafana/faro-webpack-plugin(webpack-specific plugin)Flatten output path to
dist/dsomm/viaoutputPath.browser: ""The new builder defaults to
dist/dsomm/browser/which would break the existing deploy pipelineResult: Build time drops from ~104s to ~10s.
This PR is stacked on top of #563 . It'd be easier to review this one after merging pr#563