安装Angular-Markdown-Editor后出现NullInjectorError问题求助

1. 补全依赖安装 #

angular-markdown-editor依赖ngx-markdown、bootstrap和font-awesome，先确保这些依赖已安装：

npm install angular-markdown-editor ngx-markdown bootstrap font-awesome

2. 修正AppModule配置 #

该模块必须通过forRoot()方法初始化，且需要搭配ngx-markdown的模块配置，同时添加HttpClientModule（ngx-markdown的依赖项）。修改后的app.module.ts如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { MarkdownModule } from 'ngx-markdown';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularMarkdownEditorModule } from 'angular-markdown-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    MarkdownModule.forRoot(),
    AppRoutingModule,
    AngularMarkdownEditorModule.forRoot({
      // 可选配置：指定图标库为FontAwesome，默认是bootstrap
      iconlibrary: 'fa'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 导入样式文件 #

在项目的angular.json中添加bootstrap和font-awesome的样式引用（或在src/styles.css中导入）：

• 方式1：angular.json
  找到styles数组，添加：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "src/styles.css"
]

• 方式2：styles.css
  添加导入语句：

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";

关键说明 #

• AngularMarkdownEditorModule必须通过forRoot()初始化，否则会缺少必要的服务提供者，这是你之前配置的核心问题。
• ngx-markdown是angular-markdown-editor的底层依赖，必须导入并初始化MarkdownModule。
• HttpClientModule是ngx-markdown加载远程markdown内容的必要依赖，即使你不使用远程加载，也需要导入以避免依赖错误。

内容的提问来源于stack exchange，提问作者Chaker Dorbane