首页 文章

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

提问于
浏览 次
0

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

  • 在模板中创建了一个组件

  • 将它发布到npm

  • 创建了一个角度项目

  • 将角色项目组件安装到角度项目中

  • 将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 ' because its MIME type (' text / html'中的脚本）不可执行，并且启用了严格的MIME类型检查 .

angular stencils

2 回答

  • 1

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

    • 将所有代码和依赖项捆绑在HTML文件，CSS文件和一堆JS文件中

    • 将所有这些文件保存在内存（RAM）中

    • 启动Web服务器以提供这些文件

    仅提供了"in memory"文件，那么 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>

    回复于
  • 0

    有两种方法可以在Angular项目中使用模板组件，它们在这里：

    • 添加js文件的远程路径，例如：https://unpkg.com/ @ / dist / {relevant-js-

    • 将您的js文件添加到assets文件夹，reason is angular查找angular.json或angular.cli.json文件的assets数组中提到的资产 .

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

    回复于

相关问题