node_modules 中的 Js 文件无法访问 index.html

Js file inside node_modules is not accessible to index.html

我在玩stencil 到目前为止我做了什么：

  1. 在模板中创建了一个组件
  2. 发布到 npm
  3. 创建了一个 angular 项目
  4. 已将模板组件安装到 angular 项目
  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 类型检查。

您正在构建一个 Angular 应用程序，当您在浏览器上 运行 时，它将无法访问您计算机上的本地路径。 Angular ng serve 的作用：

  • 将所有代码和依赖项捆绑在一个 HTML 文件、一个 CSS 文件和一堆 JS 文件中
  • 将所有这些文件保存在内存 (RAM) 中
  • 启动网络服务器来提供这些文件

只提供"in memory"个文件，那么你的http://localhost:4200/node_modules/stencil-poc-ng/dist/mycomponent.js将永远无效

您只剩下两个选择：

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

在 Angular 项目中有两种使用模板组件的方法，它们是：

  1. 添加你的js文件的远程路径，例如： https://unpkg.com/{模块名称}@{模块版本}/dist/{relevant-js-

  2. 将你的js文件添加到assets文件夹，原因是angular找到了angular.json或angular.cli.json文件的assets数组中提到的assets。

感谢@YoukouleleY 建议第一个解决方案并给出我无法访问第二个解决方案的正确理由