Angular Workspace/Monorepo, forRoot giving me errors. "A value for 'forRoot' cannot be determined statically, as it is an external declaration."

Question

I'm having a library called Themex.

//envInjector.ts
    import {InjectionToken} from "@angular/core";
    export const ENVIRONMENT = new InjectionToken<{[key: string]: any}>('ENVIRONMENT');

//themex.module.ts

import {ENVIRONMENT} from "./envInjector";
 
    
    @NgModule({
      declarations: [
    ThemexComponent,
    ModalComponent,
    UploadComponent,
    AlertComponent,

  ],
  imports: [
    CommonModule
  ],
  exports: [
    ThemexComponent,
    ModalComponent,
    UploadComponent,
    AlertComponent,
  ],
  providers: []
})

export class ThemexModule {
  static forRoot(config: {[key: string]: any}): ModuleWithProviders<any> {
    return {
      ngModule: ThemexModule,
      providers: [
        {
          provide: ENVIRONMENT,
          useValue: config
        }
      ]
    };
  }

}

The library is imported into an angular project inside the same angular workspace.

import {ThemexModule} from "themex";

If I'm importing it as given above I get an error.

"A value for 'forRoot' cannot be determined statically, as it is an external declaration. "

However, if I'm importing it as given below, everything seems to work.

import {ThemexModule} from "../../../themex/src/lib/themex.module";

I'm using

Angular CLI: 12.0.5
Node: 14.16.1

My Compiler Options. tsConfig.json

All the errors are when I'm doing an ng serve. I haven't tried build.

Answer 1

I've had this problem the last few days, and think I've found the solution. For me, it occurred when I was upgrading the dependencies on some of our libraries from Angular 10.

Our solution was making sure that the ModuleWithProviders return type was strongly typed for the module, so in your case:

export class ThemexModule {
  static forRoot(config: {[key: string]: any}): ModuleWithProviders<ThemexModule> {
    [...]
}