How to fix strict MIME checking issue in angular 18 while loading dynamic css file in angular...

In Angular 10 we used require to load css dynamically. Require deprecated in angular 18 and we used Renderer2 to load styles.

if (this.jurisdiction == 'ON') {
require("style-loader!./../on_styles.scss");
}


In angular 18, it modified to

if (this.jurisdiction == 'ON') {
const link = this.renderer.createElement('link');
this.renderer.setAttribute(link, 'rel', 'stylesheet');
this.renderer.setAttribute(link, 'href',
'src/on_styles.css); // supports only css. So modified scss to css
this.renderer.appendChild(document.head, link);
}


While using Renderer2, I am getting the below error – Refused to apply style from 'https://localhost:4200/src/on_styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Continue reading...