Question

我想使用aframe配置作为单独的捆绑软件在<head>标记中导入angular.json。

在angular.json内部，我有要从node_modules导入的脚本：

"scripts": [
    "node_modules/aframe/dist/aframe-v1.0.0.min.js"
]

此文件被捆绑并导入html正文的底部。

<body>
    <app-root></app-root>
    ...
    <script src="scripts.js" ...>
</body>

这是不可取的，因为该库明确要求我导入<head>。

此外，我想将其作为单独的捆绑软件导入：

"scripts": [
  { "input": "node_modules/aframe/dist/aframe-v1.0.0.min.js", "bundleName": "aframe-v1.0.0.min" }
]

Answer 1

您可以像这样将脚本引用添加到angular.json，例如包含jquery库

"scripts": [
   {
    "input": "node_modules/jquery/dist/jquery.min.js",
    "inject": false,
    "bundleName": "jquery"
   }
]

然后将inject设置为false不会将脚本注入index.htm，最后，我们只是为bundleName设置了一个名称，这样脚本将不会与其他脚本文件捆绑在一起，成为独立文件，现在您可以将script标签添加到header标签

更新index.html，并在标头中包含脚本时代

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Portfolio</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="jquery.js"></script> <!-- ? -->
</head>

<body>
  <app-root></app-root>
</body>

</html>

Answer 2

您可以使用一项服务将其注入头部。

此答案可以为您提供帮助：https://stackoverflow.com/a/44016611/8573150

如何将脚本包含在angular.json中

2 个答案: