Angular 16 + Nest.js Monorepo构建失败问题求助

问题梳理 #

构建失败涉及三类核心问题：

• Webpack 5 默认不再提供 Node.js 核心模块（fs、path、child_process 等）的 polyfill，导致模块解析失败
• ngx-logger、@ngx-loading-bar 第三方库与 Angular Ivy 编译器不兼容
• store 模块缺少 TypeScript 声明文件

分步解决方案 #

1. 解决 Webpack 5 Node.js 核心模块 polyfill 问题 #

Angular 16 基于 Webpack 5，需手动配置 polyfill 以支持 Node.js 核心模块：

• 安装 node-polyfill-webpack-plugin：

  npm install node-polyfill-webpack-plugin --save-dev
  

• 修改项目根目录下的 angular.json，在 projects.[你的项目名].architect.build.options 中添加 Webpack 自定义配置：

  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      // 保留原有配置
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      }
    }
  }
  

• 在项目根目录创建 webpack.config.js，配置 polyfill 规则：

  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
  
  module.exports = {
    plugins: [
      new NodePolyfillPlugin({
        excludeAliases: ['console'] // 按需排除不需要的模块
      })
    ],
    resolve: {
      fallback: {
        // 若无需使用某些模块，可直接设为 false，例如：
        // "fs": false
      }
    }
  };
  

2. 修复第三方库与 Ivy 不兼容问题 #

• 升级兼容版本：替换 package.json 中对应库的版本为适配 Angular 16 的版本：

  "dependencies": {
    "ngx-logger": "^16.0.0",
    "@ngx-loading-bar/core": "^6.0.2",
    "@ngx-loading-bar/router": "^6.0.2"
  }
  

  重新安装依赖：

  npm install --legacy-peer-deps
  

• 若升级后仍有兼容性问题，在 tsconfig.json 中添加配置兼容非 Ivy 库：

  "compilerOptions": {
    // 保留原有配置
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
  

3. 解决 store 模块无 TypeScript 声明问题 #

安装 store 模块的官方 TypeScript 声明文件：

npm install @types/store --save-dev

若为自定义 store 模块，需在模块目录下创建 index.d.ts 声明文件，示例：

declare module 'store' {
  export function get(key: string): any;
  export function set(key: string, value: any): void;
  // 根据模块实际导出补充声明内容
}

内容的提问来源于stack exchange，提问作者Node.JS