DEV Community

John Peters
John Peters

Posted on • Edited on

Create a Library for an NPM package

#angular #typescript

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
Enter fullscreen mode Exit fullscreen mode

After running these commands

ng new projectx --createApplication=false
cd projectx
npm generate library projecty
Enter fullscreen mode Exit fullscreen mode
  • projectx is the topmost "workspace".
  • projecty is the library name within the projects folder.
  • src/lib is a npm package convention.

Alt Text

  • 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

The Default public.api.ts

  • exports the service
  • exports the component
  • exports the NG module

Alt Text

ng-package.json

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

Alt Text

This prompted us to run...

// From root folder
npm install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

After trying both of these installs.

npm i ng-packagr --save-dev 
npm i ng-packagr -D
Enter fullscreen mode Exit fullscreen mode

The schema files were still not found. But...they were in node modules folder!

Ignoring for now.

inner package.json

Alt Text

tsconfig.lib.json

Alt Text

tsconfig.lib.prod.json

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

Alt Text

angular.json

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

Alt Text

outer package.json
Alt Text

tsconfig.json
Alt Text

Building the libaray

ng build --prod
Enter fullscreen mode Exit fullscreen mode

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

The javascript files are in the appropriate folders.

Alt Text

npm publish

//you must have an npm userid first
npm login username
// you'll be prompted for password.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

As shown in NPM when logged in

Alt Text

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?
Enter fullscreen mode Exit fullscreen mode

Add a new application within the projects folder

ng generate application demo
Enter fullscreen mode Exit fullscreen mode

Now install our just published library.

 npm i projecty@0.0.1
Enter fullscreen mode Exit fullscreen mode

We saw the typical fsevents errors and ignored them.

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

Top comments (2)

Collapse
 
katnel20 profile image
Katie Nelson •

Why is it coming up as 9.0.7? I thought Angular 10 is out already.

Collapse
 
jwp profile image
John Peters •

Yes it did just this past week. I haven't upgraded yet, but good point. I'll put that in at top of article. Thanks Katie Nelson.

Read next

mrsupercraft profile image

Interactive Code Editor Tutorial: Managing Dynamic Content with react-codemirror

MrSuperCraft -

shafayeat profile image

The Evolution of JavaScript

Shafayet Hossain -

lucaspereiradesouzat profile image

Autenticação com JWT no Frontend e Backend: Implementando com Node.js e ReactJS (em TypeScript)

Lucas Pereira de Souza -

omidnikrah profile image

🚀 Introducing Figma Sprite Generator – Effortlessly Create PNG Sprites from Your Figma Icons

Omid Nikrah -