Question

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

ng build -c production

我的第一个想法是超出了“预算大小”，但是在增加限额之后，什么都没有改变。对于这个原因，我没有太多的想法。我从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/**"
  ]
}

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

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 Universal-生产构建后在./dist中没有index.html

1 个答案: