Angular 18 SSR路由匹配错误排查与日志优化咨询

是否需要修复？ #

不需要。这个错误只是开发环境下的日志噪音：开发模式下浏览器会自动请求CSS的Source Map文件（.css.map），但你的SSR服务器把这类请求转给了Angular路由，而路由里没配置对应静态资源的匹配规则，所以抛出了路由不匹配的错误。生产环境下默认不会生成Source Map文件，也就不会出现这个问题，完全不影响页面功能。

如何隐藏这类日志？ #

给你三种可行的方法，按需选择：

方法1：让服务器优先处理静态资源（推荐） #

修改项目根目录的server.ts，让Express服务器先处理所有带后缀的静态资源请求，剩下的再交给Angular路由。核心代码调整如下：

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';

const app = express();

const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

const commonEngine = new CommonEngine();

// 先处理所有静态资源请求（带后缀的文件）
app.get('*.*', express.static(browserDistFolder, {
  maxAge: '1y'
}));

// 再处理Angular路由请求
app.get('*', (req, res, next) => {
  const { protocol, originalUrl, baseUrl, headers } = req;

  commonEngine
    .render({
      bootstrap,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

这样.css.map这类静态文件请求会直接被服务器返回，不会走到Angular路由，自然不会报错。

方法2：过滤特定错误日志 #

如果不想改服务器逻辑，可以自定义全局错误处理器，把这类特定错误过滤掉。修改app.config.ts：

import { ApplicationConfig, ErrorHandler } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

class CustomErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // 过滤掉NG04002且涉及css.map的错误
    if (error.message.includes('NG04002') && error.message.includes('.css.map')) {
      return; // 不输出到控制台
    }
    // 其他错误正常打印
    console.error(error);
  }
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ]
};

方法3：关闭开发环境的CSS Source Map #

直接在angular.json里关闭CSS Source Map的生成，从根源上消除这类请求：

"configurations": {
  "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": {
      "scripts": true,
      "styles": false, // 关闭CSS的Source Map
      "vendor": true
    },
    "namedChunks": true
  }
}

修改后重新构建，浏览器就不会再请求.css.map文件了。

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