Angular Universal项目Webpack打包报错：Cannot read property 'environment' of undefined

你遇到的这个错误在Angular服务端渲染打包场景里很常见，大概率是环境配置未正确注入服务器端代码或者代码中存在浏览器环境依赖导致的，下面给你几个针对性的排查和解决方向：

1. 检查environment的导入与引用 #

• 先确认服务器端入口文件（比如main.server.ts或server.ts）里，是否正确导入了环境配置：

  import { environment } from './environments/environment';
  

  别写错路径，也不要误引用浏览器端的environment.prod.ts（服务器端应该用通用的环境文件，或者单独的environment.server.ts），否则会导致导入的environment为undefined。
• 另外，服务器端代码绝对不能直接访问window、document这类浏览器全局对象，如果有相关操作，必须加上平台判断：

  import { isPlatformBrowser } from '@angular/common';
  import { Inject, PLATFORM_ID } from '@angular/core';
  
  // 在组件/服务的构造函数中注入PLATFORM_ID
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  // 使用时判断环境
  someFunction() {
    if (isPlatformBrowser(this.platformId)) {
      // 这里才可以安全访问window等浏览器对象
    }
  }
  

2. 完善AngularCompilerPlugin配置 #

你的Webpack配置里的AngularCompilerPlugin缺少了关键的entryModule参数，这会导致编译器无法正确识别服务器端的根模块，进而无法注入环境变量。修改配置如下：

new AngularCompilerPlugin({
  tsConfigPath: root('./src/tsconfig.server.json'),
  skipCodeGeneration: false,
  entryModule: root('./src/app/app.server.module#AppServerModule'), // 明确指定服务器端根模块
  sourceMap: false
})

注意要保证entryModule的路径和模块名完全匹配你的项目结构。

3. 校验tsconfig.server.json配置 #

检查服务器端的TypeScript配置文件，确保包含必要的配置项：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/server",
    "module": "commonjs",
    "types": ["node"] // 必须包含node类型，否则服务器端代码会报错
  },
  "files": [
    "main.server.ts",
    "server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./app/app.server.module#AppServerModule"
  }
}

这里的angularCompilerOptions.entryModule要和Webpack插件里的配置保持一致。

4. 修复依赖版本兼容性 #

你列出的@angular/typescript版本非常老旧，而且Angular项目应该直接依赖typescript而非@angular/typescript，这很可能导致版本不兼容问题。建议修改package.json：

// 移除@angular/typescript，替换为对应版本的typescript
"typescript": "^2.4.2" // Angular 5.x对应的TypeScript版本是2.4.x系列

同时确保@nguniversal/express-engine、@ngtools/webpack的版本和Angular核心版本匹配（Angular 5对应@nguniversal 5.x、@ngtools/webpack 1.x，这个是匹配的，但TypeScript版本必须对应）。

5. 检查服务器端引导逻辑 #

在server.ts里，确保通过ngExpressEngine正确引导应用，必要时可以手动注入环境配置：

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    // 手动注入服务器端环境变量，供组件/服务依赖注入使用
    { provide: 'SERVER_ENV', useValue: environment }
  ]
}));

如果你的组件是通过依赖注入获取环境变量，而非直接导入，要确保注入的token和这里的配置一致。

按照上面的步骤逐一排查，应该能解决这个environment未定义的问题。

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