1

我正在玩stencil 我到目前为止所做的事情：

  1. 在模板中创建了一个组件
  2. 发布到 npm
  3. 创建了一个角度项目
  4. 将模板组件安装到 Angular 项目中
  5. 在 index.html 文件中添加了 component.js 文件

当我添加

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

然后浏览器控制台给出以下错误：

GET http://localhost:4200/node_modules/stencil-poc-ng/dist/mycomponent.js 404 (Not Found) localhost/:1 Refused to execute script from ' http://localhost:4200/node_modules/stencil-poc -ng/dist/mycomponent.js ' 因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。

4

2 回答 2

2

您正在构建一个 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>
于 2018-06-27T12:22:17.273 回答
0

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

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

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

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

于 2018-06-28T05:48:56.827 回答