Angular 18直接粘贴URL或刷新页面时路由无法渲染

问题原因 #

1. SPA路由与服务器资源映射不匹配：Angular是单页应用，只有根路径的index.html是入口文件。当直接访问/paste/:uuid这类嵌套路由时，服务器会尝试寻找对应物理路径的资源，找不到就返回HTML内容，浏览器把这些HTML当成CSS/JS加载，触发MIME类型错误。
2. 静态资源路径引用错误：Angular默认用相对路径加载资源，当URL处于/paste/xxx层级时，浏览器会将/paste/视为当前目录，错误地去/paste/styles.css而非/styles.css路径下查找资源。

解决方法 #

1. 配置静态资源基础路径 #

修改angular.json的build配置，添加baseHref为根路径/，确保所有资源从根目录加载：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    "baseHref": "/",
    "tsConfig": "tsconfig.app.json",
    "assets": [
      {
        "glob": "**/*",
        "input": "public"
      }
    ],
    // 其他原有配置...
  }
}

同时检查index.html中的资源引用，确保使用绝对路径（如<link rel="stylesheet" href="/styles.css">）。

2. 配置服务器SPA fallback路由 #

所有路由请求都需要转发到根目录的index.html，让Angular接管路由处理：

本地开发（自定义服务器示例，Express）

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

// 托管静态资源
app.use(express.static(path.join(__dirname, 'dist/你的项目名/browser')));

// 所有请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/你的项目名/browser/index.html'));
});

app.listen(4200);

生产环境服务器配置

• Nginx：在server块中添加：

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

• Apache：在项目根目录创建.htaccess文件：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

3. 验证路由组件逻辑 #

在ViewPasteComponent中添加初始化逻辑，确认参数传递正常：

ngOnInit(): void {
  console.log('当前粘贴UUID:', this.uuid());
}

验证 #

完成配置后，重新构建项目（ng build），启动服务器测试：直接访问/paste/任意UUID或刷新页面，页面应正常加载，控制台无资源404错误。

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