Angular 2.资源无法加载到html页面

我正在构建一个Angular 2应用程序。当我在ng-serve的应用程序中，将css和image档案加载，出现以下错误。 Angular 2.资源无法加载到html页面

我已经将jss链接上方的css链接移到了上面，但没有成功。
我也添加了文件的完整路径，而不是现有的。

以下是项目结构。

为index.html的HTML代码

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

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 


    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script src="resources/js/semantic.min.js"></script> 

    <link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" /> 
    <link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" /> 

</head> 
<body> 
    <app-root>Loading...</app-root> 
</body> 
</html>

我与Angularjs跑进类似的问题之前，我的修复是，不断运动和变化的联系，直到它的工作。有人可以解释为什么会发生这种情况，以及在未来避免这种情况的最佳做法是什么？

来源

2017-09-25 Sean McGrath

请确保路径在角度cli配置中是正确的 –

看起来您的dev-server不希望为您提供资源。设置有误...... – dhilt

您必须将您的资源添加到angular-cli.json中的资产字段。这使得他们可以当你两个NG做ng serve

"assets": [ 
    "resources" 
]

这将你的资源目录复制到资产的文件夹（在构建）建立&纳克服务。现在更换resources与assets在你的路

<script src="assets/js/semantic.min.js"></script> 

<link rel="stylesheet" type="text/css" class="ui" href="assets/css/semantic.css" /> 
<link rel="stylesheet" type="text/css" class="ui" href="assets/css/main.css" />

作为替代，我将这些文件添加到角cli.json而不是index.html中加载它们的

"styles": [ 
    "resources/css/semantic.css", 
    "resources/css/main.css" 
], 
"scripts": [ 
    "resources/js/semantic.min.js" 
]

我喜欢这一点，因为这些文件将通过webpack捆绑在一起，节省一些http请求。另外我相信，当涉及到依赖关系时，json文件比index.html更容易阅读。

来源

2017-09-25 17:25:23 LLai

完美运行，感谢您的快速回复。 –

Angular 2.资源无法加载到html页面

回答

相关问题