Angular SSR中tsconfig.server.json的paths配置失效求助

别担心，paths配置本身是支持SSR的，你遇到的问题大概率是配置不全或者细节上的疏漏，我给你梳理几个关键修复点：

• 先修正拼写错误！
  你在tsconfig.server.json里写的是./enviroment/*，但组件里导入的是@env/environment——注意是environment（正确拼写）不是enviroment，这个拼写不一致直接会导致模块找不到，先把这个改过来！

• 同步所有TS配置文件的路径映射
  Angular项目的TS配置是分层的，tsconfig.json是基础配置，tsconfig.app.json、tsconfig.server.json都会继承它的设置。你只在tsconfig.server.json里加了paths，但其他配置文件可能没同步，导致SSR构建时读取不到正确的映射。建议把以下配置同步到所有相关的tsconfig文件的compilerOptions中：

  {
    "baseUrl": ".",
    "paths": {
      "@env/*": ["./environment/*"]
    }
  }
  

• 让Node.js识别TypeScript路径别名
  TypeScript的paths是TS编译器的特性，Node.js本身并不认识这些别名。SSR服务是由Node.js运行的，所以需要额外配置让Node.js解析这些路径：

  1. 先安装依赖：

     npm install tsconfig-paths --save-dev
     

  2. 在server.ts的最顶部添加这段代码，注册路径映射：

     import { join } from 'path';
     import * as tsConfigPaths from 'tsconfig-paths';
     
     const tsConfigPath = join(__dirname, '../tsconfig.server.json');
     const tsConfig = require(tsConfigPath);
     
     tsConfigPaths.register({
       baseUrl: join(__dirname, '../'),
       paths: tsConfig.compilerOptions.paths
     });
     

• 清理缓存并重新构建
  有时候旧的构建缓存会干扰新配置生效，执行以下命令彻底清理后重新构建SSR：

  ng clean
  ng build --configuration production
  ng run [你的项目名]:server:production
  

按照这些步骤调整后，SSR应该就能正确识别@env/environment模块了。

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