Angular 16独立组件构建后如何独立访问路由？

问题核心：Angular默认使用HTML5模式路由（不带#），但VS Code Live Server这类静态服务器不会自动将所有路由请求转发到index.html，直接输入子路由（如/search）时，服务器会尝试查找对应文件/文件夹，找不到就返回404；而开发模式下Angular自带的Dev Server已做了转发处理，所以正常。

以下是两种可行解决方案：

方案一：启用Hash模式路由（无需修改服务器配置） #

给路由添加Hash前缀，让静态服务器能正确识别所有路由请求，路由会变成http://127.0.0.1:5500/#/search的形式。

修改项目的启动配置代码：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withHashLocation } from '@angular/router';
import { getRoutes } from './app.routes';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(getRoutes(), withHashLocation()) // 启用Hash模式
  ]
});

重新执行ng build，之后直接访问带#的路由，或地址栏输入/search时Angular会自动转为Hash格式，即可正常访问。

方案二：配置Live Server转发所有请求到index.html #

如果不想用Hash模式，可给Live Server添加重写规则，让所有找不到资源的请求都返回index.html。

步骤1：创建重定向规则文件 #

在项目根目录新建_redirects文件，内容仅一行：

/* /index.html 200

步骤2：修改VS Code Live Server设置 #

打开VS Code设置（快捷键Ctrl+,），搜索Live Server: Rewrite Rules，点击编辑 in settings.json，添加如下规则：

"liveServer.settings.rewriteRules": [
    {
        "match": "/*",
        "action": "/index.html"
    }
]

保存设置后重启Live Server，再直接输入http://127.0.0.1:5500/search即可正常访问。

额外检查项 #

确认你的路由配置和组件结构没问题：

• 确保MainComponent模板中存在<router-outlet></router-outlet>，否则子组件无法渲染（开发模式能访问说明已添加，但可再确认）
• 当前路由配置中，父路由path: ''包含子路由search，路由路径/search的定义是正确的

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