如何将WebSphere Liberty 17.0.0.2上的AngularJS+JSP项目升级为Angular 4？

Hey there, let’s work through this 404 problem step by step—upgrading from AngularJS to Angular 4 on WebSphere Liberty has a few specific gotchas, but we’ll get your app running smoothly.

1. Fix the Deployment Location of Angular’s dist Files #

First up: placing dist inside WEB-INF/views is a misstep. WEB-INF is a server-side protected directory—browsers can’t directly access files inside it. Here’s the fix:

• Copy all contents of the dist folder directly into your web app’s root directory (like src/main/webapp for Maven projects), so it sits alongside WEB-INF, not nested inside it. This makes Angular’s static assets (index.html, JS bundles, CSS, etc.) publicly accessible.

2. Configure Spring MVC to Handle SPA Routing #

Angular 4 is a single-page application (SPA), so any frontend route (like /dashboard or /profile) needs to be forwarded to index.html by your Spring backend. Without this, refreshing a page or directly accessing a route will throw a 404.

• Add a catch-all controller method:

  @Controller
  public class SpaForwardController {
      @RequestMapping(value = "/**", method = {RequestMethod.GET, RequestMethod.HEAD})
      public String forwardToIndex() {
          return "forward:/index.html";
      }
  }
  

• If you’re using XML-based config (spring-context.xml), add these entries (make sure <mvc:annotation-driven/> is enabled):

  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
      <property name="prefix" value="/"/>
      <property name="suffix" value=""/>
  </bean>
  
  <mvc:view-controller path="/**" view-name="index.html"/>
  

3. Update web.xml for Static Assets & Welcome Pages #

Ensure your web.xml properly handles Angular’s file types and sets the default entry point:

• Set the welcome page to Angular’s index.html:

  <welcome-file-list>
      <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  

• Add MIME mappings to avoid browser rendering issues:

  <mime-mapping>
      <extension>html</extension>
      <mime-type>text/html</mime-type>
  </mime-mapping>
  <mime-mapping>
      <extension>js</extension>
      <mime-type>application/javascript</mime-type>
  </mime-mapping>
  <mime-mapping>
      <extension>css</extension>
      <mime-type>text/css</mime-type>
  </mime-mapping>
  <mime-mapping>
      <extension>json</extension>
      <mime-type>application/json</mime-type>
  </mime-mapping>
  

4. Verify WebSphere Liberty server.xml Config #

Make sure Liberty has the right features enabled to serve your Angular + Spring app:

• Enable core features (adjust based on your Spring version):

  <featureManager>
      <feature>servlet-4.0</feature>
      <feature>springWeb-5.0</feature> <!-- Match your Spring version -->
      <feature>json-1.0</feature>
  </featureManager>
  

• Confirm your app’s context root matches what you’ll use in Angular’s build:

  <webApplication id="your-app-name" location="your-app-war.war" contextRoot="/your-app-context"/>
  

5. Correct Angular-CLI Build Configuration #

When building your Angular 4 app, specify the base-href to match your Liberty context root—this ensures all asset paths are correctly prefixed:

• Run the build command like this:

  ng build --base-href="/your-app-context/"
  

6. Test Basic Access First #

Before testing frontend routes, verify you can load the base index.html directly:

• Visit http://your-liberty-host:port/your-app-context/index.html. If this returns 404, double-check your deployment location and Liberty’s context root.
• If index.html loads but assets are missing, check the browser’s Network tab—asset paths should match the base-href you set.

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