jfcere / ngx-markdown

Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to HTML with syntax highlight and more...
https://jfcere.github.io/ngx-markdown
MIT License
1.03k stars 180 forks source link

NullInjectorError in angular library project #509

Open AngularIsAwfull opened 3 months ago

AngularIsAwfull commented 3 months ago

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:

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

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 commented 3 months ago

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 commented 3 months ago

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

jfcere commented 2 months ago

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 commented 2 months ago

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 commented 3 weeks ago

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

AngularIsAwfull commented 3 weeks ago

@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 commented 3 weeks ago

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.