How to setup angular project as a dependency in package.json of another angular project

Question

I have three different Angular cli projects (X, Y, Z). I want to make [X] as a parent project while I want to add Y and Z as npm package dependencies to X. That means [X] pa

Answer 1

Those are all the steps, if any of it is not clear let me know. Once you have the two cli projects created:

1) Export the component you want to use from your library project:

@NgModule({
  ...
  exports: [MyComponent]
  ...

2) Install ng-packagr:

npm install ng-packagr --save-dev

3) Add two files to your library project, ng-package.json and public_api.ts:

ngpackage.json content:

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

4) Export the module you want to use in the main project:

export * from './src/app/modules/whatever.module'

5) In your library project edit the package.json file to contain this:

"scripts": {
  ...
  "packagr": "ng-packagr -p ng-package.json"
}

6) Run npm run packagr, and once the process is complete you’ll find a dist folder in your project root. This is your component library.

7) cd into the dist folder and run npm pack. This will create a file in the root of the dist folder.

8) Then you have the option of publish it on npm, or consume it directly from bitbucket, github, etc. Just in the package.json of the main project add the dependency.

9) Once installed, you can import your component into any application’s app.module.ts, by including it in its @NgModule imports array…

import { HeaderModule } from 'my-package-name';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HeaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }