6

I try in a Angular 5 Project to load the CSS-Files from a assets-folder. In this folder I have a complete Template which works fine, when I will open the default index.html in the folder.

But I wanna use it in the setcard.component.html

Wenn I open the url localhost:4200/setcard/1 then I will get to following error:

Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 7:1 Refused to apply style from 'http://localhost:4200/sedcard/assets/creative-agency/css/owl.carousel.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Here is the link how I add it in the sourcecode of the file src/index.html ( in the head ):

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    -->

    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CVarela+Round" rel="stylesheet">

    <!-- Owl Carousel -->
    <link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/owl.carousel.css" />
    <link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/owl.theme.default.css" />

    <!-- Magnific Popup -->
    <link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/magnific-popup.css" />

    <!-- Font Awesome Icon -->
    <link rel="stylesheet" href="./assets/creative-agency/css/font-awesome.min.css">

    <!-- Custom stlylesheet -->
    <link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/style.css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <title>hFinder</title>
    <base href="/">
</head>

<body>

<app-root></app-root>

</body>
</html>

My Folder from the project looks like this:

enter image description here

For example, when I change the path for the images in the sedcard/sedcard.component.html then they will be viewed:

  <div class="col-md-6">
    <div id="about-slider" class="owl-carousel owl-theme">
      <img class="img-responsive" src="assets/creative-agency/img/about1.jpg" alt="">
      <img class="img-responsive" src="assets/creative-agency/img/about2.jpg" alt="">
      <img class="img-responsive" src="assets/creative-agency/img/about1.jpg" alt="">
      <img class="img-responsive" src="assets/creative-agency/img/about2.jpg" alt="">
    </div>
  </div>
  <!-- /About slider -->

The only different is, that the images will be called in the assets-folder from the src/sedcard/sedcard.component.html and not in the src/index.html

But I don't know what I should change. Thanks for your help.

Improve this question
1

4 Answers 4

Reset to default
7

You need to prefix assets everywhere with a single slash. E.g.

<link type="text/css" rel="stylesheet" href="/assets/creative-agency/css/magnific-popup.css" />

or 

<img class="img-responsive" src="/assets/creative-agency/img/about1.jpg" alt="">

The difference to what you do now is that you always refer to the application root with /; if you don't specify it, the browser will look for assets relatively to current URL (which could be anything because your router continuously changes it)

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I had the same problem trying to include css files from assets folder. Network tab in the browser dev tool gives information whether some path is resolved or not. If the path is wrong you can see what does not match with the intended working path and fix it.
0

Will to be precisely correct, it should be like: 

 <img class="img-responsive" src="./assets/creative-agency/img/about1.jpg" alt="">

In Angular, the base is always the 'src' folder. So, whenever you try to path out a certain file, there are 2 ways:

  1. Manually go up using ../../../folder-x/folder-y/abc.component.css
  2. Use file path-finding from absolute-base, ie, src.

enter image description here

In your case as it is more convenient to use second approach as 'assets' is a standard folder for keeping the resource (css/images/fonts) files, you need to just start from the base url.

Also './' is used to refer to current directory (which by default starts from src folder in Angular Projects) in ES6/ECMA2015 or TS(which is based on ES6). So finally your correct path would be:

"./assets/creative-agency/img/about1.jpg"

Improve this answer

Comments

0

You can use styles array in angular.json like this.

"styles": [
          "src/assets/creative-agency/css/owl.carousel.css",
          "src/assets/creative-agency/css/owl.theme.default.css",
          .....
        ]
Improve this answer

Comments

0

First You have to remove this line from the src/index.html file.

 <link type="text/css" rel="stylesheet" href="./assets/creative-agency/css/owl.carousel.css" />

instead, add these codes in angular.json

"styles": [
          "src/assets/creative-agency/css/owl.carousel.css",
          "src/assets/creative-agency/css/owl.theme.default.css",
          
        ]

I hope it works for you.

Improve this answer

1 Comment

this answer has already been given. you could improve the given answer by editing it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.