Reuse Angular 2 module in other app without publishing to npm?

Question

Say you have two different Angular 2 apps and both of them need to make use of the same component.

I created the common component, made a library following this tutorial http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/, but npm will make my code public and I will have to pay to make it private.

So, the questions are:

How should I create components the can be available for the work team?
Is it necessary to publish to npm or can I just push my code to private github repo? And if so, how should I do that and what would be the process to reuse the code in an app?

Thanks in advance.

Possible duplicate of [How to use private Github repo as npm dependency](http://stackoverflow.com/questions/28728665/how-to-use-private-github-repo-as-npm-dependency) — Fabio Antunes, Oct 18 '16 at 20:02
I don't think @Alina is asking how to use private repo as a dependency but how a project should be structured and maintained to serve as a reusable module in other angular projects. — Damon, Jun 02 '17 at 16:26
Agreed with @Damon. Got here myself because I was looking for how to create a reusable module. No private github/npm account, and one of the solutions like 'setup your own internal npm repo' seems... not ideal. For the time being, I'm copying the application structure of the ng-bootstrap project, but the process of re-using that in various applications seems unclear. — BLSully, Jun 21 '17 at 19:12
@BLSully I don't get it, if you don't publish it _somewhere_, how's it useful on your local disk? The whole point with having it as a dependency in a dep-manager such as npm is to be able to control new versions and update easily. If you do not host it on GitHub _nor_ npm, where would it be? — Lazar Ljubenović, Aug 30 '17 at 00:31

score 1 · Answer 1 · answered Jan 07 '18 at 12:05

package.json allows you to reference packages downloaded from a git repository, and this could be the one you use internally. See NPM documentation

Example of formats:

git+ssh://git@github.com:npm/npm.git#v1.0.27
git+ssh://git@github.com:npm/npm#semver:^5.0
git+https://isaacs@github.com/npm/npm.git
git://github.com/npm/npm.git#v1.0.27

So this would in your package.json give something like:

"dependencies": {
   "privatepackage":"git://localgitserver/git/privatepackage.git"
}

score 0 · Answer 2 · answered Jun 24 '19 at 08:30

I suggest that you use NX for that, it's clean easy for sharing code between applications

create an NX workspace

npx --ignore-existing create-nx-workspace MY_WORK_SPACE

you can now create multiplr application inside that workspace, they can be Angular apps or React App or a mix between them

   ng add @nrwl/angular --defaults
   ng g @nrwl/angular:application app1 // generate first app
   ng g @nrwl/angular:application app2 //generate second app

they are visible under apps directory

so now you have your apps, you can share code between apps through generating Libraries

 ng g @nrwl/angular:lib ui // ui is the name of your library

it's now avaible under libs directory

you can now work on your library by generating components and services:

ng g component sharedComponent --project=ui --export

Finally you can use your library in your apps (app1 and app2) by importing your UiModule

import { UiModule } from '@MY_WORK_SPACE/ui'; // @nameOfYourCreatedWorkspace/nameOfLibrary

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, UiModule], // import here
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

and Voila!

Reuse Angular 2 module in other app without publishing to npm?

2 Answers2