Angular Library which is used by another app produces error: Function calls are not supported in decorators but 'LoggerModule' was called

Question

I wrote an angular library with some services to use this in different angular applications. Everything works fine without --prod, so without AOT compile, in the angular application.

Generating the library with ng-packagr as well as with the cli as well as with some different yeoman generators produces everytime the same error. Besides I tried different ng-versions (5.x.x, 6.x.x & 7.x.x). But in all cases everytime (with AOT) the same error when I call LoggerModule.forRoot() in the app.module of the application:

ERROR in Error during template compile of 'AppModule' 
Function calls are not supported in decorators but 'LoggerModule' was called.

I read many articles about this topic, tried different angularCompilerOptions in tsconfig. Any further ideas out there? The module works fine without AOT (but this is no option for us)...

NgModule of the library:

@NgModule({
  declarations: [],
  imports: [],
  providers: []
})
export class LoggerModule {

  static forRoot(): ModuleWithProviders {
    return {
        ngModule: LoggerModule,
        providers: [LoggerService]
    }
  }
}

NgModule of the application:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoggerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [AppComponent]
})
export class AppModule {
}

Please show your NgModule definition. This error usually occurs if you're using a language feature that is currently not supported by the AOT compiler. The AOT compiler only understands a subset of Javascript: https://angular.io/guide/aot-compiler#phase-1-analysis — Michael Kang, Oct 21 '18 at 19:27
Please show your ngModule with "LibModule" imported (that is where the error is being reported) — Michael Kang, Oct 22 '18 at 15:07

score 1 · Answer 1 · answered Oct 21 '18 at 23:27

1

Declare your forRoot outside of your module definition:

import { ModuleWithProviders } from ‘@angular/core’;
export const forRoot: ModuleWithProviders = LoggerModule.forRoot();

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
        BrowserModule,
       AppRoutingModule,
       forRoot
   ],
   providers: [],
   bootstrap: [AppComponent],
   entryComponents: [AppComponent]
})
export class AppModule {
}

answered Oct 21 '18 at 23:27

Michael Kang

52,003
16
103
135

Make sure you import ModuleWithProviders – Michael Kang Oct 22 '18 at 13:37
Yes, it is imported. – JV3 Oct 22 '18 at 13:47
Could you show your module that has "'LibModule" imported? – Michael Kang Oct 22 '18 at 15:07
Not sure, is this the actual code that shows the error, or is this a simplified version of it? Does LoggerModule have a forRoot with arguments? I see nothing wrong with your code – Michael Kang Oct 22 '18 at 16:19
Yeah, that's all. I don't think that the code of any module is the problem. I create the bundle of the library with ng-packagr. Maybe I have to set some angularCompilerOptions or something else? – JV3 Oct 22 '18 at 20:17
Do you by chance have an incorrect import? Ie instead of importing the package, autocomplete pointed you to a src directory - that would be my guess – Michael Kang Nov 10 '18 at 03:24
Excelent!!! After many trieds, finally that work! Thanks – Arthur Cabral Jul 07 '21 at 13:47

score 0 · Answer 2 · answered Mar 25 '21 at 22:42

0

put

"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true }

into your tsconfig.json

answered Mar 25 '21 at 22:42

brijeshchavda

35
5

Angular Library which is used by another app produces error: Function calls are not supported in decorators but 'LoggerModule' was called

2 Answers2