为 v13 替换 angular.json 中的 'deployUrl' 的最佳方法是什么？

Question

我目前正在将我的应用程序从 v12 升级到 v13，并注意到弹出此警告：

Option "deployUrl" is deprecated: Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.

深入研究后，'baseHref' 或 APP_BASE_REF 选项的 none 确实适用于我的设置，所以我想知道我是否使用不正确或如果没有好的方法去替换它

这是来自 angular.json 的应用程序配置片段：

    "dashboard": {
      "projectType": "application",
      "root": "apps/dashboard",
      "sourceRoot": "apps/dashboard/src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [],
            "outputPath": "../dist/dashboard/",
            "deployUrl": "/dist/dashboard/",
            "index": "apps/dashboard/src/index.html",
            "main": "apps/dashboard/src/main.ts",
            "tsConfig": "apps/dashboard/tsconfig.app.json",
            "polyfills": "apps/dashboard/src/polyfills.ts",
            "styles": [
              "apps/dashboard/src/styles.scss"
            ],
            "scripts": [],
            "stylePreprocessorOptions": {
              "includePaths": [
                "libs/assets/styles"
              ]
            },
            "aot": false,
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "aot": true,
              "buildOptimizer": true,
              "extractLicenses": true,
              "fileReplacements": [
                {
                  "replace": "apps/dashboard/src/environments/environment.ts",
                  "with": "apps/dashboard/src/environments/environment.prod.ts"
                }
              ],
              "namedChunks": false,
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "vendorChunk": false
            },
            "es5": {
              "tsConfig": "apps/dashboard/tsconfig.es5.json"
            }
          },
          "defaultConfiguration": ""
        }
      }
    }

路由文件片段：

export const DashboardRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: '/dashboard' },
    {
        path: 'dashboard',
        data: {
            label: 'Dashboard',
            appBase: true
        },
        children: [
            // this is a child so we can load the component in same router-outlet
            {
                path: '',
                loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
                data: {
                    authorizedRoles: ['member'],
                }
            },
            // ...other children
        ]
    }
]

我试过将 deployUrl 更改为 baseHref，这有点奏效 - 它将主页从 localhost/dashboard 更改为 localhost/dist/dashboard/dashboard（显然不正确），并且只是放置一个空字符串或“ /” 没有正确加载应用程序（查看 dist/ vs dist/dashboard 就像它应该的那样）

值得注意的是，我的 index.html 确实使用了 <base href="/" /> 并且 APP_BASE_HREF 没有在应用程序模块提供程序中被覆盖

Answer 1

最终找到了可以替换它的东西：

在 angular.json
在 app.module 中添加了 APP_BASE_HREF 覆盖
- 即{ provide: APP_BASE_HREF, useValue: '/' }
替换了 index.html 中引用 dist（输出）文件夹的任何 href
- 例如将 'dist/assets/{some_asset}' 替换为 '../assets/{some_asset'}'
index.html 仍然使用 <base href="/">

为 v13 替换 angular.json 中的 'deployUrl' 的最佳方法是什么？

What is best way to go about replacing 'deployUrl' in angular.json for v13?

configuration

json

angular

angular13