Angular 6 - 根据环境提供不同的索引文件

Question

我有一个本地环境和一个生产环境.在index.html中,我添加或删除脚本文件,具体取决于环境是本地环境还是生产环境.

我想要一个简单的方法来处理这个问题.里面angular.json有一个file_replacement配置选项.这适用于切换environment.ts到a environment.prod.ts但它似乎不适用于将index.html文件替换为a index.prod.html.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "demo": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "polyfills": "src/polyfills.ts",
                        "assets": [
                            "src/assets",
                            "src/favicon.ico",
                            {
                                "glob": "**/*",
                                "input": "../node_modules/font-awesome/fonts",
                                "output": "/assets/"
                            }
                        ],
                        "styles": [
                            "src/styles/style.scss",
                            "src/theme.scss",
                            "node_modules/font-awesome/css/font-awesome.min.css"
                        ],
                        "scripts": [
                            "node_modules/hammerjs/hammer.min.js",
                            "node_modules/auth0-js/build/auth0.min.js",
                            "node_modules/moment/min/moment.min.js",
                            "node_modules/ua-parser-js/dist/ua-parser.min.js",
                            "node_modules/d3/dist/d3.min.js",
                            "node_modules/wordcloud/src/wordcloud2.js",
                            "node_modules/chart.js/dist/Chart.bundle.min.js",
                            "node_modules/progressbar.js/dist/progressbar.min.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                },
                                {
                                    "replace": "src/index.html",
                                    "with": "src/index.prod.html"
                                }
                            ]
                        },
                        "test": {
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.test.ts"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "demo:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "demo:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "demo:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "karmaConfig": "./karma.conf.js",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "scripts": [
                            "node_modules/hammerjs/hammer.min.js",
                            "node_modules/auth0-js/build/auth0.min.js",
                            "node_modules/moment/min/moment.min.js",
                            "node_modules/ua-parser-js/dist/ua-parser.min.js",
                            "node_modules/d3/dist/d3.min.js",
                            "node_modules/wordcloud/src/wordcloud2.js",
                            "node_modules/chart.js/dist/Chart.bundle.min.js",
                            "node_modules/progressbar.js/dist/progressbar.min.js"
                        ],
                        "styles": [
                            "src/styles/style.scss",
                            "src/theme.scss",
                            "node_modules/font-awesome/css/font-awesome.min.css"
                        ],
                        "assets": [
                            "src/assets",
                            "src/favicon.ico",
                            {
                                "glob": "**/*",
                                "input": "../node_modules/font-awesome/fonts",
                                "output": "/assets/"
                            }
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        },
        "demo-e2e": {
            "root": "",
            "sourceRoot": "",
            "projectType": "application",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "./protractor.conf.js",
                        "devServerTarget": "demo:serve"
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "e2e/tsconfig.e2e.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "demo",
    "schematics": {
        "@schematics/angular:component": {
            "prefix": "app",
            "styleext": "scss"
        },
        "@schematics/angular:directive": {
            "prefix": "app"
        }
    }
}

Answer 1

版本支持此功能@angular/cli@6.1.0-beta.2.