chore: migrate to Angular v21 and @fundamental-ngx UI5 web components#105
Merged
Conversation
- Upgrade Angular from v16 to v21 via incremental ng update steps - Replace @ui5/webcomponents-ngx and @ui5/theming-ngx with @fundamental-ngx/ui5-webcomponents, /fiori, /base, /core, /cdk, /i18n - Update angular.json: add SAP theming CSS files (correct load order) and asset globs for runtime theme switching - Replace Ui5WebcomponentsModule with individual standalone component imports; ThemingModule.withConfig() replaces Ui5ThemingModule.forRoot() - Add local Ui5I18nPipe wrapping existing JSON translation assets - Fix all templates: camelCase input bindings, ValueState renames (Error→Negative, Warning→Critical, Success→Positive), remove unsupported attributes ([fixed], status on card-header) - Add skipLibCheck to tsconfig to suppress transitive @UI5 type errors
Replace the blanket @ui5/webcomponents-icons/dist/AllIcons.js import with the 11 icons actually used by the app. This eliminates the two lazy icon chunks (759 kB + 395 kB) at the cost of ~20 kB inlined in main, saving ~1.15 MB uncompressed / ~272 kB gzipped. Tighten angular.json production budgets to reflect actual sizes: - initial error: 10 MB → 6 MB - anyComponentStyle warning: 2 MB → 10 kB (Angular default) - anyComponentStyle error: 4 MB → 20 kB (Angular default)
✅ Deploy Preview for ui5-webcomponents-ngx-sample ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Switch from @angular-devkit/build-angular:browser (Webpack) to the @angular/build:application (esbuild) builder. Build time drops from ~39s to ~5s locally, resolving the 18-minute Netlify CI timeout caused by Webpack processing the large @fundamental-ngx CSS files. Update netlify.toml publish path from dist/mock-project to dist/mock-project/browser — the new builder adds a /browser subdir.
droshev
approved these changes
Jun 1, 2026
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.
Migrate to Angular v21 and @fundamental-ngx UI5 web components
Summary
Angular v16 → v21 — incremental upgrade through each major version using
ng update. Automated codemods applied:provideHttpClient,standalone: false,@for/@ifcontrol flow syntax, andmain.tsbootstrap changes.@ui5/webcomponents-ngx→@fundamental-ngx/ui5-webcomponents— the old wrapper package is deprecated and incompatible with Angular v20+. Replaced with@fundamental-ngx/ui5-webcomponents,/fiori,/base(and their peer deps@fundamental-ngx/core,/cdk,/i18n). All template bindings updated from kebab-case to camelCase ([title-text]→[titleText]etc.), ValueState enum values renamed (Error→Negative,Warning→Critical,Success→Positive).Theming —
@ui5/theming-ngxreplaced with@fundamental-ngx/core/theming. SAP theming CSS and font assets added toangular.jsonin the required load order.Translations —
@ui5/webcomponents-ngx/i18nreplaced with a lightweightI18nService+Ui5I18nPipethat loads the existing JSON translation assets over HTTP. Language switching is restored via a root-scoped service shared across all pipe instances.Bundle size — replaced
AllIcons.jswith 11 individual icon imports, eliminating two lazy chunks (~1.15 MB / 272 kB gzipped). Angular.json budgets tightened to reflect actual sizes.CI/CD — added
.nvmrcpinning Node.js 22 to satisfy Angular CLI v21's minimum Node requirement on Netlify. Migrated to the esbuild-based@angular/build:applicationbuilder, reducing build time from ~39s to ~5s locally and resolving an 18-minute Netlify CI timeout caused by Webpack processing the large@fundamental-ngxCSS files. Updatednetlify.tomlpublish path todist/mock-project/browser.Layout fix — added
fd-container--no-vertical-gapto nested<fd-layout-grid>elements inapp.component.html. Without it,fundamental-stylesstackedpadding-blocktwice on columns inside nested grids, causing an 8px top misalignment between sibling cards.Unsupported themes removed — Belize, Belize HCB, and Belize HCW are not available in
@fundamental-ngx/core's standard theme set and have been removed from the theme picker.Test plan
ng build --configuration=production)