在运行ng-build命令时如何动态更改index.html文件中的内容
我想在运行ng build命令时更改脚本标记的URL，并使用--prod选项和不带--prod选项的。以下是一个例子。
ng build -prod
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<script src="https://my-site.net/prod.js"></script>
</body>
</html>ng构建
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<script src="https://my-site.net/dev.js"></script>
</body>
</html>我怎样才能做到这一点？
回答 5
Stack Overflow用户
发布于 2018-05-01 09:06:23
对于v6.1.0-beta.2的当前版本，您可以在angular.json文件配置中使用angular.json值，如下面的答案：https://stackoverflow.com/a/57274333/228429 by @massic80 80中所详细说明的那样。
更多信息在这里：https://github.com/angular/angular-cli/issues/4451#issuecomment-395651237
对于v6.1.0-beta.2之前的旧版本，角CLI不提供任何这样的特性。但是，您可以在运行时使用环境变量动态注入适当的脚本。
例：
main.ts
import { env } from './environments/environment';
if (env.production) {
const script = document.createElement('script');
script.src = https://my-site.net/prod.js
document.head.appendChild(script);
} else {
const script = document.createElement('script');
script.src = https://my-site.net/dev.js
document.head.appendChild(script);
}在这里阅读更多信息：https://github.com/angular/angular-cli/issues/4451#issuecomment-285329985
Stack Overflow用户
发布于 2019-07-30 14:43:08
在angular.json中，您可以配置要使用的索引文件(我使用的是角8)：
"projects": {
"projectName": {
"architect": {
"build": {
"options": {
"index": "src/index.html", // this is the default location (also for ng serve)
"configurations": {
"production": {
"index": "index-prod.html" // this is the prod version (you can also link it to /prod/index.html or whatever: it will be placed in the dist root folder with the provided name)
},
"development": {
"index": "index-whatever.html" // this is the version for ng build --configuration=development`
}
}
}
}/*, UPDATED: THIS DOESN'T WORK
"serve": {
"index": "dev/index.html" // file to be used in ng serve
}*/
}
}
}这些"index"中没有一个是强制性的，除了第一个
Sidenote:这就是我刚才尝试过的尝试、构建和ng serve。我在任何文档中都没有找到它。
去看看，让我知道。
===========
更新10月19日:我注意到上面报告的配置仍然使用src/index.html，也用于serve on "@angular/cli": "^8.3.6", "@angular/compiler-cli": "^8.2.8"。看起来serve本身没有覆盖。我的问题是：是否应该总是继承基本的？
想多挖一点，我发现了这个：https://github.com/angular/angular-cli/issues/14599
有一个示例说明了它应该如何与新的CLI一起工作，但试图替换
"development": {
index": "index-whatever.html"
}使用一个
"development": {
index": {
"input": "index-whatever.html"
}
}建筑，它给了我一个Schema validation failed with the following errors: Data path ".index" should be string.
===========
更新4月10日：
我只是注意到，在10月份的更新中，我漏掉了最新代码片段中的一段引号。我不记得它是直接从我的代码中复制出来的--因此所报告的错误可能与此有关--或者当我试图重写代码时，它是一个错误类型。只要有时间我就再查一遍
Stack Overflow用户
发布于 2019-09-15 17:29:19
如果您想在本地服务时坚持使用标准src/index.html，希望在每个生产/测试配置中都有专门的index.html文件(就像在我的例子中一样，不同的Google代码块已经被应用了)，那么只需这样做：
- 创建单独的目录，每个目录保存一个专用版本的
index.html。例如：
src/prod/index.html src/test/index.html
- 让
angular.json了解它们，每种配置：
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"index": "src/index/prod/index.html",
// other stuff
},
"test": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}
],
"index": "src/index/test/index.html",
// other stuff
}
// other stuff
}https://stackoverflow.com/questions/50113794
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号