如何修改Angular应用的基础相对URL？配置无效问题排查

看起来你是想把原本部署在根路径的Angular应用迁移到/myapp子路径下，但修改JSP后资源加载还是走根路径，对吧？别着急，我们一步步来搞定这个问题，需要同时调整Angular端的配置和后端JSP的资源引入方式：

1. 配置Angular的基础路径（Base Href） #

这是Angular资源和路由正确跳转的核心：

• 修改index.html：在<head>标签里添加或修改<base>标签，指定基础路径为/myapp/：

  <base href="/myapp/">
  

  这个标签告诉Angular所有路由跳转、资源加载（如CSS、JS、模板）都以/myapp/作为基准路径。
• 构建时指定Base Href（如果用Angular CLI）：如果是通过CLI打包应用，构建命令要加上--base-href参数，确保打包后的资源路径自动带上前缀：

  ng build --base-href /myapp/
  

  这样打包出来的所有资源引用都会自动变成/myapp/xxx.js、/myapp/xxx.css，不用手动修改。

2. 修正JSP中的资源引入路径 #

你之前修改app.jsp没效果，大概率是资源路径还是用了绝对根路径（比如/angularapp/home/home.htm），要改成基于上下文路径的引用：

• 使用JSP上下文路径变量：在JSP中，通过${pageContext.request.contextPath}获取当前应用的上下文路径（也就是/myapp），然后拼接资源路径：

  <!-- 原来的错误写法 -->
  <script src="/angularapp/js/angular.js"></script>
  <!-- 修改后的正确写法 -->
  <script src="${pageContext.request.contextPath}/angularapp/js/angular.js"></script>
  

  这样不管部署到哪个上下文路径，资源都会自动带上正确的前缀。
• 避免硬编码绝对路径：所有href、src属性都不要写死成http://localhost:8080/xxx或者/xxx，改用相对路径或者上下文变量拼接。

3. 确认Angular路由配置 #

确保你的Angular路由没有硬编码绝对URL，保持路由路径为相对路径即可：

// 正确的路由配置（不需要加/myapp前缀）
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

Angular会自动结合<base href>的配置，把路由跳转变成/myapp/home，不需要手动在路由里加前缀。

4. 后端服务器部署配置 #

最后要确保你的应用在服务器上部署的上下文路径是/myapp：

• 如果是Tomcat服务器：
  • 直接把打包后的应用war包命名为myapp.war，Tomcat会自动将其部署到/myapp路径下；
  • 或者在server.xml中配置<Context>标签，指定路径：

    <Context path="/myapp" docBase="你的应用路径" reloadable="true"/>
    

做完这些配置后，重启服务器，访问http://localhost:8080/myapp/应该就能正常加载所有资源和路由了，不会再出现请求根路径资源的错误。

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