2

:) 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!

1 Answer 1

2

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.