web-dev-qa-db-ja.com

CSSファイルをAngularに追加するときのMIMEタイプエラー

私はAngularを使用して静的サイトを構築しようとしています。私が欲しいのは、いくつかのグローバルなcss/js/imageファイルをindex.htmlに追加することです

これはindex.htmlの私のコードです

<link rel="stylesheet" type="text/css" href="css/layers.css">

index.htmlファイルと同じレベルにあるcssフォルダー

追加したスタイルシートごとにこのエラーが発生しています（ng serve with chromeから）

「 http：// localhost：4200/css/layers.css 」からスタイルを適用することを拒否有効になっています。

これも追加してみました

#.angular-cli.json
"styles": [
        "styles.css",
        "css/layers.css"
      ],

どうすれば修正できますか？

私のangular設定は

Angular CLI: 1.6.5
Node: 8.1.4
OS: darwin x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
TypeScript: 2.5.3
webpack: 3.10.0
cssangularmime-types
15
sameera207

ソリューション1（Bootstrapがインストール済み）

あなたがする必要があるのは：

1）angularアプリのルートディレクトリの下の.angular-cli.jsonに移動します。

2）styles.cssの前にbootstrapを含むようにスタイル配列を変更します

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

注：bootstrapへのパスは/src/index.htmlからの相対パスであるため、node_modulesの前に「../」が必要です。

3）ng serveの現在のセッションを終了し、再度開始します。

これは 素晴らしいチュートリアル です

ソリューション2（参照Bootstrapを使用）

必要なのは次のとおりです。

1）angularアプリのルートディレクトリの下にあるstyles.cssに移動します。

2）この行を上部に追加します：

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Angular docs

9
shireef khatab

@ sameera207コメントの回答は正しいです。相対パスが機能する必要があります。私も同じ問題を抱えており、コメントの回答が機能しています。エラーを再現しようとしました。index.htmlのレベルでcssフォルダーを作成し、cssファイルを追加してから、styles配列にパスを追加しました。

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

その後、サーバーの再起動、つまりng serveを再度実行し、その動作を意味します。完了していることを確認してくださいrestared serverそして問題が解決しない場合はお知らせください、私はあなたを助けてうれしいです。ありがとう。

8
sajal rajabhoj

同じ問題に直面する人のために。

このエラーメッセージの通常の理由は、ブラウザがそのリソースをロードしようとすると、サーバーが代わりにHTMLページを返すためです。たとえば、ルーターが不明なパスをキャッチし、404 error.なしのデフォルトページを表示する場合パスは期待されるCSS file / image / icon /を何も返しません... ここからの参照

このようなファイル構造を持つAngular 6プロジェクトがあると仮定しましょう

project
    |-src
      |-app
      |-assets
      |-environments 
      |----

themingフォルダー（それらを含む）をsrcフォルダー内に直接配置する必要があると仮定します。

project
    |-src
      |-app
      |-assets
      |-environments
      |-vendor // Theming
         |-theme-light.css
          |theme-dark.css

このようなテーマファイルにアクセスしようとした場合。

<link rel="stylesheet" type="text/css" href: '../vendor/theme-dark.css'>

それはエラーをスローします

' http：// localhost：4200/vendor/theme-dark.css 'からスタイルを適用することを拒否。MIMEタイプ（ 'text/html'）はサポートされているスタイルシートMIMEタイプではなく、厳密MIMEチェックが有効になっています。

ブラウザでそのURLを過ぎた場合、パスが間違っているためプレーンなcssファイルを提供しません。

ソリューション

そのため、正しいパスを見つける必要があります。 （過去にurlをブラウズで見つけて、何が返されるかを確認できます）

この場合、../src/参照を置くとエラーが修正されます

<link rel="stylesheet" type="text/css" href: '../src/vendor/theme-dark.css'>

注：正確なパスとルーターの構成は、プロジェクトのセットアップ方法と使用しているフレームワークによって異なります。

5
Ram Chandra Neupane

すでにanglecli.jsonまたはangular.jsonにstyles.cssがある場合、index.htmlでは必要ありません。 cliはコンテンツを自動的に注入します。そのため、index.htmlからその行を削除すると、すべてが機能するはずです。

4
arun kumar