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

回答

相關問題