Angular using npm local libraries leads to DI error : ERROR Error: NG0203: inject() must be...

[solved] See my comment to get answer

[original title] Angular libraries that expose a Service requiring Environment : ERROR Error: NG0203: inject() must be called from an injection context

[original post] I have a problem building a simple library (angular 17.3) that contain a DummyService (for this issue, it's simpler to use a DummyService) that use environment file.

I started a project with angular cli ng new dummy-library --no-create-application and i also added a demo project to use the library cd dummy-library && ng generate project demo.

Then i first build an InjectionToken to be able to expose the environment file as a service :

export const ENVIRONMENT_TOKEN = new InjectionToken<Environment>('Environment');


Then i reuse this in my service like this :

@Injectable({
providedIn: 'root'
})
export class DummyService {
private environment: Environment = inject(ENVIRONMENT_TOKEN);

log() {
console.log(this.environment);
}
}


Both are added in the public-api.ts that export all required files to expose them :

export * from './lib/environment.token';
export * from './lib/dummy.service';


I can build the library with a command like this ng build --project=dummy-library

Now i can use the library from the demo app really easily and it works well. I just have to provide the service in the component like this :

import { DummyService, ENVIRONMENT_TOKEN } from 'dummy-library'; // it import from dist folder created during ng build process

providers: [
DummyService,
{
provide: ENVIRONMENT_TOKEN,
useValue: environment
}
],


And inject the serice to the appComponent :

DummyService = inject(DummyService);


Perfect ! But, if i want to use the library in another project using npm, then i have an injection problem.

Fist i create my new application ng new anotherApplication;

Then i add the library cd another-application && npm install ../dummy-library/dist/dummy-library/ and i create the environment ng generate environment

Then i provide the service in the AppComponent like i did previously and i inject the DummyService in the AppComponent. I serve the app ng serve. The app is built and served, but in the browser, i have an error in the console :

main.ts:5 ERROR Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
at injectInjectorOnly (core.mjs:1093:15)
at ɵɵinject (core.mjs:1106:42)
at NodeInjectorFactory.DummyService_Factory [as factory] (dummy.service.ts:7:26)
at getNodeInjectable (core.mjs:5984:44)
at searchTokensOnInjector (core.mjs:5911:16)
at lookupTokenUsingNodeInjector (core.mjs:5860:34)
at getOrCreateInjectable (core.mjs:5772:23)
at ɵɵdirectiveInject (core.mjs:10548:19)
at ɵɵinject (core.mjs:1106:42)
at inject (core.mjs:1192:12)


If i inject the environment in the Appcomponent, i can debug and see that it works. But i cannot inject the DummyService that rely on the InjectionToken.

Any idea is welcome.

Continue reading...