receiving-error ERROR...

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

// 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

Continue reading...