Angular building library error when using own library in library i am building

Question

I am trying to build a library in which I am using in one of my own libraries. However it gives an error on the components that I export from the library I am using in the new library. I have no clue on how to solve this.

Full Error:

ERROR: ecarelib/ecarelib.ts(29,17): Error during template compile of 'EcareLibModule'
Function expressions are not supported in decorators Consider changing the function
expression into an exported function.
Cannot determine the module for class EcareLibComponent in
C:/Users/ArneVandenEynden/vitalsigns/Ecare.VitalSigns.Client/node_modules/ecarelib/ecarelib.d.ts!
Add EcareLibComponent to the NgModule to fix it.
Cannot determine the module for class DossierComponent in
C:/Users/ArneVandenEynden/vitalsigns/Ecare.VitalSigns.Client/node_modules/ecarelib/ecarelib.d.ts!
Add DossierComponent to the NgModule to fix it.
Cannot determine the module for class DossierListComponent in
C:/Users/ArneVandenEynden/vitalsigns/Ecare.VitalSigns.Client/node_modules/ecarelib/ecarelib.d.ts!
Add DossierListComponent to the NgModule to fix it.
Cannot determine the module for class LoginComponent in
C:/Users/ArneVandenEynden/vitalsigns/Ecare.VitalSigns.Client/node_modules/ecarelib/ecarelib.d.ts!
Add LoginComponent to the NgModule to fix it.

Library i am using MODULE:

import { NgModule, ModuleWithProviders ,APP_INITIALIZER } from '@angular/core';
import { EcareLibComponent } from './ecarelib.component';
import { DossierComponent } from './dossier/dossier.component';
import { CommonModule } from '@angular/common';
import { DossierListComponent } from './dossier-list/dossier-list.component';
import { LoginComponent } from './login/login.component';
import { FormsModule } from '@angular/forms';
import { SecurityInterceptor } from './security.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppConfigService } from './services/app-config.service';
import { AuthenticateService } from './services/authenticate.service';

// @dynamic
@NgModule({
  declarations: [EcareLibComponent, DossierComponent, DossierListComponent, LoginComponent],
  imports: [
    CommonModule,
    FormsModule
  ],
  providers: [
    {
    provide: HTTP_INTERCEPTORS,
    useClass: SecurityInterceptor,
    multi: true
  },{
    provide: APP_INITIALIZER,
    multi: true,
    deps: [AppConfigService],
    useFactory: (appConfigService: AppConfigService) => {
      return () => {
        appConfigService.loadAppConfig();
      }
    }
  }],
  exports: [EcareLibComponent, DossierComponent, DossierListComponent, LoginComponent]
})
export class EcareLibModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: EcareLibModule,
      providers: [ AppConfigService, AuthenticateService]
    };
  }
}

Library i am building MODULE:

import { NgModule } from '@angular/core';
import { VitalsignsComponent } from './vitalsigns.component';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { ModalInputComponent } from './modal-input/modal-input.component';
import { VitalSignLinesListComponent } from './vital-sign-lines-list/vital-sign-lines-list.component';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
import { EcareLibModule } from 'ecarelib'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ComboBoxComponent } from './combo-box/combo-box.component';
import { ComboBoxPipe } from './combo-box/combo-box.pipe';
import { LogService } from './services/log.service';
import { ClickOutsideDirective } from './vital-sign-lines-list/click-outside.directive';

const appRoutes: Routes = [
  { path: 'modal', component: ModalInputComponent },
  { path: 'vitalSignLinesList', component: VitalSignLinesListComponent }
];

@NgModule({
  declarations: [
    VitalsignsComponent,
    ModalInputComponent,
    VitalSignLinesListComponent,
    ComboBoxComponent,
    ComboBoxPipe,
    ClickOutsideDirective
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    EcareLibModule.forRoot(),
    NgSelectModule,
    RouterModule.forRoot(appRoutes, { enableTracing: false }),
    FormsModule,
    NgbModule
  ],
  providers: [LogService],
  exports: [VitalsignsComponent, VitalSignLinesListComponent]
})
export class VitalsignsModule {

}
```

John Velasquez · Accepted Answer · 2020-04-15 18:11:49Z

Base on the error it says

Error during template compile of 'EcareLibModule' Function expressions are not supported in decorators Consider changing the function expression into an exported function.

So consider making your useFactory value to an exported function

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: SecurityInterceptor,
      multi: true
    }, {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [AppConfigService],
      useFactory: LoadAppConfig
    }],
  exports: [EcareLibComponent, DossierComponent, DossierListComponent, LoginComponent]
})
export class EcareLibModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: EcareLibModule,
      providers: [AppConfigService, AuthenticateService]
    };
  }
}


export function LoadAppConfig(appConfigService: AppConfigService) {
  return () => appConfigService.loadAppConfig();
}

Collectives™ on Stack Overflow

Angular building library error when using own library in library i am building

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related