你遇到的404问题本质是Angular单页应用（SPA）的HTML5路由模式与服务器配置不兼容导致的：

• 当你用this.router.navigate进行编程式导航时，路由是Angular客户端内部处理的，不会向服务器发送新的请求，所以一切正常。
• 但直接粘贴URL或刷新页面时，浏览器会把完整的URL（比如/printers/(form-outlet:119)）发送给服务器，而服务器没有对应的物理文件或后端路由来匹配这种带命名出口的路径，因此返回404错误。

1. 配置服务器，将所有路由请求转发到Angular入口文件（推荐） #

这是最标准的解决方案，核心思路是让服务器把所有非静态资源（比如JS/CSS/图片之外的请求）都转发到index.html，由Angular客户端来处理路由。

不同服务器的配置方式如下：

Angular CLI开发服务器 #

在angular.json的serve选项中开启historyApiFallback：

"projects": {
  "your-project-name": {
    "architect": {
      "serve": {
        "options": {
          "historyApiFallback": true,
          // 其他配置...
        }
      }
    }
  }
}

重启开发服务器后，刷新或直接访问命名路由URL就不会404了。

Apache服务器 #

在项目根目录创建.htaccess文件，添加以下重写规则：

RewriteEngine On
# 如果请求的文件/目录不存在，转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]

确保Apache开启了mod_rewrite模块。

Nginx服务器 #

在你的Nginx配置的server块中添加：

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

这会让Nginx先尝试匹配静态文件，匹配不到就返回index.html。

IIS服务器 #

1. 安装URL重写模块
2. 在web.config中添加规则：

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

2. 检查Angular路由配置是否正确 #

确保你的命名路由配置没有问题，比如父路由和子路由的结构应该是这样的：

import { Routes } from '@angular/router';
import { PrintersComponent } from './printers.component';
import { PrinterFormComponent } from './printer-form.component';

const routes: Routes = [
  {
    path: 'printers',
    component: PrintersComponent,
    // 命名出口的路由必须作为父路由的子路由
    children: [
      {
        path: ':id',
        component: PrinterFormComponent,
        outlet: 'form-outlet' // 指定命名出口
      }
    ]
  }
];

确认outlet属性和模板中的<router-outlet name="form-outlet"></router-outlet>名称一致。

3. 可选：切换到哈希路由模式 #

如果暂时不想配置服务器，可以改用哈希模式，URL会变成http://localhost:4200/#/printers/(form-outlet:119)。服务器会忽略#后面的部分，直接返回index.html，Angular再处理哈希后的路由。

切换方法：在AppModule的providers中替换路由策略：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppComponent } from './app.component';
import { routes } from './app-routing.module';

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy } // 启用哈希模式
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

不过哈希模式的URL不够美观，仅作为临时解决方案。

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