10

If I create an angular library like this:

ng new libraries-workspace --create-application=false
cd libraries-workspace
ng generate library test-library

And now I build the library

ng build test-library --watch

Now if I create a new angular application in a completely different folder (away from the workspace)

ng new test-project

cd test-project

How can I reference or install my library without publishing to NPM. So basically I want to install the library from a folder

something like this:

ng add test-library c:\libraries-workspace\dist\test-library...

I don't want to add my project to the workspace folder.

Thanks

Improve this question

2 Answers 2

Reset to default
13

Edit 07.02.2021: An easier way

You can link your angular library directly to your application of choice, e.g. your main app. To do so, follow these steps:

  1. Navigate to your angular library project's output directory in a terminal and run the command npm link. You may have to trigger ng build once, so that the output directory exists. This will make your library locally available on your machine.
  2. Now navigate to your main application in which your angular library is used as a dependency and run the command npm link [name_of_your_module]
  3. Add "preserveSymlinks": true to your angular.json file under projects > architect > build
  4. Run your main application with ng serve, make some changes in your library, build it. Depending on your IDE, you can create a watch task which triggers an automatic build. You should be able to see your changes.
  5. Finally if you are done testing your changes, you can unlink your dependency from your main application by running the command npm unlink [name_of_your_module] in your main application's root directory. Go to your angular library project directory and run npm unlink so that your library isn't locally available anymore. You can now publish your changes and intall your latest version with npm install in your main application.

Remember it has to be the dist output folder since the angular cli does not support directly linking your library. You can also link libraries to other angular libraries in the same way, but you will have to add "preserveSymlinks": true to your library's tsconfig.json

Old answer:

You have to first pack the build output of your library. For that you have to use npm pack command inside the build output folder. Npm pack will create a package, copy the path of the created package, navigate to your test project in the terminal and hit npm install "C:\path\to\npm\pack\package"

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

OK I try that but I get an error. I'm using the following command: npm install C:\...\dist\test-library\test-library-0.0.1.tgz
npm ERR! code ENOENT npm ERR! syscall stat npm ERR! path C:\...\dist\test-library\test-library-0.0.1.tgz npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, stat 'C:\...\dist\test-library\test-library-0.0.1.tgz' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent But that directory and file does exist
Does you path have spaces? Try npm install "C:\...\dist\test-library\test-library0.0.1.tgz" Or move the package to some other place and install it from there. You can even move it into the same directory as the test-project.
Thanks, I think I'm working. Should I be doing this a different way? Seems a bit long-winded, building the library, copying, and then using npm install. I was just hoping to use something like ng-build --watch or does that only work if the application is within the workspace? Thanks for your help.
If you read the docs of npm install <tarball file>, they mention npm link.___Note: if you just want to link a dev directory into your npm root, you can do this more easily by using npm link___ No idea if this helps, I haven't tried it myself.
8

One of the ways to do this is suggested by @sombrerogalaxy.

However the biggest drawback of using the npm link approach is if you make any changes in your library you need to build your library again and again.
This is not a very productive way.

I am guessing, you would want to see the outcome of the changes being made to your library instantaneously in your angular app. If this is the expected behavior, you can follow the below steps.

  • Navigate to library workspace and use ng build --watch or npm build --watch to build library project. This command will create a dist folder with all the library's artifacts. By doing this, you are building the library project in "watch" mode so that any code changes will reflect in target application instantly.
  • Now, navigate to your angular application and install the library using the command npm install C:/some_folder/your_library_root_folder/dist/your_library. Replace the library path with physical path of your local system where library is created. After running this command, check your angular application's package.json file. The dependencies section will show that the library is being pulled from your local machine (specifically from the path you mentioned above) instead of the npm repository.
  • Run your angular application using ng serve or npm start.

That's all...

Now make any code changes in your library and save it. It will automatically reflect in your target application as we have run the library in "watch" mode.

UPDATE: As suggested by some of the users, you might want to set preserveSymlinks to true in your angular.json file

Improve this answer

4 Comments

On first point shouldn't it be "ng build --watch" ?
ng build --watch and npm build --watch both are correct. Usually build script will have ng build in it. But I agree, ng build --watch is more intuitive. I will update the answer.
For me only works if "preserveSymlinks": true setting added to main application
in angular 13+ we doesn't need to set any addition options like souceMapping. "architect": { "build": { "options": { "preserveSymlinks": true,} } } just set preserveSymlinks option. This ensures that the symlink to the locally built library is preserved. then run ng build --watch command in library and start development server in library consuming project.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.