我試圖用Angular建立一個靜態網站。我想要的是有一些全球css/js/image文件添加到index.html

這是我在index.html的代碼

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

我的css文件夾和index.html文件在同一層

我添加的每個樣式表都會出現這個錯誤(來自ng serve with chrome)

拒絕應用“http://localhost:4200/CSS/layers . CSS”中的樣式，因為其MIME類型(“text/html”)不是受支持的樣式表MIME類型，并且啟用了嚴格的MIME檢查。

我也試著加了這個

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

我該如何解決這個問題？

我的角度設置是

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

你需要做的就是:

轉到。angular-cli.json在你的angular app的根目錄下。

修改styles數組以在styles.css之前包含bootstrap

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

注意:bootstrap的路徑相對于/src/index.html，這就是為什么您需要& quot../& quot；node_modules之前。

退出ng serve的當前會話，然后重新啟動。 這里有一個很棒的教程

解決方案2(引用引導) 你需要做的就是:

轉到angular應用程序根目錄下的styles.css。

在頂部添加這一行:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

這是有棱角的文件

如果angularcli.json或angular.json中已經有了styles.css，那么在index.html就不需要了。cli將自動注入內容。因此，從index.html中刪除該行，一切都應該工作。

對于將面臨同樣問題的人來說。

出現此錯誤消息的通常原因是，當瀏覽器試圖加載該資源時，服務器返回一個HTML頁面。例如，如果您的路由器捕獲未知路徑并顯示不帶404錯誤的默認頁面。當然，這意味著路徑不會返回預期的CSS文件/圖像/圖標/任何東西...從這里引用

假設我們有一個Angular 6項目，文件結構如下:

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

假設我們需要將一個主題化文件夾(包含css文件)直接放在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文件，因為路徑是錯誤的。

解決辦法

所以你需要做的就是找到正確的路徑。(我們可以通過以下網址找到答案 瀏覽并查看將返回的內容)

在放whis盒中../src/ reference將修復該錯誤

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

注意:確切的路徑和路由器配置取決于您如何設置您的項目和您與Angular一起使用的庫。

@sameera207評論中的答案是正確的，相對路徑必須工作，我也有同樣的問題，評論的答案對我有效。我試圖重現你的錯誤，我做了index.html級別的css文件夾，添加了css文件，然后在樣式數組中添加了路徑。

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

然后重新啟動服務器，我的意思是再次執行ng服務和它的工作。確保你已經完成并重啟了服務器，如果問題仍然存在，請讓我知道，我很樂意幫助你。謝謝

嘗試添加

<base href="/">

在index.html所有風格中名列前茅； 它對我有用

當我從終端使用npm i -S材料圖標安裝材料圖標時，我遇到了同樣的問題。

我已經遵循了npm包安裝中給出的說明，并在index.html中放置了一個鏈接，如& ltlink rel = " style sheet " type = " text/CSS " href = & lt；node _ module _ path/material-icons/icon font/material-icons . CSS & gt；

它引發了一個。它的MIME類型(' text/html ')不是受支持的樣式表MIME類型，并且啟用了嚴格的MIME檢查。

您必須將href中提到的路徑粘貼到angular.json文件的styles array下

別忘了重啟angular服務器，你可以以后再感謝我

參考信息:角度- V8.x，材料-圖標- V0.3.1

謝謝

(*注:關于ASP.NET樣板零(付費版)，但也可能是你的解決方案*)

“是的，”富蘭克林說，“雖然這個付費應用讓我看起來像個健忘的老人，這很奇怪。；-)，但可能與系統相關。

我確實發現了: support . aspnet zero . com/QA/Questions/7742/denied-to-apply-style-from:

"運行& gt& gt吞咽構建& lt& lt命令并重新創建縮小的文件。

為我工作。(再次；-) )

在angular.json中，添加配置選項

"extractCss & quot:假的，

像這樣

"options": {
        
        "aot": true,
        "outputPath": "dist",
        "index": "src/index.html",
        "extractCss": false,
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
...

在我的角度項目中，我得到了相同類型的誤差。添加此類型后= & quottext/html & quot；一段代碼錯誤消失了。

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

這是鏈接layers.css文件的代碼。

& ltlink rel = " style sheet " type = " text/CSS " href = " CSS/layers . CSS " >

請從這一行中刪除type="text/css "。

因此，代碼將變成:

& ltlink rel = " style sheet " href = " CSS/layers . CSS " & gt；

使用這條線，我希望它現在能工作。謝謝你

在assets文件夾中創建新的CSS文件夾，然后將CSS文件放入CSS中，然后再次鏈接到新的位置

Eg : -  <link rel="stylesheet" href="assets/css/materialize.min.css">

我試著用ng serve運行ASP.NET zero的角度代碼，遇到了這個問題。

通常情況下，所有角度項目都使用ng serve命令運行。但是ASP.NET零框架首先縮小css文件，然后做ng服務過程..這兩件事集成在npm start命令中。如果至少有一次npm啟動完成，則縮小的文件存儲在我們的本地...所以下一次即使你發球，它也會起作用..

所以運行npm start為我解決了這個問題。

因為我已經定義了相同的*。css文件， 在*中。html & ampangular.json文件 論角度

把這條線從index.html移走

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

然后轉到angular.json(從angular 5開始)或者angular-cli.json取決于你的版本。在樣式數組中設置css文件的路徑，如下所示

"styles": [
          "src/style1.css",
          "src/style2.css"
        ],

最后重啟app。發球

檢查文件名和路徑是正確的，在我的例子中在angular下我有css數組

src/styles.css

在index.html的文件中，我錯誤地添加了這個

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

style.css在我的例子中不存在，但styles.ccs存在。

第一步: 使用以下詳細信息更新angular.json。

"styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js"
        ]

第二步: 確保index.html DONT有& quotcss & quot和& quotjs & quot導入/引用。

我剛剛遇到了同樣的問題，只要把它們從node_modules文件夾移到assert文件夾，問題就解決了。 例如...

<script  type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/bootstrap/dist/css/bootstrap.min.css" />
<script src="assets/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />

添加& ltbase href = & quot/& quot；& gt 在index.html所有風格中名列前茅；對我有用