角4文書の頭の部分にcircle.cssをロードします

Question

私は角度4を使用しています。cssscriptのcircle.cssを使用したいと思います。 私はリンクからファイルをダウンロードし、私の何かコンポーネントファイル内circle.cssを置くが、私は私のsomething.component.htmlに
<link rel="stylesheet" href="circle.css">

を使用する場合。

私はエラーを取得：

zone.js:654 Unhandled Promise rejection: Failed to load circle.css ; Zone: ; Task: Promise.then ; Value: Failed to load circle.css undefined* Which are the correct steps I need to follow to use the css file circle.css in my component??

Answer 1

私はあなたのアーキテクチャについて何を知っているが、あなたは角度-CLIを使用していて、あなたが今持っている必要がありますng generate component testComponent --module appコマンド

を書いたと仮定していません

• テストcomponent.component.ts
• 試験 - ：テスト・コンポーネントのフォルダの下に、プロジェクト内のいくつかのファイルcomponent.component.html
• テストcomponent.component.css
• テストcomponent.component.spec.ts

ファイル：テストcomponent.component.ts

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

@Component({ 
    selector: 'app-test-component', 
    templateUrl: './test-component.component.html', 
    styleUrls: ['./test-component.component.css'] 
}) 
export class TestComponentComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

"test-component"フォルダのcircle.cssファイルで目的のインポートを実行し、styleUrlsコンポーネントのリストに追加することができますstyleUrls: ['./test-component.component.css','./circle.css']

希望します。

Answer 2

このファイルの相対パスを使用する必要があります.Webpackは絶対パスを解決する方法を考えます。 ファイルが同じフォルダに存在する場合はcircle.cssの代わりに./circle.cssを使用してください。代わりにのスタイルフォルダにある場合は../styles/circle.cssと書くことができます。