無法使用index.html訪問node_modules中的Js文件

Question

我正在使用模板 ，到目前為止已經完成了什么：

1. 在模具中創建組件
2. 將其發布到npm
3. 創建一個角度項目
4. 將模板組件安裝到角度項目
5. 將component.js文件添加到index.html文件

當我添加

<script src="/node_modules/stencil-poc-ng/dist/mycomponent.js"></script>

然后瀏覽器控制台出現以下錯誤：

GET http：// localhost：4200 / node_modules / stencil-poc-ng / dist / mycomponent.js 404（未找到）localhost /：1拒絕從' http：// localhost：4200 / node_modules / stencil-poc執行腳本-ng / dist / mycomponent.js ，因為其MIME類型（'text / html'）不可執行，並且啟用了嚴格的MIME類型檢查。

Answer 1

您正在構建Angular應用，在瀏覽器上運行該應用時將無法訪問計算機上的本地路徑。 Angular ng serve是：

• 將所有代碼和依賴項捆綁在HTML文件，CSS文件和一堆JS文件中
• 將所有這些文件保存在內存（RAM）中
• 啟動Web服務器來提供這些文件

僅提供“內存中”文件，因此您的http://localhost:4200/node_modules/stencil-poc-ng/dist/mycomponent.js將始終無效

您只剩下兩個選擇：

• 導入您的JS文件，使其包含在Angular構建中
• 使用<script src='https://unpkg.com/stencil-poc-ng@0.0.1/dist/mycomponent.js'></script>

Answer 2

在Angular項目上有兩種使用模版組件的方法，它們是：

1. 添加您的js文件的遠程路徑，例如： https ://unpkg.com/ {module-name} @ {module-version} / dist / {relevant-js-

2. 將您的js文件添加到Assets文件夾，原因是angular找到了angular.json或angular.cli.json文件的資產數組中提到的資產。

感謝@YoukouleleY提出了第一個解決方案，並給出了我無法訪問第二個解決方案的正確原因