Adding ng add Support for Automatic Theme Setup
#3
JoshuaAlzate
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I am proposing the addition of
ng addsupport to streamline the installation and configuration of the library’s theming system. Because pre-paint theme application cannot be solved purely inside Angular’s runtime, the library needs a reliable mechanism to configure host projects automatically.ng addis the Angular-standard way to achieve this.Why
ng addIs NecessaryPreventing theme flash (FOUC) requires running a small script before the first paint, ideally inside the document
<head>. Angular services, directives, and providers execute after bootstrapping, making them too late for this purpose.Achieving correct theme initialisation depends on modifying the host application’s environment:
<script>intoindex.htmltheme-init.jsfile into the projectangular.jsonThese steps cannot be performed automatically by the library without schematics.
ng addsolves this.Goals of Introducing
ng add1. Automatic Pre-Paint Theme Loading
ng addwill install a pre-packagedtheme-init.jsfile and inject a synchronous script tag in the<head>ofindex.html, ensuring the library applies the correct theme before Angular bootstraps.2. Zero Manual Configuration for Users
Consumers is not required to copy scripts, edit HTML files, or modify
angular.json.ng addautomates this and eliminates setup errors.3. CSP-Friendly Implementation
By injecting an external script instead of inline code, the library remains compatible with strict Content Security Policies.
4. Optional SSR Compatibility
ng addcan prepare the project for server-side theme hydration using cookies, enabling correct initial rendering even when using Angular Universal.What
ng addShould DoCopy
theme-init.jsinto the user’ssrc/directory or a namespaced folder underassets/.Register this file as an asset in
angular.json, ensuring it appears at the build root.Insert the following into
index.htmlbefore styles:Beta Was this translation helpful? Give feedback.
All reactions