我的 dist 文件夹在 Angular 构建中生成这样的原因是什么？

Question

我正在参加一门课程，要求我使用 AWS S3 存储桶从我之前作业中的 Angular 应用程序上传静态站点。我遇到了一个问题，我的

dist

文件夹在根目录中没有

index.html

（我需要用于 S3 静态站点托管），而且它还有两个子文件夹：

/browser

和

/server

。根据我的理解，

dist

文件夹应该包含 index.html 以及

assets

文件夹和其他几个文件。为什么我的生成与我在网上看到的默认生成的不同？

这是我的 angular.json 文件，以及

dist

文件夹的文件结构图像：

angular.json

文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myFlix-Angular-client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": false
        },
        "@schematics/angular:directive": {
          "standalone": false
        },
        "@schematics/angular:pipe": {
          "standalone": false
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/my-flix-angular-client",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "myFlix-Angular-client:build:production"
            },
            "development": {
              "buildTarget": "myFlix-Angular-client:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "myFlix-Angular-client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "8b2d4922-1479-470a-8e55-a41bcb2b5930"
  }
}

Answer 1

看起来您正在使用服务器端渲染（SSR），其中一些角度 UI 在服务器中生成并传递到浏览器。

对于上传静态构建玩具 AWS S3 的用例，SSR 将不起作用，因为 S3 仅用于存储文件。

从 cli 创建 Angular 项目时，请尝试以下选项

? What name would you like to use for the new workspace and initial project? test
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? **No**