NullInjectorError in angular library project

[AngularIsAwfull]

Hi! I have an Angular library project which dosen't have an app.module but I would love to have ngx-markdown working inside. The project must to use angular 15.2. The installed version of ngx-markdown is 15.1.2 (the only version I was able to install due to security limitations in packages). To show the components I use Storybook 7.6. I tried doing this in the component that was supposed to use markdown:

• xyz.module.ts

import { MarkdownModule } from 'ngx-markdown';
@NgModule({
    declarations: [
        XyzComponent
    ],
    imports: [
        CommonModule,
        MarkdownModule
    ],
    exports: [
        XyzComponent
    ]
})
export class XyzModule {
}

• template: <markdown [data]="content"></markdown> where content is valid markdown string.

I expected this to work, but instead I got the error:

ERROR NullInjectorError: R3InjectorError(Standalone[StorybookWrapperComponent])[MarkdownService -> MarkdownService -> MarkdownService]: 
  NullInjectorError: No provider for MarkdownService!

so I tried to add the line providers: [MarkdownService] to xyz.module.ts, this changes the which is now ERROR NullInjectorError: R3InjectorError(Standalone[StorybookWrapperComponent])[MarkdownService -> InjectionToken SECURITY_CONTEXT -> InjectionToken SECURITY_CONTEXT -> InjectionToken SECURITY_CONTEXT]: NullInjectorError: No provider for InjectionToken SECURITY_CONTEXT!. At this point I have no idea how to fix that.

[jfcere]

Hi @AngularIsAwfull,

Did you import the MarkdownModule with .forRoot() in the AppModule?

The MarkdownModule.forRoot() is the way to provide the MarkdownService to your application.

[AngularIsAwfull]

Hi @jfcere, I don't have any AppModule, I have an Angular library.

[jfcere]

How are you planning to expose global configurations for your library? If you have a module/provider function for that I would suggest importing MarkdownModule.forRoot() there otherwise just import with forRoot() in every module.

[AngularIsAwfull]

I am exposing the ng-modules through the public-api.ts file. So I guess I will have to import MarkdownModule.forRoot() into all the ng-modules that use markdown, is it correct?

[jfcere]

Have you been able to resolve the issue with the proposed solution?

[AngularIsAwfull]

@jfcere , sadly no. I was still waiting for an answer about this.

I am exposing the ng-modules through the public-api.ts file. So I guess I will have to import MarkdownModule.forRoot() into all the ng-modules that use markdown, is it correct?

So for now this implentation is blocked, I think I'll be able to work on in when my project will be updated with the newer angular version which will use the standalone components and discontinue the ng-modules.

[jfcere]

I would personally choose to expose a provide-function for global configuration of your library to be used in the app.config.ts. That way, you could use provideMarkdown() inside your provide-function.

Same goes for module configuration, having a global module to be imported in the AppModule would make things easier and is pretty standard imho.

[zaeemali272]

thanks, worked for me

[jfcere]

The provided solution should fix the problem, feel free to reply if you're still having issues.