Angular2 styleUrls not loading external styles

Question

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 fro

Answer 1

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.

Answer 2

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