代码之家  ›  专栏  ›  技术社区  ›  ufk

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

  •  2
  • ufk  · 技术社区  · 7 年前

    @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.ts cars.component.spec.ts 文件 并被移除 export * from './lib/cars.component'; public_api.ts 添加了我的代码。

    @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
    

    当我试图建立 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 汽车 我得到的图书馆:

    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 Multiple projects are defined; please specify a project name 尽管我确实指定了一个项目。

    有什么想法吗?

    如能提供有关此问题的任何信息,我们将不胜感激。

    谢谢您!

    1 回复  |  直到 7 年前
        1
  •  2
  •   ufk    7 年前

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

    推荐文章