How to load css styles specific to a component dynamically in angular

Question

I am trying to load some CSS stylesheet specific to a component, just so there is no conflict with the rest of the project.

The function in my AppService

  static loadCSS(url) {
    const link = document.createElement('link');
    link.href = url;
    link.rel = 'stylesheet';
    link.type = 'text/css';

    const head = document.getElementsByTagName('head')[0];
    const style = head.getElementsByTagName('style')[0];

    head.insertBefore(link, style);
  }

I have an array of stylesheets in the desired component

  pagesCSS = [
    'assets/plugins/bootstrap/css/bootstrap.min.css',
    'assets/plugins/font-awesome/css/all.min.css',
    'assets/plugins/toastr/toastr.min.css',
    'assets/css/lime.min.css',
    'assets/css/custom.css'
  ];

And finally

  ngOnInit() {
    AppService.loadCSS(this.pagesCSS);
  }

I am getting this error

 The resource from “http://localhost:4200/assets/plugins/bootstrap/css/bootstrap…toastr.min.css,assets/css/lime.min.css,assets/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

I'm not sure how to achieve what you are looking for but that almost seems like a bad practice. You should be able to manipulate the styleUrls array of the component with the styles you need on a per template basis — ihor.eth, Apr 05 '20 at 23:10
could this answer be of any help ? https://stackoverflow.com/questions/36531486/dynamic-styleurls-in-angular-2 — ihor.eth, Apr 05 '20 at 23:17

How to load css styles specific to a component dynamically in angular

0 Answers0