Install Angular library from local folder or network folder

user_1131657 0
Viewed 3722

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

angular-library npm angular
2 Answers

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"

user_51713250

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.

user_36592260
Related