how to properly create a library project with Angular CLI 7.0.0-RC2

Question

:) I installed @angular/cli@next globally with yarn in order to create an angular7 project.

I'm trying to create a library project to add several libraries that I wrote that I want to use in several projects.

I created the library project with the command ng new tuxin-libs --style=scss --experimental-ivy and types No on adding Routing since it's gonna be just a library project.

then I entered tuxin-libs and created a library with ng generate library cars --prefix=tuxin and created a component called car-type with ng generate component car-type --project=cars

I don't need the main cars component so I deleted the cars.component.ts and cars.component.spec.ts file and removed export * from './lib/cars.component'; from public_api.ts and added my code.

now I use @angular/material, apollo-angular and ngx-webstorage-service. and I'm really confused on how to add it to my library project

some say to add it as peer dependency. so I entered projects/cars and I tried installing these libraries as peer dependencies with the following commands:

yarn add --peer @angular/material @angular/cdk @angular/animations
yarn add --peer apollo-angular   apollo-angular-link-http   apollo-link   apollo-client   apollo-cache-inmemory   graphql-tag   graphql
yarn add --peer ngx-webstorage-service

then when I try to build the cars module by entering the root directory of my library project and execute ng build cars I get

BUILD ERROR
Cannot read property 'isSkipSelf' of null
TypeError: Cannot read property 'isSkipSelf' of null
    at ProviderElementContext._getDependency (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/@angular/compiler/bundles/compiler.umd.js:11504:22)
    at /Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/@angular/compiler/bundles/compiler.umd.js:11449:64
    at Array.map (<anonymous>)
    at /Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/@angular/compiler/bundles/compiler.umd.js:11449:30
    at Array.map (<anonymous>)
    at ProviderElementContext._getOrCreateLocalProvider (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/@angular/compiler/bundles/compiler.umd.js:11427:67)
    at /Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/@angular/compiler/bundles/compiler.umd.js:11325:27
    at Array.forEach (<anonymous>)
    at new ProviderElementContext (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/@angular/compiler/bundles/compiler.umd.js:11322:53)
    at TemplateParseVisitor.visitElement (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/@angular/compiler/bundles/compiler.umd.js:15093:35)

when I try instead to add it as regular dependencies, same yarn commands as before just without the --peer parameters, and then try to compile the cars library I get:

Building Angular Package
Building entry point 'cars'
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
No name was provided for external module 'graphql-tag' in output.globals – guessing 'gql'
No name was provided for external module 'apollo-angular' in output.globals – guessing 'i1'
No name was provided for external module 'ngx-webstorage-service' in output.globals – guessing 'ngxWebstorageService'
Minifying UMD bundle
Copying declaration files
Writing package metadata
Distributing npm packages with 'dependencies' is not recommended. Please consider adding @angular/animations to 'peerDependencies' or remove it from 'dependencies'.

BUILD ERROR
Dependency @angular/animations must be explicitly whitelisted.
Error: Dependency @angular/animations must be explicitly whitelisted.
    at Object.keys.forEach.dep (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/ng-packagr/lib/ng-v5/entry-point/write-package.transform.js:125:23)
    at Array.forEach (<anonymous>)
    at checkNonPeerDependencies (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/ng-packagr/lib/ng-v5/entry-point/write-package.transform.js:119:44)
    at /Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/ng-packagr/lib/ng-v5/entry-point/write-package.transform.js:93:13
    at Generator.next (<anonymous>)
    at /Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/ng-packagr/lib/ng-v5/entry-point/write-package.transform.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/ng-packagr/lib/ng-v5/entry-point/write-package.transform.js:3:12)
    at writePackageJson (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/ng-packagr/lib/ng-v5/entry-point/write-package.transform.js:74:12)
    at Object.<anonymous> (/Users/ufkfir/projects/wd-proj/tuxin-libs/node_modules/ng-packagr/lib/ng-v5/entry-point/write-package.transform.js:41:11)

this errors happens exactly the same using angular6 cli and not the latest angular7... but anyhow.. now I'm using 7 so I want it to be fixed here :)

I tried also using ng add @angular/material --project=cars and ng add apollo-angular --project=cars, in both cases I get Multiple projects are defined; please specify a project name although I did specify a project.

any ideas?

any information regarding this issue would be greatly appreciated.

thank you!

Answer 1

ok.. so I needed to add the relevant libraries as peer dependencies in the package.json of the cars project, and to add it as regular dependencies to the main library project.

that's it :) simple