Angular Universal转换第三方包报错：window.addEventListener等未定义如何解决？

下面是几个无需修改第三方包代码的可行方案，按优先级排序：

1. 仅在客户端动态加载第三方模块 #

利用Angular的平台判断工具，只在浏览器环境下加载并初始化依赖window的第三方包，避免服务器端渲染时执行相关代码。

示例代码（组件中）：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 动态导入第三方包，仅在客户端执行
      import('third-party-lib').then(lib => {
        lib.init(); // 调用包的初始化方法
      });
    }
  }
}

如果是模块层面的导入，可以在app.module.ts中用条件导入：

import { NgModule, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@NgModule({
  imports: [
    // 其他通用模块
    ...(isPlatformBrowser(PLATFORM_ID) ? [import('third-party-lib').then(m => m.ThirdPartyModule)] : [])
  ]
})
export class AppModule {}

2. 服务器端模拟window/navigator对象 #

在server.ts中为Node.js环境添加全局的window和navigator模拟，避免服务器端渲染时触发"未定义"错误。注意只模拟必要的属性，避免冲突：

// server.ts顶部添加
if (typeof window === 'undefined') {
  global['window'] = {} as Window;
  global['navigator'] = {
    mediaDevices: {
      getUserMedia: () => Promise.reject('Server-side does not support media devices')
    }
  } as Navigator;
  
  // 如果第三方包依赖其他window属性，可按需补充
  // global['window'].addEventListener = () => {};
}

这个方法适合依赖window基础API的包，复杂场景可能需要补充更多模拟属性。

3. 延迟初始化到DOM渲染完成后 #

将第三方包的初始化逻辑放到ngAfterViewInit生命周期钩子中，确保DOM已准备，同时结合平台判断：

import { Component, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({...})
export class MyComponent implements AfterViewInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 这里初始化第三方包，比如调用需要DOM或window的方法
      const thirdParty = require('third-party-lib');
      thirdParty.attachEventListener();
    }
  }
}

4. 用Webpack externals隔离客户端包 #

如果项目使用自定义Webpack配置，可将第三方包标记为externals，让其仅在客户端通过CDN加载：

1. 创建extra-webpack.config.js：

module.exports = {
  externals: {
    'third-party-lib': 'window.ThirdPartyLib' // 对应CDN暴露的全局变量
  }
};

2. 在angular.json中配置使用该文件：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 其他配置
    }
  },
  "server": {
    "builder": "@angular-builders/custom-webpack:server",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 其他配置
    }
  }
}

3. 在src/index.html中引入第三方包的CDN：

<script src="https://cdn.example.com/third-party-lib.min.js"></script>

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