Node.js服务器部署两个静态Angular应用失败问题排查

问题根源 #

你遇到的白屏和MIME类型错误，核心原因有两个：

• 未配置Angular应用的基础路径（base-href），导致构建后的资源请求路径与Express托管的路由前缀不匹配，服务器找不到资源时返回HTML文件，触发MIME类型校验失败。
• Express路由配置错误，通配符*的优先级问题或未针对每个应用设置独立的SPA fallback路由，导致资源请求被错误路由到其他应用的index.html。

分步解决方案 #

1. 重新构建Angular应用，指定基础路径 #

在构建每个应用时，必须指定与Express路由前缀一致的base-href，确保资源请求路径正确：

• 构建project1：

ng build project1 --base-href /project1/

• 构建project2：

ng build project2 --base-href /project2/

或者直接修改angular.json中对应应用的architect.build.options.baseHref字段，避免每次构建手动输入：

{
  "projects": {
    "project1": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/project1/",
            // 其他配置...
          }
        }
      }
    },
    "project2": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/project2/",
            // 其他配置...
          }
        }
      }
    }
  }
}

2. 修正Express服务器路由配置 #

需要为每个应用设置独立的静态资源路由和SPA fallback路由，同时配置默认跳转：

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

// 托管两个应用的静态资源，分别对应路由前缀
app.use('/project1', express.static(path.join(__dirname, '/dist/project1'), { dotfiles: 'allow' }));
app.use('/project2', express.static(path.join(__dirname, '/dist/project2'), { dotfiles: 'allow' }));

// Project1的SPA fallback：匹配所有/project1下的路由，返回其index.html
app.get('/project1/*', (req, res) => {
  res.sendFile(path.join(__dirname, '/dist/project1/index.html'));
});

// Project2的SPA fallback：匹配所有/project2下的路由，返回其index.html
app.get('/project2/*', (req, res) => {
  res.sendFile(path.join(__dirname, '/dist/project2/index.html'));
});

// 默认访问根路径时，跳转到project1
app.get('*', (req, res) => {
  res.redirect('/project1');
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

3. 应用间导航配置 #

在project1中需要跳转到project2时，直接使用完整路径即可：

<!-- 在project1的组件模板中 -->
<a href="/project2">跳转到Project2</a>

或者用Angular的Router跳转时，使用绝对路径：

// 在project1的组件类中
import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToProject2() {
  window.location.href = '/project2';
}

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