Create a Library for an NPM package
Tags: angular, typescript
Published: 2020-06-27 09:32:57

The environment was:
```
Angular CLI: 9.0.7
Node: 12.14.1
OS: win32 x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.7
@angular-devkit/build-angular      0.900.7
@angular-devkit/build-ng-packagr   0.900.7
@angular-devkit/build-optimizer    0.900.7
@angular-devkit/build-webpack      0.900.7
@angular-devkit/core               9.0.7
@angular-devkit/schematics         9.0.7
@ngtools/webpack                   9.0.7
@schematics/angular                9.0.7
@schematics/update                 0.900.7
ng-packagr                         9.1.5
rxjs                               6.5.5
typescript                         3.7.5
webpack                            4.41.2
```

After running these commands

```
ng new projectx --createApplication=false
cd projectx
npm generate library projecty

```
- projectx is the topmost "workspace".
- projecty is the library name within the projects folder.
- src/lib is a npm package convention.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x88g7hhekigibqhke9fz.png)

- projecty.module.ts is the NG module definition for this package.
- public.api.ts is a file containing all public export statements.

Warning:  

We found that installing missing npm packages is best done in the root folder. When we tried it from within the lib itself, there seemed to be compiler errors when using *ng build --prod*.

**The Default Module projecty.module.ts**

- The ngModule only declares and exports the components.
- The projecty.service is only exported via the public api.
 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6amf1kelba3ovob5ip6j.png)

**The Default public.api.ts**

- exports the service
- exports the component
- exports the NG module

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uj4v1krqd2wnx0hh1wkb.png)

**ng-package.json**

Notice the error on the missing ng-packagr npm folder?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zvic4plm0ojonh3nvrup.png)

This prompted us to run...

```
// From root folder
npm install

``` 
Which looked like this:

```
PS C:\Users\John\source\private\projectx> npm install
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

> core-js@3.6.4 postinstall C:\Users\John\source\private\projectx\node_modules\@angular-devkit\build-angular\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.14.1","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 881 packages from 419 contributors and audited 1487 packages in 670.439s

46 packages are looking for funding
  run `npm fund` for details

found 3 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

```
This did not solve the ng-packagr schema problem, but we did find this in the node_module/bin directory.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/disc14fj73m7j4ygsjmf.png)

After trying both of these installs.
```
npm i ng-packagr --save-dev 
npm i ng-packagr -D
```
The schema files were still not found. But...they were in node modules folder!

Ignoring for now.

**inner package.json**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/74upo0cejcxm2hb0pk5w.png)

**tsconfig.lib.json**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qwnxehqet8ekjbi1kf5j.png)

**tsconfig.lib.prod.json**

Notice that enableIvy is set to false, which is the current recommendation (2020)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xy387zua8ot4zhv5f3rh.png)

**angular.json**

Shows the projects folder indicating this is a multi-project configuration.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6cknbrqu9tz51zeqcuft.png)

**outer package.json**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0sj956c6dcyefsn8xnst.png)

**tsconfig.json**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hpvv7372m4y917qaw6ss.png)

**Building the libaray**

```
ng build --prod
```
Results in this:

- Notice the folder is dist/projecty
- The lib folder contains component.d, service.d and module.d (Definition files for Typescript).
- The projecty definition file was automatically generated.
- The public.api.d.ts was generated.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1woineohfi2mfatjv4p1.png)

The javascript files are in the appropriate folders.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ush9pp7lrb3psi8344n.png)

**npm publish**

```
//you must have an npm userid first
npm login username
// you'll be prompted for password.
```
From the projectx\dist\projecty directory type in...
```
npm publish
// results in this
npm notice 
npm notice package: projecty@0.0.1
npm notice === Tarball Contents ===
npm notice 1.4kB  esm2015/lib/projecty.component.js
npm notice 1.5kB  esm5/lib/projecty.component.js   
npm notice 468B   esm2015/projecty.js
npm notice 468B   esm5/projecty.js
npm notice 1.2kB  fesm2015/projecty.js
npm notice 1.5kB  fesm5/projecty.js
npm notice 1.4kB  esm2015/lib/projecty.module.js
npm notice 1.5kB  esm5/lib/projecty.module.js
npm notice 1.2kB  esm2015/lib/projecty.service.js  
npm notice 1.3kB  esm5/lib/projecty.service.js
npm notice 12.9kB bundles/projecty.umd.js
npm notice 2.1kB  bundles/projecty.umd.min.js      
npm notice 738B   esm2015/public-api.js
npm notice 738B   esm5/public-api.js
npm notice 523B   package.json
npm notice 1.3kB  projecty.metadata.json
npm notice 1.7kB  fesm2015/projecty.js.map
npm notice 1.7kB  fesm5/projecty.js.map
npm notice 27.2kB bundles/projecty.umd.js.map      
npm notice 12.8kB bundles/projecty.umd.min.js.map
npm notice 1.0kB  README.md
npm notice 147B   lib/projecty.component.d.ts      
npm notice 82B    projecty.d.ts
npm notice 42B    lib/projecty.module.d.ts
npm notice 63B    lib/projecty.service.d.ts        
npm notice 124B   public-api.d.ts
npm notice === Tarball Details ===
npm notice name:          projecty
npm notice version:       0.0.1
npm notice package size:  13.7 kB
npm notice unpacked size: 74.8 kB
npm notice shasum:        e4fbd895ae66e1bfbc5072b4a1936e1c39fd86fb
npm notice integrity:     sha512-7jd9V00WMTVl9[...]v8SghuIFz9G0w==
npm notice total files:   26
npm notice
+ projecty@0.0.1
```

**As shown in NPM when logged in**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bx2s2jqnusvcjclnw61l.png)

Note we can't install to same project!
```
npm i projecty@0.0.1
npm ERR! Refusing to install package with name "projecty" under a package
npm ERR! also called "projecty". Did you name your project the same
npm ERR! as the dependency you're installing?
```
 
**Add a new application within the projects folder**
```
ng generate application demo

```
Now install our just published library.

```
 npm i projecty@0.0.1 
```
We saw the typical fsevents errors and ignored them.

Next...
  We'll show how to import our new package into a demo component.