使用npm link链接Angular库时出现浏览器异常的问题求助

I’ve run into this exact headache before while working on local forks of Angular libraries—this error almost always traces back to RxJS version mismatches or duplicate RxJS instances caused by the npm link workflow. Here’s how to fix it step by step:

1. Align RxJS versions between your project and local ngx-bootstrap #

The core problem is that your main project and the local ngx-bootstrap repo are using separate RxJS instances (or incompatible versions), which breaks internal RxJS logic like the schedule method.

• Open both your main project’s package.json and the local ngx-bootstrap/package.json
• Make sure the rxjs dependency versions match exactly (or at least share the same major version range). For example, if your project uses "rxjs": "~6.6.7", update the local ngx-bootstrap to use the same range, then run:

  # In the ngx-bootstrap directory
  npm uninstall rxjs
  npm install rxjs@~6.6.7
  

2. Clean up and re-establish the npm link #

Corrupted links or cached dependencies can also trigger this issue. Let’s reset the link setup:

• In the local ngx-bootstrap directory:

  npm unlink # Remove any existing broken link
  npm link # Recreate the library link
  

• Back in your main project directory:

  npm unlink ngx-bootstrap # Remove the old linked dependency
  npm link ngx-bootstrap # Re-link the updated library
  # Optional: Clear npm cache and reinstall to eliminate stale dependencies
  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  

3. Use npm pack instead of npm link (if linking still fails) #

Sometimes npm link creates tricky dependency sharing conflicts. A more reliable alternative is to package the local library and install it directly:

• In the local ngx-bootstrap directory:

  npm pack # Generates a .tgz file like ngx-bootstrap-10.0.0.tgz
  

• In your main project directory:

  npm install ../ngx-bootstrap/ngx-bootstrap-10.0.0.tgz # Replace with your actual file path/name
  

This installs the local library as a regular dependency, ensuring all shared packages (like RxJS) resolve correctly from your project’s node_modules.

4. Verify Angular version compatibility #

Double-check that your local ngx-bootstrap version matches your Angular version. For reference:

• Angular 12 → ngx-bootstrap 9.x
• Angular 13 → ngx-bootstrap 10.x
• Angular 14+ → ngx-bootstrap 11.x+
  Mismatched Angular versions can indirectly cause RxJS-related errors due to incompatible peer dependencies.

Why this happens #

When you use npm link, the linked library (ngx-bootstrap) uses its own node_modules folder instead of sharing your project’s dependencies. If RxJS is installed in both places, you end up with two separate RxJS instances. The schedule method error occurs because RxJS internal utilities (like schedulers) expect to work with their own instance’s objects, not a foreign one.

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