1

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

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

“输出路径”：“../DatingApp.API/wwwroot”

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

这意味着，基于文件中的路径，在 wwwroot 中构建的所有文件似乎都没有我的 Angular.json 文件需要/预期的相同文件夹结构。

这是构建的内容，您可以看到它是一个包含所有文件的文件夹。我的 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"
}

4

2 回答 2

1

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

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

在编译期间，Webpack 会更改任何文件引用以支持这一点。

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

然后你可以输入http-server DatingApp.API/wwwroot，它应该在 localhost:8080 上启动一个网络服务器。

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

"assets": ["src/assets", "src/favicon.ico",],
于 2019-06-01T19:25:06.780 回答
1

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

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

于 2019-06-01T19:25:44.563 回答