:) 我使用yarn全局安装了@angular/cli@next
,以便创建一个Angular7项目。
我正在尝试创建一个库项目来添加我编写的几个库,我想在多个项目中使用这些库。
我使用命令 ng new tuxin-libs --style=scss --experimental-ivy
创建了库项目,并在添加路由时键入 No
因为它将是只是一个图书馆项目。
然后我输入 tuxin-libs
并使用 nggeneratelibrary cars --prefix=tuxin
创建了一个库,并创建了一个名为 car-type
的组件code> 与 ng 生成组件 car-type --project=cars
我不需要主要的 cars 组件,因此删除了 cars.component.ts
和 cars.component.spec.ts
文件
并从 public_api.ts
中删除了 export * from './lib/cars.component';
并添加了我的代码。
现在我使用@angular/material
、apollo-angular
和ngx-webstorage-service
。我真的很困惑如何将它添加到我的图书馆项目
有人说将其添加为对等依赖项。所以我输入了 projects/cars
并尝试使用以下命令将这些库安装为对等依赖项:
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
然后,当我尝试通过进入库项目的根目录并执行 ng build cars
来构建 cars
模块时,我得到了
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)
当我尝试将其添加为常规依赖项时,使用与之前相同的 yarn 命令,只是没有 --peer
参数,然后尝试编译 cars
库得到:
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)
使用 Angular6 cli 而不是最新的 Angular7 时发生的错误完全相同...但无论如何..现在我使用的是 7,所以我希望它在这里得到修复:)
我还尝试使用 ng add @angular/material --project=cars
和 ng add apollo-angular --project=cars
,在这两种情况下我都得到 定义了多个项目;请指定项目名称
,尽管我确实指定了项目。
有什么想法吗?
任何有关此问题的信息将不胜感激。
谢谢!
最佳答案
好的..所以我需要在 cars 项目的 package.json 中添加相关库作为对等依赖项,并将其作为常规依赖项添加到主库项目中。
就是这样:)简单
关于angular - 如何使用 Angular CLI 7.0.0-RC2 正确创建库项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52751659/