角2のコンポーネントのCDNからCSSをロード

Question

タイトルが言うように、私はAngular 2コンポーネントに外部のcssを含める必要があります。ここで私は今それをやっている：

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() { 
    } 

} 

最初の2つの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で、ご希望の外部スタイルシートをインポートします。templateUrlとは対照的に

@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

styleUrlsは比較的に定義することが可能と思われます。

その問題を解決するには、いくつかのCSSコードから自分の絶対的な外部のフォントやCSSの依存関係をロードするために、あなたがこのようなインラインスタイルに@Component内のCSSコードのこの部分を置くことができるようになります：

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のみを使用できます： '...'またはテンプレート： '...'