2017-06-22 4 views
0

404は、それは私が角度CLIで作成しただけのシンプルなアンギュラ「クイックスタート」スタイルアプリで404ブートストラップスタイル角度

を返すブートストラップCSSファイルとの奇妙なシナリオを手に入れました。 Bootstrapをpackage.jsonに追加し、npm updateを使用してインストールしました。

インデックスファイルは非常に単純であり、頭の中で次のリンク要素を含む:
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

bootstrap.min.cssクラスがその場所に存在します。

私はその後ng serve --port 3000 --open

ませスタイリングを使用していないアプリケーションを実行すると、レンダリングされたページに表示されますとChromeの開発ツール(コンソールで)に赤いエラーテキストがあり
Failed to load resource: the server responded with a status of 404 (Not Found) :3000/node_modules/bootstrap/dist/css/bootstrap.min.css

ことを私に知らせるしかし、 devツールの[Sources]タブをクリックすると、bootstrap.min.cssクラスがそこにあると思います。

誰でも知っていることを知っていますか?あなたは、インスタンスのためにsrcフォルダの設定であなたのrootを持っている場合、あなたはあなたのスタイルのURLの前に../を追加する必要があります

{ 
    ..., 
    "apps": [ 
    { 
     ..., 
     "styles": [ 
     "./node_modules/bootstrap/dist/css/bootstrap.min.css" 
     ] 
    } 
    ] 
} 

答えて

2

あなた.angular-cli.json設定のstyles配列内のスタイルシートを追加する必要があります

+0

それはそれのようなものでした。 ..それもやった。今、スタイルが現れます。奇妙なことですが、私はまだ開発ツールで赤色の404エラーが発生します。ブートストラップはそこにあり、働いています。 – onefootswill

+0

あなたの 'index.html';から削除してください;) – PierreDuc

+0

ありがとうピエール。速度Angularが動いているので、学習教材は速くなっています。それで私の混乱。私の本はすでに部分的に廃止されています。 – onefootswill

2

サードパーティのスタイルを追加するには、angular.cli.jsonを使用する必要があります。

"styles": [ 
      "styles.css", 
      "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
     ],