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

问题描述

我正在尝试将第三方库包含在我正在开发的库中。 要在普通的角度应用程序中使用此库,我需要执行以下操作:

@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建立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.

解决方法

您尝试过以下吗?

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