Angular 7 build failing: Compatibility issue with @types/lodash-es

Other Questions NPM
1

Help needed with Angular 7 build errors

I’m facing issues with my Angular 7 project when executing npm run build. The build fails due to conflicts with @types/lodash-es. Here are some of the error messages I encountered:

Error: Cannot find name 'PropertyName' in collection.d.ts
Error: Cannot find name 'ObjectIterator' in collection.d.ts
Error: Cannot find name 'ListOfRecursiveArraysOrValues' in collection.d.ts

My current configuration:

  • TypeScript: 3.2.4
  • lodash-es: 4.17.11
  • @types/lodash-es: 4.17.1
  • lodash: 4.17.11

I’ve already tried adjusting the lodash-es version as recommended by several online resources, but to no avail. I cannot update TypeScript since version 3.2.4 is the latest compatible release for Angular 7.

Any suggestions on how to resolve this issue are appreciated. Thanks!

2

hey mate, had a similar headache. try this: remove @types/lodash-es completely and use regular lodash. in your tsconfig.json, add “esModuleInterop”: true. then import like this:

import lodash from ‘lodash’

worked like a charm for me. good luck!

3

I’ve dealt with this exact issue in one of my Angular 7 projects. What worked for me was explicitly setting the resolution for @types/lodash-es in my package.json file. Add this to your package.json:

“resolutions”: {
“@types/lodash-es”: “4.17.0”
}

Then run npm install again. This forces npm to use a specific version of @types/lodash-es that’s compatible with Angular 7 and TypeScript 3.2.4.

If you’re still having trouble after that, consider using the lodash-es package without the @types. You can add // @ts-ignore before imports to bypass TypeScript errors. It’s not ideal, but it can be a temporary workaround while you sort out the compatibility issues.

Lastly, make sure your tsconfig.json includes “skipLibCheck”: true in compilerOptions. This can help bypass some of these pesky type conflicts.

4

I encountered a similar issue with Angular 7 and lodash-es compatibility. The problem often stems from version mismatches between TypeScript and @types/lodash-es. Have you tried downgrading @types/lodash-es to version 4.17.0? This version is typically more compatible with Angular 7 and TypeScript 3.2.4.

If that doesn’t work, you might want to consider using the regular lodash package instead of lodash-es. While it’s not as optimized for ES modules, it often has fewer compatibility issues. You can import specific functions like this:

import { map, filter } from ‘lodash’;

Remember to update your tsconfig.json to include “allowSyntheticDefaultImports”: true in the compilerOptions. This approach has helped me resolve similar build failures in the past.