Question

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

工作区index.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实现这一点。

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

经过几天的努力，我们将不胜感激。

Answer 1

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

显示为：-

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

添加了这一行代码后，您应该重新构建应用程序“ ng build” /“ ng build --prod”，并希望如果一切正确，则应将您的文件添加到index.html。

如何在dist / <appName>中的生成的index.html中注入脚本以索引html文件？

1 个答案: