Dynamically loading CSS files in an Angular 17 application during runtime

Question

Dynamically loading CSS files in an Angular 17 application during runtime

I have a specific need where numerous CSS files are stored on a public CDN server.

My Angular 17 application requires the ability to extract a value from a query parameter and then use that value to locate the corresponding CSS file on the CDN server in order to style the UI as per the specified CSS file name in the application's URL query parameter.

I have experimented with different methods such as utilizing HttpClient to load the CSS file in the component's ngOnInit function, as well as trying the APP_INITIALIZER approach. While I can successfully load the CSS file, it does not seem to apply to the HTML elements.

In AngularJS, I was able to accomplish this using:

<link ng-href="https://<cdn-server-domain>/{{cssFileName}}.css">

Unfortunately, I have been unsuccessful in finding a working solution for this issue in Angular.

Your suggestions would be greatly appreciated.

css angular

Answer 1

Answer №1

Angular typically excludes <link> tags from your application as styles are usually meant to be included in the CSS files of your application. However, it seems this approach is not working for you. In such cases, you can dynamically create and add the tag to the DOM. Simply include the following code snippet in your app.component.ts:

ngOnInit() {
  const params = new URLSearchParams(window.location.search);
  const head = this.document.getElementsByTagName('head')[0];
  const link = document.createElement('link');
  link.href = `https://<cdn-server-domain>/${params.get('<param-name>')}.css`;
  link.rel = 'stylesheet';
  head.appendChild(link);
}

Answer 2

Angular typically excludes <link> tags from your application as styles are usually meant to be included in the CSS files of your application. However, it seems this approach is not working for you. In such cases, you can dynamically create and add the tag to the DOM. Simply include the following code snippet in your app.component.ts:

ngOnInit() {
  const params = new URLSearchParams(window.location.search);
  const head = this.document.getElementsByTagName('head')[0];
  const link = document.createElement('link');
  link.href = `https://<cdn-server-domain>/${params.get('<param-name>')}.css`;
  link.rel = 'stylesheet';
  head.appendChild(link);
}

Answer 3

Answer №2

The problem arose from a small delay in loading the external CSS file, causing a brief moment where the page displayed without proper styling (referred to as Flash of Unstyled Content or FOUC).

To resolve this issue, I implemented a solution using a Media Query with

prefers-reduced-motion: no-preference

. By utilizing this method, a temporary style reset is triggered before the remote CSS file loads, preventing the unstyled appearance during the loading process. Here's an example:

/* Temporary reset to avoid FOUC */
body {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

@media (prefers-reduced-motion: no-preference) {
  /* Your actual CSS styles here */
  body {
    opacity: 1;
  }
  /* ... */
}

Answer 4

The problem arose from a small delay in loading the external CSS file, causing a brief moment where the page displayed without proper styling (referred to as Flash of Unstyled Content or FOUC).

To resolve this issue, I implemented a solution using a Media Query with

prefers-reduced-motion: no-preference

. By utilizing this method, a temporary style reset is triggered before the remote CSS file loads, preventing the unstyled appearance during the loading process. Here's an example:

/* Temporary reset to avoid FOUC */
body {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

@media (prefers-reduced-motion: no-preference) {
  /* Your actual CSS styles here */
  body {
    opacity: 1;
  }
  /* ... */
}

Dynamically loading CSS files in an Angular 17 application during runtime

Answer №1

Answer №2

Similar questions

Is it possible to modify the colors of a box and text when hovering over it?

What is the best way to align the value text within an input tag to the upper left corner?

AngularJS: Utilize the ngStyle directive to add styling to a specific child

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

The alignment of the JQuery Mobile tabs is off

JQuery's animations and their influence on element positioning

Managing scroll position based on media queries in JavaScript

"Implementing a fixed header and footer with a scrolling content area within a parent div that has a fixed position for

Using javascript to filter an array of JSON data

If viewed on a mobile device, separate the array (indexed list) into two rows

Can a shape similar to an inverted circle be created using CSS and jQuery?

Tips for modifying the table structure while utilizing datalist

The width of table columns is altered upon the second rendering in JQuery DataTables

`Dynamic assortment displaying menu`

Using only CSS to swap out periods in OL>LI elements for a different style

Disabled text selection in Internet Explorer

Center the div element and adjust its scale to perfectly fit the screen

Angular 2 Error: TS2322 - The type 'Subscription' cannot be assigned to the type 'Observable<MouseEvent>'

Arrange your grid system with Bootstrap Vue

Overlapping sliding toggles with jQuery on multiple elements