Docker部署Angular应用遇ReferenceError: window is not defined问题求助

我的应用在Docker环境外运行正常，但用Dockerfile构建并运行容器时，出现以下错误：

ReferenceError: window is not defined
at AuthService.8klp.AuthService.init (/usr/local/iquanta-ang/dist/server/main.js:93765:9)
at new AuthService (/usr/local/iquanta-ang/dist/server/main.js:93760:14)
at AuthService_Factory (/usr/local/iquanta-ang/dist/server/main.js:93800:108)
at _callFactory (/usr/local/iquanta-ang/dist/server/main.js:75898:24)
at _createProviderInstance (/usr/local/iquanta-ang/dist/server/main.js:75856:30)
at resolveNgModuleDep (/usr/local/iquanta-ang/dist/server/main.js:75831:21)
at NgModuleRef_.get (/usr/local/iquanta-ang/dist/server/main.js:76507:20)
at resolveDep (/usr/local/iquanta-ang/dist/server/main.js:76878:49)
at createClass (/usr/local/iquanta-ang/dist/server/main.js:76758:36)
at createDirectiveInstance (/usr/local/iquanta-ang/dist/server/main.js:76629:24)

这个问题是在我给网站添加Google Gmail登录弹窗功能后出现的，请问是否需要安装特定依赖来解决“window is not defined”的问题？以下是我的Dockerfile：

FROM node:16 as dev-build
ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
ENV PATH=$PATH:/home/node/.npm-global/bin 
WORKDIR /usr/local/angular/
COPY . /usr/local/angular
RUN npm install -g @angular/cli
RUN npm install pm2 -g
RUN npm install
RUN npm run build:ssr
RUN npm run-script build
CMD ["pm2-runtime","/usr/local/angular/dist/server.js"]
EXPOSE 4000

这个问题不是缺少依赖，而是Angular SSR（服务器端渲染）的特性导致的：服务器端运行时没有window对象，而你新增的Google登录代码直接访问了window，所以在服务器渲染阶段报错。

解决思路是确保只有在浏览器环境下才执行访问window的代码，具体可以按以下步骤操作：

• 在AuthService中判断环境
  在你的AuthService的init方法里，先检查是否存在window对象，再执行Google登录相关逻辑：

  import { isPlatformBrowser } from '@angular/common';
  import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
  
  @Injectable({ providedIn: 'root' })
  export class AuthService {
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
    init() {
      // 仅在浏览器环境下执行
      if (isPlatformBrowser(this.platformId)) {
        // 这里放原来访问window的Google登录初始化代码
        window.gapi.load('auth2', () => {
          // ...你的登录逻辑
        });
      }
    }
  }
  

• 调整SSR构建逻辑
  你的Dockerfile里同时执行了npm run build:ssr和npm run-script build，这会生成两套构建产物（SSR和静态浏览器构建），而你最后运行的是dist/server.js（SSR产物）。确认你的build:ssr脚本配置正确，确保服务器端代码不会包含浏览器特有的API调用。

• 使用Angular兼容的第三方登录库（可选）
  如果你用的是原生gapi脚本，建议换成angularx-social-login这类适配Angular SSR的库，它们已经内置了环境判断逻辑，无需手动处理window对象的兼容性问题。

另外，不需要额外安装依赖，现有依赖已经足够，核心是要避免在服务器端代码中访问浏览器专属的window对象。

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