Intento en un proyecto de Angular 5 cargar los archivos CSS desde una carpeta de activos. En esta carpeta tengo una plantilla completa que funciona bien, cuando abra el index.html predeterminado en la carpeta.

Pero quiero usarlo en setcard.component.html

Wenn abro la url localhost: 4200 / setcard / 1 y luego aparece el siguiente error:

Se negó a aplicar estilo desde '' porque su tipo MIME ('text / html') no es un tipo MIME de hoja de estilo compatible, y está habilitada la comprobación estricta de MIME. 7: 1 Se negó a aplicar el estilo de 'http: // localhost : 4200 / sedcard / assets / creative-agency / css / owl.carousel.css 'porque su tipo MIME (' text / html ') no es un tipo MIME de hoja de estilo compatible, y la verificación MIME estricta está habilitada.

Aquí está el enlace de cómo lo agrego en el código fuente del archivo src / index.html (en la cabeza):

<!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>

Mi carpeta del proyecto se ve así:

enter image description here

Por ejemplo, cuando cambio la ruta de las imágenes en sedcard / sedcard.component.html, se verán:

  <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 -->

La única diferencia es que las imágenes se llamarán en la carpeta assets desde src / sedcard / sedcard.component.html y no en src / index.html

Pero no sé qué debería cambiar. Gracias por tu ayuda.

3
Miracle Johnson 16 sep. 2018 a las 00:10

3 respuestas

La mejor respuesta

Debe colocar el prefijo assets en todas partes con una sola barra inclinada. P.ej.

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

O

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

La diferencia con lo que hace ahora es que siempre se refiere a la raíz de la aplicación con /; Si no lo especifica, el navegador buscará activos relativamente a la URL actual (que podría ser cualquier cosa porque su enrutador lo cambia continuamente)

4
smnbbrv 15 sep. 2018 a las 21:18

Puede usar una matriz de estilos en angular.json como este.

"styles": [
          "src/assets/creative-agency/css/owl.carousel.css",
          "src/assets/creative-agency/css/owl.theme.default.css",
          .....
        ]
0
Shirantha Madusanka 1 abr. 2020 a las 15:25

La voluntad para ser exactamente correcta, debería ser como:

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

En Angular, la base es siempre la carpeta 'src'. Entonces, cada vez que intentas eliminar un determinado archivo, hay 2 formas:

  1. Sube manualmente usando ../../../folder-x/folder-y/abc.component.css
  2. Utilice la búsqueda de ruta de archivo desde la base absoluta, es decir, src.

enter image description here

En su caso, ya que es más conveniente utilizar un segundo enfoque, ya que 'activos' es una carpeta estándar para mantener los archivos de recursos (css / images / fonts), solo debe comenzar desde la url base.

También './' se usa para referirse al directorio actual (que por defecto comienza desde la carpeta src en Proyectos Angulares) en ES6 / ECMA2015 o TS (que se basa en ES6). Entonces, finalmente, tu camino correcto sería:

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

1
Deadpool 16 sep. 2018 a las 06:42