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.
- 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.
The Default public.api.ts
- exports the service
- exports the component
- exports the NG module
ng-package.json
Notice the error on the missing ng-packagr npm folder?
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.
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
tsconfig.lib.json
tsconfig.lib.prod.json
Notice that enableIvy is set to false, which is the current recommendation (2020)
angular.json
Shows the projects folder indicating this is a multi-project configuration.
outer package.json
tsconfig.json
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.
The javascript files are in the appropriate folders.
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
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.
Top comments (2)
Why is it coming up as 9.0.7? I thought Angular 10 is out already.
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.