Angular 8执行ng build --prod部署后报window属性读取未定义错误如何解决

报错原因 #

这个报错是生产构建特有的作用域/全局对象访问问题，核心是代码在浏览器环境初始化前就尝试访问window对象，本地运行不报错是因为ng serve用JIT编译模式，所有代码都在浏览器 runtime 执行，window对象全程存在；而ng build --prod默认开启AOT编译、摇树优化、代码压缩，会触发以下几个常见的异常场景：

• 你自己写的代码在类属性初始化、模块顶级作用域直接访问window，或者错误用this.window访问全局对象，生产构建压缩后顶层this会被编译为undefined，直接触发空指针
• 依赖的第三方库只适配浏览器环境，你在Angular模块装饰器的providers/imports配置里直接初始化了该库的实例，AOT编译阶段执行初始化逻辑时没有浏览器全局环境
• 自定义构建配置修改了全局变量注入规则，没有把window正确识别为浏览器全局对象

解决方案 #

1. 优先调整window访问逻辑 #

把所有直接访问window的逻辑从模块顶级作用域、类属性初始化位置，迁移到Angular浏览器端才会执行的生命周期钩子（ngOnInit/ngAfterViewInit）中，不要在代码初始化阶段就调用window相关API。

2. 用依赖注入管理window对象 #

自定义注入令牌统一提供window，避免直接访问全局对象，防止构建阶段作用域识别错误：

// 第一步：自定义注入令牌
import { InjectionToken } from '@angular/core';
export const WINDOW = new InjectionToken<Window>('window token');

// 第二步：在AppModule的providers数组中注册
@NgModule({
  providers: [
    { provide: WINDOW, useValue: window }
  ]
})
export class AppModule {}

// 第三步：业务代码中注入使用
@Component({...})
export class DemoComponent {
  constructor(@Inject(WINDOW) private window: Window) {}

  ngOnInit() {
    // 只有组件初始化时才会访问window
    console.log(this.window.innerWidth);
  }
}

3. 调整第三方依赖的初始化时机 #

如果是第三方库依赖window，不要在模块配置里直接实例化，改用useFactory在运行时生成实例：

// 错误写法：AOT编译阶段就会执行实例化逻辑
providers: [
  { provide: XXX_SERVICE, useValue: new XXXLib(window) }
]

// 正确写法：代码运行到浏览器端才会实例化
providers: [
  { provide: XXX_SERVICE, useFactory: () => new XXXLib(window) }
]

4. 精准定位错误位置 #

如果以上排查都没找到问题，打包时开启sourcemap：

ng build --prod --source-map

部署后用浏览器调试工具定位报错的具体代码行，直接定位到触发问题的代码段。

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