Angular 18集成angular-markdown-editor报错及UI样式问题求助

一、解决NullInjectorError报错 #

你遇到的NullInjectorError是因为独立组件（AppComponent）无法获取markdownEditorConfig配置。Angular 18默认采用独立组件模式，你在AppModule中通过AngularMarkdownEditorModule.forRoot()设置的配置不会自动传递给独立组件。

修复步骤： #

1. 删除AppModule中AngularMarkdownEditorModule.forRoot()的导入（独立组件模式下该模块配置无效）
2. 在app.config.ts中使用组件专属的配置提供者替换直接导入模块：

// app.config.ts
import { provideAngularMarkdownEditor } from 'angular-markdown-editor';

export const appConfig: ApplicationConfig = {
  providers: [
    // 保留其他原有providers
    provideAngularMarkdownEditor({ iconlibrary: 'fa' }) // 替换原有的AngularMarkdownEditorModule
  ],
};

3. 保持AppComponent的imports数组中AngularMarkdownEditorModule的引入不变。

二、移除全局Bootstrap依赖并修复UI样式 #

angular-markdown-editor的UI依赖Bootstrap的基础布局、按钮、表单等样式，无需全局引入完整Bootstrap，可通过以下两种方式解决：

方案1：仅引入Bootstrap必要样式片段 #

1. 安装Bootstrap（未安装时执行）：

npm install bootstrap

2. 在src/styles.scss中仅导入组件所需的核心样式：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/utilities";

方案2：自定义样式覆盖 #

若不想依赖Bootstrap，可编写自定义SCSS修复样式结构：

// src/app/app.component.scss
.angular-markdown-editor {
  .btn-toolbar {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .btn-primary {
    background-color: #0d6efd;
    color: #fff;
  }
  .btn-primary:hover {
    background-color: #0b5ed7;
  }
  .form-control {
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    width: 100%;
  }
}

额外注意：Font Awesome依赖 #

你配置了iconlibrary: 'fa'，需确保已安装并引入Font Awesome：

npm install @fortawesome/fontawesome-free

在src/styles.scss中添加：

@import "@fortawesome/fontawesome-free/css/all.css";

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