Skip to content

fix(flex-fields): load third-party CSS by bundle name, the way abp-tree does - #233

Merged
duguankui merged 1 commit into
mainfrom
fix/flex-fields-angular-styles-232
Sep 6, 2026
Merged

fix(flex-fields): load third-party CSS by bundle name, the way abp-tree does#233
duguankui merged 1 commit into
mainfrom
fix/flex-fields-angular-styles-232

Conversation

@duguankui

Copy link
Copy Markdown
Member

Summary

  • Select field types (SelectControlComponent, SelectSearchComponent) now lazy-load ng-zorro-antd-select.css by a fixed bundle name at init, through a new FlexFieldsStyleLoader — the same contract abp-tree in @abp/ng.components already uses for ng-zorro-antd-tree.css. Fixes the drift described in Angular: aggregate ng-zorro-antd style dependencies into one published stylesheet instead of per-consumer angular.json entries #232, where this repo's demo, vault-extract, and vault had each ended up with a different partial set of angular.json entries for ng-zorro-antd's CSS.
  • An aggregated stylesheet shipped from the package (the fix originally proposed in Angular: aggregate ng-zorro-antd style dependencies into one published stylesheet instead of per-consumer angular.json entries #232) turned out not to work: ng-zorro-antd declares its per-component style exports with the less condition before style, so a bare @import of that CSS cannot resolve under the Angular CLI's stylesheet bundler. See the issue comments for the full analysis.
  • @dignite/ng.flex-fields-ckeditor moves onto the same loader. It used to @import ckeditor5's 241 KB UI stylesheet into a component style, which ng-packagr compiled straight into the published bundle (471 KB, shipped to every host regardless of whether a rich-text field was ever used) and pinned to whatever ckeditor5 version the package was built against, independent of the host's own installed copy the editor's JavaScript already comes from at runtime. It now asks for the host's own ckeditor5.css by bundle name instead.
  • A host that forgets the angular.json entry now gets one console error naming the missing file and quoting the exact entry to add, instead of a silently unstyled control (Select) or a blank/collapsed editor (CKEditor). DISABLE_FLEX_FIELDS_STYLE_LOADING_TOKEN opts a host out when it bundles the CSS another way.
  • Dead ng-zorro-antd-tree-select entry removed from the demo's angular.json — nothing in the workspace renders nz-tree-select.
  • READMEs for all three flex-fields Angular packages document the angular.json entries a host needs, under a new ### Styles section.

Closes #232.

Test plan

  • yarn test (flex-fields): 43 files / 302 tests pass
  • ng test flex-fields-ckeditor: 6 files / 39 tests pass
  • ng test flex-fields-file-explorer: 4 files / 21 tests pass
  • yarn lint: all four projects pass
  • yarn build:lib / build:lib:file-explorer / build:lib:ckeditor, then check-angular-package-deps.mjs on all three dist folders: pass
  • yarn build / yarn build:prod: pass; ng-zorro-antd-select.css, ng-zorro-antd-tree.css, ckeditor5.css all emitted under their literal names, none referenced from index.html
  • ckeditor-ckeditor fesm bundle: 471 KB → 36 KB; demo initial bundle: 2.20 MB → 1.98 MB (back under the 2 MB budget)
  • Manual smoke test of a real CKEditor field (Basic and Full toolbar, light and dark theme) against a running .NET host — not exercised in this PR, worth doing before merge

…ee does (#232)

@dignite/ng.flex-fields's Select field types render nz-select from ng-zorro-antd,
which ships no component styles of its own - every host had ended up with a
different partial set of angular.json entries for the CSS it needs (this repo's
demo, vault-extract, and vault all diverged). An aggregated stylesheet shipped
from the package was considered, but ng-zorro-antd declares its per-component
style exports with the `less` condition before `style`, so a bare `@import` of
that CSS cannot resolve under the Angular CLI's stylesheet bundler.

Instead, SelectControlComponent and SelectSearchComponent now lazy-load
ng-zorro-antd-select.css by a fixed bundle name at init, through a new
FlexFieldsStyleLoader service built on @abp/ng.core's LazyLoadService - the same
contract ABP's own abp-tree already uses for ng-zorro-antd-tree.css. A host
declares the angular.json entry once (inject: false, so production hashing
doesn't break the fixed name); DISABLE_FLEX_FIELDS_STYLE_LOADING_TOKEN opts out.
A missing entry is now one console error naming the file, instead of a silently
unstyled control.

@dignite/ng.flex-fields-ckeditor moves onto the same loader: it used to @import
ckeditor5's 241 KB UI stylesheet into a component style, which ng-packagr
compiled into the published bundle (471 KB, loaded by every host regardless of
whether a rich-text field was ever used) and pinned to whatever ckeditor5
version the package was built against, independent of the host's own installed
copy that the editor's JavaScript already comes from at runtime. It now asks for
the host's own ckeditor5.css by bundle name instead; the bolt-on's bundle drops
to 36 KB and the demo's initial bundle drops from 2.20 MB to 1.98 MB.

The demo's dead ng-zorro-antd-tree-select angular.json entry is also removed -
nothing in the workspace renders nz-tree-select.
@github-actions github-actions Bot added documentation Improvements or additions to documentation area: angular Changes under either module's angular/ Angular workspace module: flex-fields Changes under flex-fields/ (Dignite.Abp.FlexFields) labels Sep 6, 2026
@duguankui
duguankui merged commit 9d6469b into main Sep 6, 2026
3 checks passed
@duguankui
duguankui deleted the fix/flex-fields-angular-styles-232 branch September 6, 2026 11:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: angular Changes under either module's angular/ Angular workspace documentation Improvements or additions to documentation module: flex-fields Changes under flex-fields/ (Dignite.Abp.FlexFields)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Angular: aggregate ng-zorro-antd style dependencies into one published stylesheet instead of per-consumer angular.json entries

1 participant