在 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 选项都不适用于我的设置，所以我想知道我是否错误地使用了它们，或者是否没有好的方法来替换它

以下是 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分布/仪表板就像它应该的那样）

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

Answer 1

最终找到了一些东西来代替它：

• 在 angular.json 中将“deployUrl”替换为“baseHref”
• 在 app.module 中添加了 APP_BASE_HREF 覆盖
  • IE{ provide: APP_BASE_HREF, useValue: '/' }
• 替换了 index.html 中引用 dist（输出）文件夹的所有 href
  • 例如，将 'dist/assets/{some_asset}' 替换为 '../assets/{some_asset'}'
• index.html 仍然使用<base href="/">

Answer 2

这是 Angular 13+ 的问题

在这里找到了解决方案： https://github.com/angular/angular-cli/issues/22113#issuecomment-1004279867

您应该将以下代码放入 main.ts 文件中：

declare var  __webpack_public_path__: string;
__webpack_public_path__ = 'valueFormerlyAssignedUsing_deployUrl';

替换valueFormerlyAssignedUsing_deployUrl为包含块的文件夹的路径。