Angular13混合应用Webpack打包ng-bootstrap生产构建异常排查

问题概述 #

开发Angular 13混合应用（包含使用angular-ui的AngularJS组件），通过Webpack做生产打包，集成ng-bootstrap后开发环境正常，但生产构建完成后浏览器打开时报错，控制台提示：

app-6279414c.346772f…ed2a2ea.bundle.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at d (app-6279414c.346772f….bundle.js:1:160677)
    at i (app-6279414c.346772f….bundle.js:1:164659)
    at 3268 (common-b48beae3.f498…7.bundle.js:2:12304)

相关依赖与代码片段 #

依赖配置 #

"dependencies": {
  ...,
  "@ng-bootstrap/ng-bootstrap": "^12.1.2",
  "@popperjs/core": "^2.10.2"
},
"devDependencies": {
  ...,
  "@ngtools/webpack": "^13.3.9",
  "@types/webpack": "^5.28.0",
  "@types/webpack-env": "^1.16.3",
  "clean-webpack-plugin": "^3.0.0",
  "copy-webpack-plugin": "^8.1.1",
  "css-minimizer-webpack-plugin": "^3.0.1",
  "html-webpack-plugin": "^5.5.0",
  "image-webpack-loader": "^7.0.1",
  "karma-webpack": "^5.0.0",
  "webpack": "^5.39.1",
  "webpack-bundle-analyzer": "^4.4.2",
  "webpack-cli": "^4.7.2",
  "webpack-dev-server": "^3.11.2",
  "webpack-manifest-plugin": "^5.0.0",
  "webpack-merge": "^5.8.0",
  "webpack-nano": "^1.1.1"
}

app.module.ts 关键代码 #

import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    ..., 
    NgbAlertModule
  ],
})

vendors.aot.ts 原代码 #

import '@ng-bootstrap/ng-bootstrap';
import '@popperjs/core';
import '@angular/localize';

Webpack配置调整方案 #

1. 修正@ngtools/webpack的处理范围 #

@ngtools/webpack仅用于编译自身的Angular代码，第三方库无需再次处理，原配置包含/node_modules/会导致模块解析错误，调整规则：

{
  test: /\.[jt]sx?$/,
  loader: '@ngtools/webpack',
  include: [
    path.resolve(__dirname, './src/project/ng2')
  ],
  exclude: /node_modules/
}

2. 移除vendors中的全局ng-bootstrap导入 #

已在app.module.ts按需导入模块，全局导入会导致重复打包或初始化顺序问题，修改vendors.aot.ts：

import '@popperjs/core';
import '@angular/localize';

3. 调整splitChunks配置，确保第三方库正确拆分 #

原配置固定chunk名称为common，易导致模块混包，优化缓存组规则：

splitChunks: {
  chunks: 'all',
  minSize: 3000,
  minRemainingSize: 0,
  minChunks: 1,
  maxAsyncRequests: 30,
  maxInitialRequests: 30,
  enforceSizeThreshold: 50000,
  maxSize: 600000,
  cacheGroups: {
    ngBootstrapVendors: {
      test: /[\\/]node_modules[\\/](@ng-bootstrap|@popperjs)/,
      priority: -5,
      reuseExistingChunk: true,
      name: 'ng-bootstrap-vendors'
    },
    defaultVendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10,
      reuseExistingChunk: true,
      name: 'default-vendors'
    },
    default: {
      minChunks: 2,
      priority: -20,
      reuseExistingChunk: true,
      idHint: 'ng2'
    }
  },
  usedExports: true
}

4. 启用AOT代码生成 #

原AngularWebpackPlugin的skipCodeGeneration设为true会禁用AOT编译，生产环境必须启用AOT才能正确处理ng-bootstrap模块：

new AngularWebpackPlugin({
  tsconfig: './tsconfig.aot.json',
  entryModule: path.resolve(__dirname, './src/project/ng2/app.module#AppModule'),
  skipCodeGeneration: false
})

调整说明 #

• 第三方库无需通过@ngtools/webpack编译，避免模块被二次处理导致的运行时错误
• 按需导入ng-bootstrap模块，减少冗余代码并避免初始化冲突
• 拆分第三方库为独立chunk，优化打包结构与缓存策略
• 启用AOT编译确保Angular模块（包括ng-bootstrap）被预编译，消除运行时依赖解析问题

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