如何在Angular 5中移除URL中的哈希值？（部署于JBoss AS 7.1.1）

Hey there, let’s get rid of that annoying hash (#) in your Angular 5 URLs when deploying on JBoss AS 7.1.1! The issue has two parts: we need to tell Angular to use clean HTML5-style routing, and configure JBoss to redirect all non-static requests to your index.html so Angular can handle the routing logic. Here’s how to do it step by step:

Step 1: Update Angular Routing to Enable HTML5 Mode #

Even though Angular’s default routing strategy is PathLocationStrategy (hash-free), older versions like Angular 5 might sometimes fall back to hash-based routing if not explicitly configured. Let’s fix that in your app-routing.module.ts:

1. First, import the required classes at the top of the file:

   import { LocationStrategy, PathLocationStrategy } from '@angular/common';
   

2. Add a providers array to your @NgModule declaration to explicitly set the location strategy:

   @NgModule({
     exports: [ RouterModule ],
     imports: [ RouterModule.forRoot(routes) ],
     declarations: [],
     providers: [
       { provide: LocationStrategy, useClass: PathLocationStrategy }
     ]
   })
   

This tells Angular to use clean, hash-free URLs instead of the default hash-based fallback.

Step 2: Configure JBoss AS 7.1.1 to Redirect Requests to index.html #

The big gotcha here is that JBoss will try to serve physical files for URLs like /your-route, which don’t exist—those routes are managed entirely by Angular. We need to set up rewrite rules to send all non-static requests to index.html.

Option 1: Use JBoss’s RewriteFilter (Recommended) #

1. Open your WAR file’s WEB-INF/web.xml and add the following filter configuration:

   <filter>
     <filter-name>RewriteFilter</filter-name>
     <filter-class>org.jboss.as.web.extension.RewriteFilter</filter-class>
   </filter>
   <filter-mapping>
     <filter-name>RewriteFilter</filter-name>
     <url-pattern>/*</url-pattern>
     <dispatcher>REQUEST</dispatcher>
     <dispatcher>FORWARD</dispatcher>
   </filter-mapping>
   

2. Create a file named rewrite.config in the WEB-INF directory of your WAR, with these rules:

   # Skip API routes, static assets, and files with extensions (like .js, .css, .png)
   RewriteCond %{REQUEST_URI} !^/(api|assets|.*\..*)$
   # Redirect all other requests to index.html
   RewriteRule ^(.*)$ /index.html [L]
   

Adjust the RewriteCond if you have other static directories or API paths—this rule ensures JBoss serves actual files when needed, and hands off everything else to Angular.

Option 2: Simpler 404 Redirect (Quick Fix) #

If you don’t want to use the RewriteFilter, you can add an error-page entry in web.xml to redirect 404s to index.html:

<error-page>
  <error-code>404</error-code>
  <location>/index.html</location>
</error-page>

This is simpler but might not handle edge cases (like deep links) as cleanly as the rewrite rule.

Step 3: Rebuild and Deploy #

• Rebuild your Angular app with the updated routing configuration.
• Deploy the WAR file to JBoss AS 7.1.1 as usual.

Now when you access your app, URLs should be hash-free (e.g., http://yourdomain/dashboard instead of http://yourdomain/#/dashboard), and refreshing the page or directly accessing a route won’t result in a 404 error.

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