Angular应用部署至服务器/test目录后刷新浏览器失效问题咨询

Hey there! Let's break down why your Angular app works fine on first visit but breaks when you refresh, and how to fix it.

Why This Happens #

Angular is a single-page application (SPA), which means all routing is handled on the browser side after the initial index.html loads. When you first visit www-mysite.com/test, your server correctly returns the index.html file from the /test directory, and Angular takes over routing. But when you refresh the page (say, on www-mysite.com/test/your-page), your browser sends a direct request to the server for that specific path—and since there's no actual file or directory at that location on the server, you get a 404 error.

Solution 1: Configure Server Rewrite Rules (Recommended) #

This approach keeps your clean, non-hashed URLs (using Angular's default PathLocationStrategy) by telling the server to redirect all requests under /test to index.html, where Angular can handle the routing. Here's how to set it up for common servers:

For Nginx #

Edit your Nginx server configuration file and add this block inside your server directive:

location /test {
    try_files $uri $uri/ /test/index.html;
}

Save the file and restart Nginx to apply the changes.

For Apache #

First, make sure the mod_rewrite module is enabled on your Apache server. Then create a .htaccess file in your /test directory with these rules:

RewriteEngine On
# Skip rewrite if the request is for an existing file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Redirect all other requests to index.html
RewriteRule ^ /test/index.html [L]

For IIS #

Install the URL Rewrite module for IIS first, then add this rule to your web.config file in the /test directory:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Test Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/test/" />
          </conditions>
          <action type="Rewrite" url="/test/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Solution 2: Switch to Hash Location Strategy (Quick Fix) #

If you can't modify your server configuration, you can switch Angular to use hash-based routing. This adds a # to your URLs (like www-mysite.com/test/#/your-page), and when you refresh, the browser only requests the base /test/ path, letting Angular handle the rest via the hash.

To set this up, modify your app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ExtraOptions } from '@angular/router';

// Your existing route definitions
const routes: Routes = [
  // ... your routes here
];

// Enable hash routing
const routerConfig: ExtraOptions = {
  useHash: true,
  relativeLinkResolution: 'legacy'
};

@NgModule({
  imports: [RouterModule.forRoot(routes, routerConfig)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

After making this change, rebuild your app with ng build --prod --base-href /test/ and redeploy the /dist folder.

Either of these solutions should fix the refresh issue. The first option is better for keeping clean URLs, while the second is a quick workaround if server changes aren't possible.

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