如何在角库中使用第三方库

Question

我试图在我正在开发的图书馆中包括一个第三方图书馆。要在普通的角应用程序中使用这个库，我需要执行以下操作：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    GalleryModule.forRoot(), // <-- This is the library that I want to use
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是，如果我在库中的模块中执行这个操作(GalleryModule.forRoot())，它会说：

Error during template compile of 'BaseModule'
  Function calls are not supported in decorators but 'GalleryModule' was called.

我怎么能把这个图书馆包括在我的图书馆里？

编辑

Angular CLI: 10.0.8
Node: 12.13.1
OS: linux x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

我正在创建一个角库

ng new my-lib --create-application=false

cd my-lib
ng generate library my-lib
ng build

然后我安装了依赖项：

npm install --save @ks89/angular-modal-gallery
npm install --save hammerjs mousetrap @angular/cdk
npm install --save-dev @types/mousetrap @types/hammerjs

在我的库的package.json中，将依赖项添加到peerDependency：

"peerDependencies": {
    "@angular/common": "^10.0.14",
    "@angular/core": "^10.0.14",
    "@angular/cdk": "^10.2.3",
    "@ks89/angular-modal-gallery": "^7.2.5",
    "@types/hammerjs": "^2.0.36",
    "@types/mousetrap": "^1.6.4",
    "hammerjs": "^2.0.8",
    "mousetrap": "^1.6.5"
  }

然后将依赖项添加到库中的模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GalleryModule } from '@ks89/angular-modal-gallery';

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule,
    GalleryModule.forRoot()
  ]
})
export class BaseModule { }

当我运行时: ng构建我的-lib-prod

ERROR: projects/my-lib/node_modules/@ks89/angular-modal-gallery/lib/services/keyboard.service.d.ts:27:21 - error TS2304: Cannot find name 'ExtendedKeyboardEvent'.

27     add(onBind: (e: ExtendedKeyboardEvent, combo: string) => any): void;
                       ~~~~~~~~~~~~~~~~~~~~~
projects/my-lib/node_modules/@ks89/angular-modal-gallery/lib/modal-gallery.module.d.ts:17:53 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

17     static forRoot(config?: KeyboardServiceConfig): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
Error during template compile of 'BaseModule'
  Function calls are not supported in decorators but 'GalleryModule' was called.

An unhandled exception occurred: projects/my-lib/node_modules/@ks89/angular-modal-gallery/lib/services/keyboard.service.d.ts:27:21 - error TS2304: Cannot find name 'ExtendedKeyboardEvent'.

27     add(onBind: (e: ExtendedKeyboardEvent, combo: string) => any): void;
                       ~~~~~~~~~~~~~~~~~~~~~
projects/my-lib/node_modules/@ks89/angular-modal-gallery/lib/modal-gallery.module.d.ts:17:53 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

17     static forRoot(config?: KeyboardServiceConfig): ModuleWithProviders;
                                                       ~~~~~~~~~~~~~~~~~~~
Error during template compile of 'BaseModule'
  Function calls are not supported in decorators but 'GalleryModule' was called.

Answer 1

你试过以下几种方法吗？

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule,
    GalleryModule,
  ]
})
export class BaseModule { }