无法 运行 Angular 站点，因为我的 angular.json 文件路径与 ng build 创建的不匹配

Question

Angular 的新手，在 运行 ng 构建之后，我看到它在我定义的文件夹中创建的所有文件。

在我正在构建的 Angular.json 文件中

"outputPath": "../DatingApp.API/wwwroot"

但是 Angular.json 文件的其余部分似乎与构建的文件不匹配。

意思是，根据文件中的路径，在 wwwroot 中构建的所有文件似乎都没有与我的 Angular.json 文件 needs/expects 相同的文件夹结构。

这是构建的内容，您可以看到它是一个包含所有文件的文件夹。我的 angular.json 文件正在寻找子文件夹中的文件，例如。 "src/..."

为什么会出现不匹配？解决此问题的正确方法是什么？我是否应该修改 Angular.json 文件中的所有路径以指向正确的构建文件？或者是否存在其他版本不匹配或可以通过更新 npm 包来纠正的问题。

Angular.json 文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "DataingApp-SPA": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../DatingApp.API/wwwroot",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/alertifyjs/build/alertify.min.js"
            ],
            "es5BrowserSupport": true

          },
          "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"
              }]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "DataingApp-SPA:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "DataingApp-SPA:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "DataingApp-SPA:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "DataingApp-SPA-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "DataingApp-SPA:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "DataingApp-SPA:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "DataingApp-SPA"
}

Answer 1

您的问题一定与您在网络服务器上托管文件的方式有关，因为构建不会失败。

您的应用程序的目录结构与最终构建无关，最终构建会将所有内容存储在一个文件夹中*。

在编译期间，Webpack 会更改任何文件引用以支持此功能。

尝试使用 ng build 构建您的应用程序并使用 http-server 之类的东西（您可以使用 npm install http-server -g 全局安装）为它提供服务。

然后您只需键入 http-server DatingApp.API/wwwroot，它就会在 localhost:8080 上启动网络服务器。

*任何例外都可以在 assets 下的 angular.json 文件中定义，其中列出了添加到最终构建文件夹的文件夹和文件。默认情况下它看起来像

"assets": ["src/assets", "src/favicon.ico",],

Answer 2

这些路径是指开发过程中的文件。当您构建代码时，编译器会发挥很多作用。您在 dist 目录中的输出应该看起来像您在图片中显示的那样。

不用担心不匹配，这就是应该的样子。不要尝试在本地打开文件，因为它需要网络服务器才能正常工作。如果您想 运行 您的应用程序处于生产模式，只需使用 ng serve --prod。