如何解决Angular 4.3.2中yarn build时node_modules内agGrid报错问题

Hey there, I've dealt with exactly this kind of compatibility issue between older Angular versions and agGrid before. Let's walk through the best ways to fix it:

The root of your problem is a TypeScript version mismatch: Angular 4.3.2 relies on an older TypeScript version (around 2.3 or 2.4), while newer agGrid versions use TypeScript 2.9+ features like inline import(...) type references, which your TS version doesn't recognize. Here are three solutions, ordered from most stable to quickest:

1. Downgrade agGrid to a Compatible Version #

This is the most reliable long-term fix, as it ensures full compatibility between your Angular setup and agGrid. AgGrid's documentation confirms that versions up to ag-grid-angular@15.0.0 support Angular 4 through 7.

To downgrade, run these commands in your project:

yarn add ag-grid-angular@15.0.0 ag-grid-community@15.0.0

Make sure both ag-grid-angular and ag-grid-community are on the same version to avoid dependency mismatches.

2. Skip Library Type Checks (Quick Workaround) #

If you need to get your build working immediately without changing dependencies, you can tell TypeScript to skip type checking of all node_modules files. This will suppress the errors from agGrid's .d.ts files.

Edit your tsconfig.json file and update the compilerOptions section to include:

{
  "compilerOptions": {
    // ... your existing options
    "skipLibCheck": true
  }
}

Note: This hides type errors across all libraries, so use it cautiously—it might mask other potential issues down the line.

3. Patch agGrid's Type Files (Advanced) #

If you must keep your current agGrid version, you can use patch-package to modify the problematic type files and fix the invalid import syntax. Here's how:

• First, install patch-package as a dev dependency:

  yarn add patch-package --dev
  

• Open node_modules/ag-grid-community/dist/lib/widgets/agPanel.d.ts and agDialog.d.ts in your editor.
• For each file, add explicit imports at the top:

  // In agPanel.d.ts
  import { PopupService } from "./popupService";
  import { GridOptionsWrapper } from "../gridOptionsWrapper";
  
  // In agDialog.d.ts
  // Add the relevant imports here too, matching the ones in the inline import(...) statements
  

• Replace the inline import(...) references in the declare const block with the imported type names. For example, change:

  popupService: import("./popupService").PopupService;
  

  to:

  popupService: PopupService;
  

• Run this command to create a patch file that will apply automatically on future installs:

  yarn patch-package ag-grid-community
  

• Add a postinstall script to your package.json so the patch runs every time you run yarn install:

  "scripts": {
    // ... your existing scripts
    "postinstall": "patch-package"
  }
  

I’d recommend going with option 1 if possible—it’s the cleanest solution that avoids future compatibility headaches. Option 2 is perfect for getting your build up and running right away.

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