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

Question

我正在尝试在我正在开发的库中包含第三方库。 要在普通的 Angular 应用程序中使用这个库，我需要执行以下操作：

@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 build my-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 { }