CODEWITHSUNDEEP
angularangular6angular7angular-builder
Vikhyath Maiya
Vikhyath Maiya

Reputation: 3202

Share a angular library across multiple projects

I am working on a angular 7+ project which is composed of backend + frontend. Now i am shot with a requirement where i need to create one more project which comprises of frontend+backend. But there are some reusable frontend code that is present which could be reused across both the application.

My Project Structure

Here

Requirement

Here

So when i read about library concepts i could find

1) Create two frontend Applications and share a common library

I cannot take this approach as i am using asp.net angular template project created through the visual studio (as shown Here). The two applications (Project One and Project Two) has its own FE+BE. Hence i cannot group two FE applications inside the same folder and make them use the shared library.

2) Create the library and upload to npm and use as dependency

I cannot take this approach as the code is proprietary and cannot be shared outside the network. Also there is no local corporate npm registry to use the corporate npm.

I know this could be done using a library concept. But i am not understanding how this could be done across multiple applications. Could someone help with a solution for this. Thanks !

Upvotes: 20

Views: 15814

Answers (3)

user6576367
user6576367

Reputation:

Considering the directory scenario you mentioned in your OP, you can add your library via local path, as mentioned in the NPM docs: Local Paths:

- Root
|
 -- Project One 
|
 -- Project Two
|
 -- Library usued across both projects

For example in the package.json of Project One, you can add the library as dependency:

"dependencies" : {
  "my-shared-library" : "file:../Library usued across both projects",
}

P.S. I'm not sure if spaces are allowed in the library folder name, but you can try and find it out. But I assume you'ld not use spaces anyway.

Alternative solution and further plans

  1. Create the library and upload to npm and use as dependency I cannot take this approach as the code is proprietary and cannot be shared outside the network. Also there is no local corporate npm registry to use the corporate npm.

It's not precisely accurate. You can indeed take this approach as an alternative solution or if you think that you could use this library in the future within another project. There is one way to do this, as mentioned in the NPM docs: Git URLs as Dependencies.

package.json

"dependencies" : {
  "my-shared-library" : "Git repo address here. There are various ways to specify an address. See below.",
}

How to add the library as dependecy

  • Assume you create a new repository for this library:
"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-shared-library.git",
}

This way you can even use different versions of your library. Say you develop a new version (i.e. 4.2.0) of your library for Project One and is not ready or shouldn't be used by Project Two, in the package.json of Project One you can add it like so:

"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-shared-library.git#branch-v4.2.0",
}
  • Alternatively you can create a new branch, say branch-for-my-shared-library, within the current repository (Assuming both of Project One and Project Two are pushed to this same repository):
"dependencies" : {
  "my-shared-library" : "git+ssh://[email protected]/my-current-project.git#branch-for-my-shared-library",
}

Also note that there are several protocols that you can specify in the URL, as mentioned in the doc:

The protocol is one of git, git+ssh, git+http, git+https, or git+file.

Further notes:

Happy coding.

Upvotes: 8

katwhocodes
katwhocodes

Reputation: 2268

1). You can try using npm pack for your library:

"scripts": {
   ...
   "build_lib": "ng build --prod example-lib",
   "npm_pack": "cd dist/example-lib && npm pack",
   "package": "npm run build_lib && npm run npm_pack"
}

2) After running 'npm pack', the generated file will be like: example-lib-0.0.1.tgz

3) You can install from other project using: npm install ../{some-paths}/example-lib/dist/example-lib/example-lib-0.0.1.tgz

Check out more details here: https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

Upvotes: 5

Christian Vincenzo Traina
Christian Vincenzo Traina

Reputation: 10464

You can use npm link.

npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed.

Shortly, it's enough if you go in the library folder and type: 

npm link

Then you can move in the project where you want to use the library and type:

npm link <project-name>

Where <project-name> is the name present inside the package.json file.

This would be enough. If you want to share the library in the network without copying and pasting the source code, well, maybe it's better asking your company to pay for a private repository :)

Upvotes: 3

Related Questions