Angular项目正确引入jQuery并避免window未定义错误

嘿，我完全懂你在Angular SSR项目里引入jQuery（适配Bootstrap）时踩的window is not defined坑——毕竟服务器端根本没有浏览器的window对象，而jQuery一上来就会绑定到window上。下面给你几个经过验证的靠谱方案，从组件级按需加载到全局配置都有，按需选：

这种方式最灵活，只在浏览器环境下加载jQuery，完全避免服务器端报错。

1. 先安装依赖：

npm install jquery --save
# 如果需要Bootstrap，一起装
npm install bootstrap --save

2. 在需要使用jQuery的组件里，借助Angular的PLATFORM_ID判断当前环境，再动态导入jQuery：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    // 只在浏览器环境下执行
    if (isPlatformBrowser(this.platformId)) {
      import('jquery').then($ => {
        // 这里可以安全使用$，比如初始化Bootstrap组件
        $('.dropdown-toggle').dropdown();
        // 也可以把$挂载到window（可选，方便全局用，但不推荐）
        // (window as any).$ = $;
      });
    }
  }
}

如果你的项目很多地方都要用jQuery，不想每个组件都写一遍判断，可以用Angular的依赖注入统一处理：

1. 先安装依赖（同方案1）

2. 在app.module.ts里定义一个jQuery的注入令牌，并根据环境提供实例：

import { NgModule, Inject, PLATFORM_ID, InjectionToken } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

// 定义jQuery的注入令牌
export const JQUERY_TOKEN = new InjectionToken<any>('jQuery');

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: JQUERY_TOKEN,
      useFactory: (platformId: Object) => {
        // 浏览器环境返回jQuery，服务器端返回null
        return isPlatformBrowser(platformId) ? require('jquery') : null;
      },
      deps: [PLATFORM_ID]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 在组件里注入使用：

import { Component, Inject } from '@angular/core';
import { JQUERY_TOKEN } from '../app.module';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(@Inject(JQUERY_TOKEN) private $: any) {}

  ngOnInit() {
    // 先判断$是否存在，再执行操作
    if (this.$) {
      this.$('.alert').alert('close');
    }
  }
}

如果不想把jQuery打包进项目，可以直接在浏览器端通过CDN加载，服务器端完全不处理：

1. 在index.html里添加CDN脚本（放在</body>前）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

2. 如果是SSR项目，在webpack.server.config.js里添加externals配置，告诉Webpack不要打包jQuery：

module.exports = {
  // 其他配置...
  externals: {
    jquery: 'jQuery'
  }
};

3. 在组件里使用时，同样要判断浏览器环境：

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

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

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      const $ = (window as any).$;
      $('.modal').modal('show');
    }
  }
}

划重点：如果你的项目还在用Bootstrap 4或更早版本，强烈建议升级到Bootstrap 5——Bootstrap 5已经完全移除了jQuery依赖，改用原生JavaScript实现所有组件功能。这样你根本不需要引入jQuery，直接用Bootstrap的原生API就能搞定，彻底避免SSR时的window问题！

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