go 關於替換 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 選項都不適用於我的設置，所以我想知道我是否使用不正確，或者是否沒有關於替換它的 go 的好方法

這是來自 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 中將“deployUrl”替換為“baseHref”
• 在 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="/">

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替換為包含塊的文件夾的路徑。