Angular路由无法正常工作（报错：无法访问站点）

针对你在NX工作区Angular应用中配置路由后出现的“无法访问站点”错误，可按以下步骤排查解决：

1. 确认路由链接的正确写法 #

不要使用普通HTML的<a href="/products">标签，这类标签会触发整页刷新，不符合SPA路由逻辑。必须使用Angular的routerLink指令：

<!-- 正确写法 -->
<a routerLink="/">首页</a>
<a routerLink="/products">产品列表</a>

如果是在组件代码中跳转路由，要使用Router服务的navigate方法，而非window.location.href：

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

constructor(private router: Router) {}

goToProducts() {
  this.router.navigate(['/products']);
}

2. 处理路由模式导致的服务器404 #

Angular默认使用PathLocationStrategy（路径模式），这种模式需要服务器支持URL重写——当直接访问/products或刷新页面时，服务器会尝试寻找对应文件，找不到就会返回404（即你看到的“无法访问站点”）。

方案一：切换为Hash模式 #

在路由配置中添加useHash: true，路由会变为/#/products格式，无需服务器配置即可正常刷新：

RouterModule.forRoot(routes, { useHash: true })

方案二：配置NX开发服务器支持重写 #

如果想保留路径模式，修改项目的project.json，在targets.serve.options中添加historyApiFallback配置：

"targets": {
  "serve": {
    "options": {
      "devServer": {
        "historyApiFallback": true
      }
    }
  }
}

3. 检查组件配置正确性 #

确认HomePageComponent和ProductListComponent的模板路径（templateUrl）、样式路径（styleUrls）书写正确，避免因组件加载失败导致路由无法渲染。

4. 清除NX缓存并重启服务 #

NX的缓存可能导致路由配置未生效，执行以下操作：

1. 停止当前运行的开发服务器
2. 运行命令：nx clear-cache
3. 重新启动服务：nx serve your-app-name（替换为你的应用名称）

5. 添加通配符路由处理未知路径 #

可选：在路由数组末尾添加通配符路由，避免用户访问未配置路径时出现错误：

const routes: Routes = [
  { path: '', component: HomePageComponent}, 
  { path:'products', component: ProductListComponent},
  { path: '**', redirectTo: '' } // 重定向到首页
]

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