Nx and Angular: version of installed local library differs from browser one

Question

Background:

I created two repositories: repository A (contains an Angular app) and repository B (contains an Angular library). Both repositories are cloned and developed on the local machine. The library from repository B is installed in repository A via npm link . The app from repository A uses the library from repository B (eg an Angular service).

Both repositories are created with Nx version 13.3.9. For a better understanding I simplified the complexity of this description. In reality both projects are big mono-repositories with more apps and libraries.

Problem

I serve the App of repository A and open it with Chrome. Whenever I've done changes to the library of repository BI build that library and the ng-development-server from repository A recognizes the change and recompiles the app. I've checked if the changes made to the library in repository B are the same as the installed library in the node_modules folder of repository A. That means the installed library in repository A and the build of repository B are correctly synchronized. But when I open the app with Chrome and I debug it with the webdev-tools I see the old version of the library without the new changes.

Suggestion

I think that this is some kind of caching problem, but I don't know how to fix it. I don't know why this happens and I don't know the origin of this problem.

What I tried for now

• I've completely cleared the Chrome browser's cache and I restarted it many times
• I tried other web browsers like Firefox
• I tried to upgrade Nx to the latest version
• I removed the node_modules folder and installed all dependencies again
• I removed the cache from node_modules/.cache

Attempt to reproduce this issue

I tried to reproduce this issue with two test repositories using Nx 13.3.9 without success. The new repositories somehow don't have this issue. I wanted to share an minimal example of this problem but I can't.

Questions

How can I fix this problem and why does this happen? I know its harder to help without any code but the two "real" repositories are big ones and the installation is not easy. Unfortunately I can't share the code.

Answer 1

My assumption in the comments section was correct: The problem was caused by the preserveSymlinks option in my angular.json file. I don't know why, but this option caused webpack to not update the symlinks properly after something had changed.

After changing the preserveSymlinks option from true to false I got an error:

inject() must be called from an injection context

One solution to solve this error would be to add the preserveSymlinks option again. But I didn't want to add it again and applied another solution: I added the following code to the paths attribute in tsconfig.base.json :

"paths": {
     "@angular/*": [
         "./node_modules/@angular/*"
     ],
...