1

我有一个索引 html 文件，我需要在生产/登台环境中注入一些基于配置的脚本。

工作区索引.html

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

通过 ng build 在 dist/my-app 中生成 index.html

<body>
  <app-root></app-root>
  <script src="runtime-es5.js" nomodule defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="styles-es5.js" nomodule defer></script>  
  <script src="vendor-es5.js" nomodule defer></script> 
  <script src="main-es5.js" nomodule defer></script>
</body>

我的要求：

<body>
  <app-root></app-root>
  <script src="script-staging.js"></script>
  <script src="runtime-es5.js" nomodule defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="styles-es5.js" nomodule defer></script>  
  <script src="vendor-es5.js" nomodule defer></script> 
  <script src="main-es5.js" nomodule defer></script>
</body>

我正在使用带有 CLI 的 Angular 8 + Webpack。我已经包含了来自 angular.json 的 custom-webpack.configuration.js。我正在尝试使用 HTMLWebpackPlugin 来实现这一点。

被告知动态脚本加载是可选的，这意味着我将或不会在生成的 index.html 中注入该 script.js，这将在构建时决定。所以在生成的 html 中注入脚本必须在构建时完成，我应该通过 webpack 的插件来完成。

任何帮助将不胜感激，挣扎了几天。

4

1 回答 1

0

您可以在应用程序对象的脚本数组中的 angular.json 中指向 ./scr/script-staging.js 的完整路径。

这里显示： -

"styles": [
  "styles.scss"
],
// like this
"scripts": [
  "./src/script-staging.js"
]

添加这行代码后，您应该再次构建您的应用程序“ng build”/“ng build --prod”，希望如果一切正常，那么它应该将您的文件添加到 index.html。

于 2020-02-05T08:01:59.153 回答