Angular 8 通用 - 生产构建后 ./dist 中没有 index.html

Question

在我的 SSR 应用程序中，我将 Angular 7.0 升级到 8.2.5。除了生产构建，一切看起来都很好。主要问题是在 ./dist/browser index.html 中丢失了。我正在运行构建：

ng build -c production

我的第一个想法是 "size budgets" 已经超过，但在增加限制后，没有任何变化。对于应该在哪里寻找原因，我没有太多想法。我从 angular.json 开始，但我认为那里一切都很好：

"build": {
          "builder": "udk:udk-builder",
          "options": {
            "browserTarget": "app:browser",
            "serverTarget": "app:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:browser:production",
              "serverTarget": "app:server:production",
              "verbose": true
            }
          }
        },
        "browser": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ],
            "styles": [
              "src/styles/critical-styles.scss",
              {
                "input": "src/styles/styles.scss",
                "bundleName": "main-styles",
                "lazy": true
              },
              {
                "input": "src/styles/font-styles.scss",
                "bundleName": "font-styles",
                "lazy": true
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": false,
              "namedChunks": true,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": true,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "20mb"
                }
              ]         
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/app/server",
            "main": "src/main.server.ts",
            "tsConfig": "tsconfig.server.json",
            "sourceMap": {
              "scripts": true,
              "styles": false
            }
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "media"
            }
          }
        },

tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app/browser"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "**/*.spec.ts",
    "**/*.stories.ts",
    "e2e/**",
    "src/api/**",
    "src/app/app.server.module.ts",
    "src/server.ts",
    "src/stories/**"
  ]
}

我在构建输出中没有发现任何错误。 index.html 在 dist 文件夹中丢失的原因可能是什么？

Answer 1

问题出在 udk:udk-builder 所以现在我使用官方生成器代替这个：@angular-devkit/build-angular:browser

我在 angular.json 中添加了浏览器和服务器的单独配置：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "defaultProject": "app",
  "projects": {
    "app": {      
      "architect": {        
        ...
        "browser": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/app/server",
            "main": "src/server.ts",
            "tsConfig": "tsconfig.server.json",
            "sourceMap": {
              "scripts": true,
              "styles": false
            }
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "media"
            },
            "spa": {
              "fileReplacements": [
                {
                  "replace": "src/app/app-routes.ts",
                  "with": "src/app/app-routes.spa.ts"
                }
              ]
            }
          }
        }  
        ...    
    }
  }
}

然后为了更快地创建生产版本，我们可以安装 npm-run-all 并添加 package.json:

  "scripts": {
    ...
    "start": "node ./dist/app/server/main.js",
    "build:browser": "ng run app:browser -c production",
    "build:server": "ng run app:server -c production",
    "build:prod": "npm-run-all build:browser build:server",
    ...
  },

npm run build:prod 应该在 ./dist

中正确构建浏览器和服务器

Angular 8 通用 - 生产构建后 ./dist 中没有 index.html

Angular 8 Universal - No index.html in ./dist after production build

angular-cli

angular-universal

angular