How to load external CSS in Angular 2?

Question

I'm trying to use some external CSS for my component on "5 MIN QUICKSTART"

This is what I've tried (following this example):

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';


@Component({
    selector: 'my-selector',
    templateUrl: 'app/shared/my.component.html',
    styleUrls: ['https://example.com/themes/default/style.css'],
    encapsulation: ViewEncapsulation.None,
})

Check the code on plnkr

Styles do not apply on my component, also when checking "Sources" from "Developer tools", the images/fonts/ from the external CSS do not seem to get loaded. Is there something that i'm missing?

which version of angular are you using ? try setting `moduleId : module.id` in your component — candidJ, Aug 22 '16 at 10:30
@candidJ I'm using RC5, i tried to add moduleId : module.id in the component, i have the same behavior — Gerald Hughes, Aug 22 '16 at 10:36

score 0 · Answer 1 · answered Aug 22 '16 at 12:02

export function isStyleUrlResolvable(url: string): boolean { if (isBlank(url) || url.length === 0 || url[0] == '/') return false; var schemeMatch = RegExpWrapper.firstMatch(_urlWithSchemaRe, url); return isBlank(schemeMatch) || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset'; }

Seems that for url schemes, will return false.

The solutions was to use a local css file and just import the external css, like so:

@import url("https://example.com/themes/default/style.css");

How to load external CSS in Angular 2?

1 Answers1