无Ng Modules时如何正确使用次级路由出口实现URL刷新

问题根源 #

直接访问/landing/sign-up并刷新时，浏览器会将/landing视为当前目录，尝试从/landing/styles.css、/landing/main.js路径加载资源，而非根目录，导致404和MIME类型错误。这是SPA应用的典型问题，核心在于服务器未正确处理路由 fallback，或路由配置存在混淆。

正确配置方案 #

1. 修正路由嵌套结构（无需命名路由） #

你的场景属于子路由嵌套，不需要使用带()的命名路由（命名路由用于辅助路由场景，如同一页面多路由出口）。正确的路由配置如下：

// app.routes.ts
import { Routes } from '@angular/router';
import { LandingComponent } from './landing/landing.component';

export const routes: Routes = [
  {
    path: 'landing',
    component: LandingComponent,
    // 次级路由作为子路由嵌套
    children: [
      { 
        path: 'sign-up', 
        loadComponent: () => import('./landing/sign-up/sign-up.component').then(m => m.SignUpComponent) 
      },
      { 
        path: 'sign-in', 
        loadComponent: () => import('./landing/sign-in/sign-in.component').then(m => m.SignInComponent) 
      },
      // 访问/landing时默认跳转到sign-in
      { path: '', redirectTo: 'sign-in', pathMatch: 'full' }
    ]
  },
  { path: '', redirectTo: '/landing', pathMatch: 'full' },
  // 捕获所有未知路由，重定向到landing
  { path: '**', redirectTo: '/landing' }
];

在LandingComponent模板中，使用普通路由出口即可（无需命名）：

<!-- landing.component.html -->
<!-- 其他页面内容 -->
<router-outlet></router-outlet>

2. 配置服务器SPA Fallback #

Angular是单页应用，所有路由请求最终都应指向index.html，否则刷新非根路由时服务器会返回404。

开发环境（Angular CLI）

在angular.json中启用historyApiFallback：

"projects": {
  "your-app-name": {
    "architect": {
      "serve": {
        "options": {
          "historyApiFallback": true
        }
      }
    }
  }
}

生产环境示例

• Express服务器：

const express = require('express');
const path = require('path');
const app = express();

// 静态资源目录指向Angular构建产物
app.use(express.static(path.join(__dirname, 'dist/your-app-name')));

// 所有路由请求转发到index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

app.listen(4200);

• Nginx服务器：
  在配置文件中添加：

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

3. 验证资源引用路径 #

确保index.html中所有资源使用绝对路径（以/开头），结合base href="/"确保资源从根目录加载：

<!-- index.html -->
<base href="/">
<link rel="stylesheet" href="/styles.css">
<script src="/main.js"></script>

最佳实践总结 #

• 子路由嵌套使用children数组，无需命名路由（除非需要多路由出口的辅助场景）
• 必须配置服务器SPA fallback，确保所有路由请求指向index.html
• 资源引用使用绝对路径，避免相对路径导致的加载错误

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