[英]What is best way to go about replacing 'deployUrl' in angular.json for v13?
我目前正在将我的应用程序从 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 没有在应用程序模块提供程序中被覆盖
最后找到了一些东西来代替它:
{ provide: APP_BASE_HREF, useValue: '/' }
<base href="/">
这是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
替换为包含块的文件夹的路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.