Загрузка css из CDN в угловом компоненте 2

Question

Как говорится в заголовке, я хочу включить внешний css в компонент Angular 2. Вот как я это делаю сейчас:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-auth', 
    templateUrl: './auth.component.html', 
    styleUrls: [ 
     'https://fonts.googleapis.com/css?family=Dosis:400,500,600,700', 
     'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', 
     './assets/css/bootstrap.min.css', 
     './assets/css/main.css', 
     './assets/css/responsive.css', 
     './auth.component.css', 
    ], 
}) 
export class AuthComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

Первые два URL-адреса не работают. Я получаю сообщение об ошибке:

ncaught Error: Cannot find module "./https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"

я могу заставить его работать, включив его прямо в HTML, но я не думаю, что это правильный способ сделать это.

Редактировать: Я даже пытался использовать encapsulation: ViewEncapsulation.None,, что не помогло.

Answer 1

Вы должны загружать только локальные стили в массив styleUrls. Таким образом, в auth.component.css, импортировать необходимые внешние таблицы стилей:

@import "https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"; 
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; 

Answer 2

В отличие от templateUrl кажется, что styleUrls может быть определена только относительно.

Решения этой проблемы будет загружать абсолютные внешние шрифты или зависимости CSS от некоторого CSS кода, и вы можете поместить этот кусок CSS коды внутри @Component в стилях инлайн так:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-auth', 
    templateUrl: './auth.component.html', 
    styles: [' 
     @import "https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"; 
     @import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; 
    '], 
    styleUrls: [ 
     './assets/css/bootstrap.min.css', 
     './assets/css/main.css', 
     './assets/css/responsive.css', 
     './auth.component.css' 
    ], 
}) 
export class AuthComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

Если вы хотите, чтобы вы могли переносить свои относительные зависимости внутри стилей: [...] и загружать каждый из них с помощью @import. Примечание: при использовании сочетаний стилей: [...] + styleUrls: [...] работает нормально, вы можете использовать templateUrl: '...' или шаблон: '...'