-2

In index.html i have mentioned links to apply styles and i am using primeng modules for angular 6. Here styles are not applying hence getting errors like...

The resource from “http://localhost:4200/fonts/font-awesome-4.7.0/css/font-awesome.min.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Like wise i am getting errors for all stylesheets that i have mentioned in index.html.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Audit</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--===============================================================================================-->
  <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="css/util.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">

  <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
  <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
  <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
  <!--===============================================================================================-->
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <!-- <link rel="stylesheet" type="text/css" href="/home/pearl/Downloads/DASHBOARD (1)/examples/css/style1.css" -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .bs-example {
      margin: 20px;
    }
  </style>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <meta name="generator" content="LibreOffice 6.1.3.2 (Linux)" />
  <meta name="author" content="ragaz" />
  <meta name="created" content="2015-08-28T16:56:54" />
  <meta name="changedby" content="ragaz" />
  <meta name="changed" content="2019-05-01T01:07:59" />
  <meta name="AppVersion" content="16.0300" />
  <meta name="Company" content="Smartsheet" />
  <meta name="DocSecurity" content="0" />
  <meta name="HyperlinksChanged" content="false" />
  <meta name="LinksUpToDate" content="false" />
  <meta name="ScaleCrop" content="false" />
  <meta name="ShareDoc" content="false" />

  <style type="text/css">
    body,
    div,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    th,
    td,
    p {
      font-family: "Calibri";
      font-size: small
    }

    a.comment-indicator:hover+comment {
      background: #ffd;
      position: absolute;
      display: block;
      border: 1px solid black;
      padding: 0.5em;
    }

    a.comment-indicator {
      background: red;
      display: inline-block;
      border: 1px solid black;
      width: 0.5em;
      height: 0.5em;
    }

    comment {
      display: none;
    }
  </style>

  <meta charset="utf-8">

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>





</head>

<body>
  <app-root></app-root>
</body>

</html>
Ru Chern Chong
  • 3,692
  • 13
  • 33
  • 43
Saisiva A
  • 595
  • 6
  • 24
  • try refreshing cache, once i faced something similar and it worked. – Krishanu Nov 23 '19 at 06:17
  • still styles are not applying. Anything from you.@Krishanu – Saisiva A Nov 24 '19 at 06:46
  • This might help:- https://stackoverflow.com/questions/22631158/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html-see – Krishanu Nov 24 '19 at 06:52
  • yes, i have gone through that link, but there is no certain answer from both about mime type. I have placed mime type is **text/css** only, but in browser its showing **text/html**. @Krishanu – Saisiva A Nov 24 '19 at 07:13

1 Answers1

6

I have found solution as fallows

There are three places mostly we can use to place stylesheet to execute required styles.


1)**index.html** by specifying <link rel="" type="", styelesheet="">
2)Global file **style.css** by importing or adding manually.
3)**component.html** in angular

so here, my side primeng modules are installed but styles are unable to apply. Simply i imported required css files in global file style.css. This saved my day..

@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/nova-light/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~font-awesome/css/font-awesome.css";
Saisiva A
  • 595
  • 6
  • 24