Question

当我使用--prod 选项运行 ng build 命令时，我想更改脚本标记的网址，而没有 - 更改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 build

<!DOCTYPE html> <html> <head> <title>Home Page</title> </head> <body> <script src="https://my-site.net/dev.js"></script> </body> </html>

我怎样才能做到这一点？

Answer 1

在angular.json中，您可以配置要使用的索引文件（我正在使用Angular 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
            }*/
        }
    }
}

AFAIK除第一个{p>

旁注：这就是我刚刚尝试过的一些尝试，构建和"index"。我没有在任何文档中找到它。

检查一下，让我知道。

===========

更新：我注意到，上面报告的配置仍将ng serve上的src/index.html使用serve。看来"@angular/cli": "^8.3.6", "@angular/compiler-cli": "^8.2.8"本身没有替代。我的问题是： serve应该始终继承基本的serve配置吗？

尝试进一步挖掘，我发现了这一点：https://github.com/angular/angular-cli/issues/14599

有一个示例说明如何与新的CLI一起使用，但是尝试替换

index

带有

"development": {
    index": "index-whatever.html"
}

建造，它给了我一个 "development": { index": { "input": "index-whatever.html" } }

Answer 2

Angular 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

Answer 3

使用Angular 8和9，您可以添加自定义Webpack构建器： https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack

npm install @angular-builders/custom-webpack

，然后按照此页面上的说明进行操作： https://github.com/just-jeb/angular-builders/blob/master/packages/custom-webpack/README.md

Answer 4

这不是很漂亮，但是它可以工作，我只有2个索引文件，我在构建之前就复制了主要文件

"build:en": "copy src\\index.en.html src\\index.html && ng build --configuration=production-en",
"build:fr": "copy src\\index.fr.html src\\index.html && ng build --configuration=production-fr",

Answer 5

如果您希望在使用本地标准服务时坚持使用标准src/index.html，而又希望每个生产/测试配置都拥有专门的index.html文件（就像我的情况那样，已经使用了不同的Google Analytics（分析）代码块）进行操作）简单地做到这一点：

创建单独的目录，每个目录包含专用版本的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
}

angular - 如何在运行ng-build命令时动态更改index.html文件中的内容

5 个答案: