CODEWITHSUNDEEP
angular
user2632918
user2632918

Reputation:

Can't load the CSS-Files from assets-folder in Angular

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.

Upvotes: 6

Views: 11929

Answers (4)

Mahdi Abyaznezhad
Mahdi Abyaznezhad

Reputation: 522

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.

Upvotes: 0

Shirantha Madusanka
Shirantha Madusanka

Reputation: 1695

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",
          .....
        ]

Upvotes: 0

Deadpool
Deadpool

Reputation: 8240

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"

Upvotes: 0

smnbbrv
smnbbrv

Reputation: 24581

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)

Upvotes: 7

Related Questions