receiving-error ERROR NullInjectorError:R3InjectorError(Standalone[_AppComponent])[markdownEditorConfig ->markdownEditorConfig ->markdownEditorConfig]

i am working on the angular cli 18 and want to implement angular-markdown-editor and I have followed the instructions on this link https://github.com/ghiscoding/angular-markdown-editorafter all the steps and running ng-serve I kept getting the error as shown in the picture.error in browser console also if i am remove the bootstrap style in the angular.json than ui is like and if i am not remove the bootstrap style in the angular.json than ui is like so i want this ui without including bootstrap style in angular.json

also

// src/app/app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Injectable, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { ToastrModule } from 'ngx-toastr';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { from, Observable } from 'rxjs';
import { AngularMarkdownEditorModule } from 'angular-markdown-editor';

@Injectable()
@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    SharedModule,
    RouterModule,
    FormsModule,
    CommonModule,
    TranslateModule,
    ReactiveFormsModule,
    L10nTranslationModule.forRoot(l10nConfig, {
      translationLoader: TranslationLoader,
    }),
    ToastrModule.forRoot({
      timeOut: 3000,
      positionClass: 'toast-top-right',
      newestOnTop: false,
      progressBar: true,
    }),
    AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initL10n,
      deps: [L10nLoader],
      multi: true,
    },
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {
  constructor(private translationService: L10nTranslationService) {
    const savedLanguage = localStorage.getItem('language') || 'en-US';
    this.translationService.setLocale({ language: savedLanguage });
  }
}

and this is config file also

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideToastr } from 'ngx-toastr';
import { provideNoopAnimations } from '@angular/platform-browser/animations';
import { TranslationLoader } from './app.module';
import { l10nConfig } from './l10n-config';
import { provideL10nIntl, provideL10nTranslation } from 'angular-l10n';
import { AngularMarkdownEditorModule } from 'angular-markdown-editor';


export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideToastr(),
    provideNoopAnimations(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideL10nTranslation(l10nConfig, {
      translationLoader: TranslationLoader,
    }),
    provideL10nIntl(),
    AngularMarkdownEditorModule,
  ],
};

and this is app componenent .ts and

import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
import {
  ActivatedRoute,
  Router,
  RouterLink,
  RouterOutlet,
  NavigationEnd
} from '@angular/router';
import { CommonModule } from '@angular/common';
;
import { AngularMarkdownEditorModule } from 'angular-markdown-editor';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule , AngularMarkdownEditorModule , FormsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
title = ''
}

here is html file

  <angular-markdown-editor
  textareaId="editor1"
  >
</angular-markdown-editor>

i want to show the result like this https://ghiscoding.github.io/angular-markdown-editor/#/reactive-editor but getting error what is the issue in config file

Just adding the AngularMarkdownEditorModule to the providers array does not add the providers. We need to use the same method as seen in the original code using forRoot to import the providers, this will ensure that markdownEditorConfig is made available for the service to use.

You can use importProvidersFrom to add the providers. But I think it is not needed, you can try two approaches.

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' })
  ],
};

OR

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    importProvidersFrom(AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' })),
  ],
};