fix(flex-fields): load third-party CSS by bundle name, the way abp-tree does - #233
Merged
Merged
Conversation
…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.
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
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.
Summary
Selectfield types (SelectControlComponent,SelectSearchComponent) now lazy-loadng-zorro-antd-select.cssby a fixed bundle name at init, through a newFlexFieldsStyleLoader— the same contractabp-treein@abp/ng.componentsalready uses forng-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, andvaulthad each ended up with a different partial set ofangular.jsonentries for ng-zorro-antd's CSS.lesscondition beforestyle, so a bare@importof that CSS cannot resolve under the Angular CLI's stylesheet bundler. See the issue comments for the full analysis.@dignite/ng.flex-fields-ckeditormoves onto the same loader. It used to@importckeditor5'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 ownckeditor5.cssby bundle name instead.angular.jsonentry 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_TOKENopts a host out when it bundles the CSS another way.ng-zorro-antd-tree-selectentry removed from the demo'sangular.json— nothing in the workspace rendersnz-tree-select.angular.jsonentries a host needs, under a new### Stylessection.Closes #232.
Test plan
yarn test(flex-fields): 43 files / 302 tests passng test flex-fields-ckeditor: 6 files / 39 tests passng test flex-fields-file-explorer: 4 files / 21 tests passyarn lint: all four projects passyarn build:lib/build:lib:file-explorer/build:lib:ckeditor, thencheck-angular-package-deps.mjson all three dist folders: passyarn build/yarn build:prod: pass;ng-zorro-antd-select.css,ng-zorro-antd-tree.css,ckeditor5.cssall emitted under their literal names, none referenced fromindex.htmlCKEditorfield (Basic and Full toolbar, light and dark theme) against a running .NET host — not exercised in this PR, worth doing before merge