从Angular的--deploy-url迁移至base href的配置求助

问题描述 #

我有一个嵌入CMS中的Angular项目，应用文件实际存储在www.MyApp.com/Modules/App/dist/路径下，但对外通过www.MyApp.com/app路径提供服务。之前构建脚本使用--deploy-url /Modules/App/dist参数，配合gulp脚本更新index.html中的硬编码资源，但该CLI选项现已被弃用。

我尝试移除该选项后，做了以下配置：

1. 在angular.json的构建配置中设置：

"baseHref": "/Modules/App/dist/",

2. 在app.module的providers中添加：

{ provide: APP_BASE_HREF, useValue: 'https://www.MyApp.com/app' },

但应用完全无法加载；如果把base href设为'/'，资源会从www.MyApp.com/dist文件夹加载。

另外我目前使用HashLocationStrategy，因为应用并非从网站根目录提供服务，路由地址格式为www.MyApp.com/app#/dashboard（dashboard为根路由），路由配置如下：

export const routes: Routes = [
  /* Lazy Load Modules */
  /* Main route */
  {
    path: 'dashboard',
    loadChildren: () => import('app/modules/dashboard/dashboard.module').then(m => m.DashboardModule)
  },
   
  ... 其他所有路由

  /* Default Route - Should be defined right above wildcard route or second last*/
  { path: '', redirectTo: '/dashboard/main', pathMatch: 'full' },
];

我需要找到替代构建流程中deploy-url选项的方案，请问应如何正确设置base href？（备注：我也可以更换LocationStrategy）

解决方案 #

针对你的场景，核心是区分资源加载路径和路由访问路径，以下是具体配置步骤：

1. 在angular.json中分开配置路由与资源路径

直接在项目构建配置里设置两个关键参数，替代旧的--deploy-url：

// angular.json -> projects -> [你的项目名] -> architect -> build -> options
{
  "baseHref": "/app/",
  "deployUrl": "/Modules/App/dist/"
}

• baseHref：指定路由的基础访问路径，对应对外服务的www.MyApp.com/app
• deployUrl：指定静态资源（JS、CSS、图片等）的实际存储路径，完全替代原--deploy-url的作用

2. 移除手动注入的APP_BASE_HREF

删掉app.module中手动提供的APP_BASE_HREF配置，因为angular.json里的baseHref会自动注入该值，手动设置会导致路由与资源路径冲突。

3. 调整路由重定向规则

由于baseHref已设为/app/，路由的空路径重定向需要去掉开头的斜杠，避免跳转到网站根目录：

{ path: '', redirectTo: 'dashboard/main', pathMatch: 'full' },

4. 验证构建结果

构建完成后检查index.html中的资源引用，确认JS、CSS等文件的src属性指向/Modules/App/dist/路径；同时测试路由跳转，确保能正常访问www.MyApp.com/app#/dashboard。

可选：切换为PathLocationStrategy（若CMS支持）

如果你的CMS可以配置路由转发（将www.MyApp.com/app路径的请求转发到www.MyApp.com/Modules/App/dist/index.html），可以改用更美观的PathLocationStrategy：

1. 移除路由模块中的useHash: true配置
2. 保持上述angular.json的配置不变
3. 配置CMS的路由转发规则即可实现www.MyApp.com/app/dashboard形式的路由访问

内容的提问来源于stack exchange，提问作者J King