Angular 5项目中window.location.reload()部署XAMPP后失效，如何解决？

嘿，这个问题我碰到过好多次了——本地ng serve跑的好好的，一部署到XAMPP就掉链子，多半是Angular单页应用的路由或者部署路径没配置对，咱们一步步来排查解决：

Angular默认用的是PathLocationStrategy（不带#的干净URL），但这种模式下，Apache会把你的路由当成物理文件路径去查找——比如你访问/dashboard，Apache会去找htdocs/dashboard这个文件夹，可Angular是单页应用，所有路由都应该指向index.html。这时候你调用window.location.reload()，就会触发Apache找不存在的文件，直接导致页面加载失败。

有两个解决方向：

• 切换到带#的哈希路由：修改AppModule的配置，让Angular用HashLocationStrategy，这样路由会带上#，Apache就不会把路由当成物理路径了：

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

@NgModule({
  // 其他模块配置...
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ]
})
export class AppModule { }

• 配置Apache重写规则：如果不想用带#的路由，就在项目部署的根目录（比如XAMPP的htdocs/your-angular-app文件夹）创建.htaccess文件，添加以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /your-angular-app/  <!-- 这里替换成你的项目部署路径，根目录就写/ -->
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /your-angular-app/index.html [L]
</IfModule>

别忘了开启Apache的mod_rewrite模块：打开XAMPP的httpd.conf文件，找到#LoadModule rewrite_module modules/mod_rewrite.so，把前面的#删掉，然后重启Apache服务。

如果你的项目部署在XAMPP的子目录下（比如http://localhost/my-app），build的时候必须指定正确的base href，否则页面会从根目录找资源，直接导致资源加载失败，页面白屏。

执行build命令时加上--base-href参数：

ng build --prod --base-href /my-app/

如果是部署在XAMPP根目录（http://localhost/），可以用--base-href /，或者直接省略（默认就是根目录）。

有时候问题出在调用reload()的时机上——比如你在组件的ngOnInit里直接调用，页面还没加载完就触发刷新，部署后资源加载速度慢，很容易导致加载失败。

建议：

• 尽量在**用户交互（比如按钮点击）**后触发刷新，而不是页面初始化阶段：

// 示例：按钮点击事件里调用刷新
onRefreshButtonClick() {
  window.location.reload();
}

• 如果是路由跳转后需要刷新，优先用Angular的路由服务实现单页内刷新，避免触发浏览器完全重载：

import { Router } from '@angular/router';

constructor(private router: Router) {}

refreshCurrentPage() {
  this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
    this.router.navigate([this.router.url]);
  });
}

这种方式更符合Angular单页应用的最佳实践，也能避免部署后的路径问题。

如果是在Linux或macOS上用XAMPP，可能会遇到文件权限问题——Apache没有读取项目文件的权限，导致页面无法加载。

可以执行以下命令修改权限：

sudo chmod -R 755 /opt/lampp/htdocs/your-app-folder
sudo chown -R www-data:www-data /opt/lampp/htdocs/your-app-folder

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