How to use a third-party library within an angular library

1.3k views Asked by At

I am trying to include a third party library within a library that I am developing. To use this library in a normal angular application I need to do the following:

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

But if I do it (GalleryModule.forRoot()) inside my module in the library it says that:

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

How can I include this library in my library?

EDIT

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

I am creating an angular library

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

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

Then I installed the dependency:

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

Inside my library's package.json add the dependency to 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"
  }

Then add the dependency to the module inside the library:

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 { }

When I run: 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.
1

There are 1 answers

2
Francesco Colamonici On

Have you tried the following?

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