web-dev-qa-db-fra.com

Erreur de type Mime lors de l’ajout d’un fichier CSS à Angular

J'essaie de construire un site statique en utilisant Angular. Ce que je veux, c'est que des fichiers globaux css/js/image soient ajoutés au fichier index.html

Ceci est mon code dans index.html

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

Mon dossier css de même niveau que le dossier index.html fichier

Je reçois cette erreur pour chaque feuille de style que j'ai ajoutée (de ng serve with chrome)

A refusé d'appliquer le style à partir de ' http: // localhost: 4200/css/layers.css ' car son type MIME ('text/html') n'est pas un type MIME de feuille de style pris en charge et une vérification MIME stricte est autorisé.

J'ai essayé d'ajouter ça aussi

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

Comment puis-je réparer cela?

Ma angular configuration angulaire est

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

Solution 1 (avec Bootstrap installé)

Tout ce que vous devez faire c'est:

1) Allez à .angular-cli.json dans le répertoire racine de votre angular app.

2) Modifier le tableau de styles pour inclure bootstrap avant styles.css

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

Remarque: le chemin d'accès à bootstrap est relatif à /src/index.html. C'est pourquoi vous avez besoin de "../" avant node_modules.

3) Quittez la session actuelle de ng serve et redémarrez-la.

Voici un Awesome tutoral

Solution 2 (avec Bootstrap référencé)

Tout ce dont vous avez besoin est:

1) Allez à styles.css dans le répertoire racine de votre angular app.

2) Ajoutez cette ligne en haut:

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

Voici Documents angulaires

9
shireef khatab

@ sameera207 Les réponses dans les commentaires sont correctes, le chemin relatif doit fonctionner, le problème est le même pour moi et les réponses aux commentaires fonctionnent pour moi. J'ai essayé de reproduire votre erreur, j'ai créé un dossier css au niveau de index.html et ajouté un fichier css, puis ajouté un chemin d'accès dans un tableau de styles.

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

then serveur redémarré, je veux dire exécuté ng serve encore et son travail. Assurez-vous de l'avoir fait et serveur restared et si le problème persiste, merci de me le faire savoir, je serais ravi de vous aider. Merci.

8
sajal rajabhoj

Pour quelqu'un qui fera face au même problème.

La raison habituelle de ce message d'erreur est que, lorsque le navigateur tente de charger cette ressource, le serveur renvoie une page HTML à la place, par exemple si votre routeur intercepte des chemins inconnus et affiche une page par défaut sans 404 error. Bien sûr, cela signifie que le chemin ne renvoie pas le résultat attendu CSS file / image / icon / peu importe ... ref à partir d'ici

Supposons que nous avons Angular 6 projet qui a une structure de fichier comme celle-ci

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

supposons que nous devons placer le dossier theming (qui en contient) directement dans le dossier src.

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

si nous essayions d'accéder à ce fichier de thème comme ceci.

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

Cela va jeter une erreur

A refusé d'appliquer le style à partir de ' http: // localhost: 4200/vendor/theme-dark.css ' car son type MIME ('text/html') n'est pas un type MIME de feuille de style pris en charge, et strict La vérification MIME est activée.

Si nous passons cette URL dans le navigateur, le fichier css en clair ne sera pas donné car le chemin est incorrect.

Solution

Donc, ce que vous devez faire est de trouver le bon chemin. ( nous pouvons découvrir par le passé que url dans le parcours et voir ce qui sera renvoyé)

En cas de doute, mettre ../src/ référence corrigera l'erreur

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

Remarque: Le chemin exact et la configuration du routeur dépendent de la manière dont vous avez configuré votre projet et de la structure que vous utilisez.

5
Ram Chandra Neupane

Si vous avez déjà le styles.css dans angularcli.json ou angular.json, vous n'en avez pas besoin dans index.html. La cli injectera le contenu automatiquement. Supprimez donc cette ligne du fichier index.html et tout devrait fonctionner.

4
arun kumar