CODEWITHSUNDEEP
angular
isawk
isawk

Reputation: 1057

Angular2 styleUrls not loading external styles

Working on an angular2 application and had hoped to be able to load different styles for public content and admin content. However it seems Angular ignores styles loaded from an external source 

@Component({styleUrls:["http://url_to_external_styles"]})

Above code doesn't work as expected, is there any other configuration required for loading styles from external source using full URL? Loading the styles relative to component works 100%, am however more interested in loading from content server.

Upvotes: 3

Views: 5351

Answers (2)

canyonCreek
canyonCreek

Reputation: 63

For those getting errors of the form "Module not found: Error: Can't resolve './the-url-of-an-external-style-sheet' ", here's what worked for me:

Here's what the Angular documentation has to say about urls in the styleUrls array:

The URL is relative to the application root, which is usually the location of the index.html web page that hosts the application.

In order to get the style sheets to load, make a local css style sheet and add @import statements to the top of it. For instance, if you want to add the style sheet at "http://url_to_external_styles", you could make a src/app/my-component.component.css file. Then you could add the following as the first line of src/app/my-component.component.css:

@import "http://url_to_external_styles";

You can find out more about @import by following the link in the Angular documentation quoted above.

Upvotes: 4

smiggle
smiggle

Reputation: 1259

You need to disable the view encapsulation of the component:

@Component({
    styleUrls:["http://url_to_external_styles"],
    encapsulation: ViewEncapsulation.None
})

https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation

Upvotes: 8

Related Questions