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

Posted 2023-03-15

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

【英文标题】：Can't run Angular site because my angular.json file paths mismatch with what ng build creates

【发布时间】：2019-10-17 23:07:23

【问题描述】：

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"

【问题讨论】：

Angular.json 文件需要/期望基于文件中的路径是什么意思。？您的实际问题是什么？

我的意思是 "index": "src/index.html" -> src 文件夹不存在！该构建没有创建任何子文件夹。所以现在连接到 localhost 时出现错误说找不到（例如 favicon.ico、pollyfills.js 等）

Chrome 控制台的第一个错误是 GET localhost:5000/runtime.js net::ERR_ABORTED 404 (Not Found)

【参考方案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",],

【参考方案2】：

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

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

【讨论】：

我想我只需要重新启动“dotnet watch run”命令，因为现在我可以在 localhost:5000 上看到该站点。我猜 krestal 服务器在哪里寻找构建副本而不是内存中的调试副本？