我的 Angular 7 应用程序无法从正确的文件夹加载块

Question

我有一个 ASP.NET MVC 应用程序，前端是 angular-cli (angular 7)。 自从从 6 升级到 7 块的路径是错误的。显然，角度正在尝试从根（/）加载块（使用延迟加载），而它是在 dist 文件夹中生成的。所以它给了我 404 错误，虽然块在 dist 文件夹中

我尝试过使用 ng build --prod --base-href dist 还尝试在我的 ts.config 中更改 baseUrl。 可能在 angular.json 中应该有一些选项来改变这种行为。

这是我的 angular.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "testapp": {
      "root": "dist/",
      "sourceRoot": "NgSrc",
      "projectType": "application",
      "architect": {
        "build": 
        {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "NgSrc/index.html",
            "main": "NgSrc/App/main.ts",
            "tsConfig": "NgSrc/tsconfig.app.json",
            "polyfills": "NgSrc/polyfills.ts",
            "assets": [
              "NgSrc/assets",
              "NgSrc/favicon.ico"
            ],
            "styles": [
              "node_modules/angular2-toaster/toaster.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
              // "node_modules/angular2-toastr/bundles/angular2-toaster.umd.min.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false,
              "fileReplacements": [
                {
                  "replace": "NgSrc/environments/environment.ts",
                  "with": "NgSrc/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "testapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "testapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "testapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "NgSrc/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "NgSrc/polyfills.ts",
            "tsConfig": "NgSrc/tsconfig.spec.json",
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/ng2-toastr/bundles/ng2-toastr.min.js"
            ],
            "styles": [
              "node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
            ],
            "assets": [
              "NgSrc/assets",
              "NgSrc/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "testapp-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "testapp:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "testapp",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}```

Answer 1

对于像我这样一无所知的人，答案就在 angular.json 配置文件中。显然，我们需要了解两个属性 baseHref 和 deployUrl。 baseHref 定义应用程序的基本 URL，deployUrl 是部署文件的 URL。因此，为了从单独的文件夹加载块，我们需要修改 deployUrl。

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref": "/dist/", 
        "deployUrl": "/dist/",            
        "outputPath": "../dist"
        ...
       }
     }
 }