Question

我正在使用Angular 5。在我的谷歌Chrome控制台中，我收到以下错误：

GET http://localhost:4200/css/app.css net::ERR_ABORTED

zone.js：2935获取http://localhost:4200/css/app.css 404（未找到）

这是我的app.component.html：

        <html><head><style type="text/css">.ng-animate.item:not(.left):not(.right){-webkit-transition:0s ease-in-out left;transition:0s ease-in-out left}</style><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
      <title>TESTING </title>
      <!--<title ng-bind="title">SLM</title>-->
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link href="./css/app.css" rel="stylesheet">



    <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/31/5/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/31/5/util.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/31/5/stats.js"></script></head>
    <body>

    ALBERT


    </body></html>

这是我的目录结构的图像：

enter image description here

我如何错误地引用app.css文件？

以上链接结构应该是什么？

Answer 1

您的路径应参考资产文件夹。例如/assets/css/app.css

Answer 2

这是我的index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>KeysManagement</title>
  <base href="/">
  <link href="/assets/css/app.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">.ng-animate.item:not(.left):not(.right){-webkit-transition:0s ease-in-out left;transition:0s ease-in-out left}</style><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>

  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

这是我的app.component.html：

    <!--The content below is only a placeholder and can be replaced.-->
    begin Albert Lam
    <div id="social2search_container"></div>
    <div class="toolkit" id="1">
        <div class="header-top" style=" padding-left:4%; padding-right:5%;">
        <div class="container-fluid" style="width: 97%;padding-left: 7%;padding-right: 0px;margin-right: 11px;">
            <!-- Logo and Title -->
            <div class="col-md-3">
            <div style="float: right;margin-right: 175px;">
                <div class="logo">
                <div class="logo1">

                    <p class="large">
                    <strong>
                        Welcome to TEST Canada
                    </strong><br>
                    The Global Language of Business
                    </p>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    End Albert Lam

在我的app.component.html中，我试图在“assets / css / app.css”中引用css类“toolkit”？但它似乎无法引用这个css类？

在Angular 5的app.component.html文件中引用名为app.css的css文件时出错

2 个答案: