how can i export a module from one angular2-cli project to another?

in order to publish an angular library first of all you should create your own public API module (project 1), and with a packager (like ng-Packagr) pack the library. and finally use your library in other projects (project 2)

project 1:

  1. in the @NgModule decorator, identify the export components, in export array section, like below example:

exports: [ReviewComponent, ]

  1. and modify package.json file. identity packager in script section:

    "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", **"packagr": "ng-packagr -p ng-package.json"** }

  2. create ng-package.json config:

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

  3. create public_api.ts config. that say's which module should be packed for export purpose:

export * from './src/app/reg-review/reg-review.module'

  1. run the following command:

npm run packagr

  • after your package is created go to the dist subfolder and run this command: npm pack

project 2:

  • refrence to the library( which were build in dist subfolder of project 1)npm install ../ngLibs/reg/registeration-0.0.0.tgz --save
    • import your desigerd module and use it import { RegisterReviewModule } from 'registeration'

you can take advantage of these addresses:

https://www.npmjs.com/package/ng-packagr

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e


There are multiple options here, depending on what you want to achieve you might pick one over another:

  • there can be multiple apps within the same CLI project, the apps property in the config file is an array
  • one can use tools like ng-packagr to extract and publish external modules
  • one can use Nx to manage all apps and libraries in a monorepo like approach
  • could use yarn workspaces to achieve a similar monorepo approach
  • if you want to share components look at tools like Bitsrc
  • etc.

In the end it's about what requirements you have and how you want to work within your company.

Tags:

Angular