如何使用Angular CLI 7.0.0-RC2正确创建库项目

时间:2018-10-11 03:18:19

标签: angular angular-cli

:)我在@angular/cli@next上安装了纱线,以创建一个angular7项目。

我正在尝试创建一个库项目,以添加我编写的要在多个项目中使用的多个库。

我使用命令ng new tuxin-libs --style=scss --experimental-ivy创建了一个库项目,并在添加路由时键入了No,因为它只是一个库项目。

然后我进入tuxin-libs并使用ng generate library cars --prefix=tuxin创建了一个库,并使用car-type创建了一个名为ng generate component car-type --project=cars的组件

我不需要主要的汽车部件,因此我删除了cars.component.tscars.component.spec.ts文件 并从export * from './lib/cars.component';中删除了public_api.ts,并添加了我的代码。

现在我使用@angular/materialapollo-angularngx-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

然后,当我尝试通过输入图书馆项目的根目录来构建cars模块并执行ng build 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=carsng add apollo-angular --project=cars,尽管我确实指定了一个项目,但在两种情况下我都得到了Multiple projects are defined; please specify a project name

有什么想法吗?

有关此问题的任何信息将不胜感激。

谢谢!

1 个答案:

答案 0 :(得分:2)

好..所以我需要在cars项目的package.json中将相关库添加为对等依赖项,并将其作为常规依赖项添加到主库项目中。

就这样:)简单