Building Angular: Yarn link to project

📚 Docs or angular.io bug report

Description

When working on a codebase most developers appreciate being able to test and experience the changes they commit. In order to ease new Angular contributors it would be most helpful to have some documentation how to use a local Angular build as a dependecy in a test project.

I think it would be great if someone more experienced could add some exemplaric steps to the official contriubuting guide.

What’s the affected URL?**

DEVELOPER.md#building / #running tests locally

Reproduction Steps**

So far I’ve

• build Angular via angular/scripts/build-packages.sh
• run yarn link inside angular/dist/package-dist/router to create a symlink for @angular/router
• and tried using it in my test project via yarn link @angular/router

After many different approaches (for example linking the contents of angular/dist/bin/packages/router) it never worked, because the routing module itself or other dependencies like @angular/common/core/platform-browser/… could not be found.

Expected vs Actual Behavior**

Expected to have more detailed instructions how to link the contents of the dist/packages-dist folder to a test project (similiar to the subprojects in angular/integration).

📷Screenshot

🔥 Exception or Error

ERROR in ../angular/dist/router/fesm5/router.js
Module not found: Error: Can't resolve '@angular/common' in 'C:\Users\grilborzer\Code\angular\dist\router\fesm5'
ERROR in ../angular/dist/router/fesm5/router.js
Module not found: Error: Can't resolve '@angular/core' in 'C:\Users\grilborzer\Code\angular\dist\router\fesm5'
ERROR in ../angular/dist/router/fesm5/router.js
Module not found: Error: Can't resolve '@angular/platform-browser' in 'C:\Users\grilborzer\Code\angular\dist\router\fesm5'

🌍 Your Environment

Windows 10 [Version 10.0.16299.1268] Enterprise v. 1709 Yarn 1.16.0 Node 10.9.0

Anything else relevant?

I tried mentioned steps on Windows and on an Ubuntu Subsystem.

[gkalpak]

I haven’t tried yarn link with the built Angular packages. (I suspect it might not work anyway.) What works for me for testing the built packages against a local project is changing the project’s package.json to point to the local Angular packages.

E.g. if I have built the packages in /angular/dist/packages-dist/ and I want to test them on a project at /my-projects/test-project/, I would update /my-projects/test-project/package.json as follows:

 {
   ...
   "dependencies": {
-    "@angular/common": "9.0.0",
+    "@angular/common": "file:../../angular/dist/packages-dist/common",
-    "@angular/core": "9.0.0",
+    "@angular/core": "file:../../angular/dist/packages-dist/core",
     ...
   }
 }

After that, running npm install or yarn install will install the locally built Angular packages.

LMK if this is enough to unblock you, @s-gbz.

BTW, since recently, it is also possible to grab the packages from a PR’s build artifacts.

[s-gbz]

Looks like it worked!! (I think I had tried sth. similiar, too bad it didn’t work back then) Thank you so much for the support @gkalpak and generous offer @kapunahelewong ❤️