Angular Migration from 7 to 16 but one of the library is still in 5, throwing Module not found: Error: Can't resolve 'rxjs-compat'

Question

We have recently migrating angular project from 7 to 16 and we are using "rxjs": "~7.8.0", and no reference to rxjs-compt/no reference in the package.json file as well.

However on building of the application, we have noticed following error message.

./node_modules/ngx-geoautocomplete/node_modules/rxjs/Rx.js:9:9-31 - Error: Module not found: Error: Can't resolve 'rxjs-compat' in '/Users/balaji/predictivefitness/projects/ui/tridot-angular/node_modules/ngx-geoautocomplete/node_modules/rxjs'

May I know the root-cause of the issue and how to fix it.

Answer 1

1. Angular 7 uses rxjs with its rxjs-compat library for backward compatibility with older Angular versions.
2. Angular 16 dropped support for rxjs-compat as it no longer needs compatibility with View Engine.
3. Your dependency (rxjs-compat@5) likely conflicts with the newer rxjs version required by Angular 16.

1 . Update rxjs

npm install --save rxjs@latest

2. Manually Remove rxjs-compat

• If the library still uses rxjs-compat, consider migrating it to a newer version that supports Angular 16 without rxjs-compat.
• If upgrading the library isn't possible, manually remove rxjs-compat from your node_modules and package-lock.json.
• However, be aware that this might break functionality relying on rxjs-compat features.

3. Alternative Solutions (if applicable):

• If the error stems from a third-party library, check for updated versions compatible with Angular 16 and rxjs.
• If feasible, consider rewriting parts of the library using native rxjs features instead of rxjs-compat.