安装Angular 18后ng-katex库无法使用，如何实现二者兼容？

• 升级ng-katex至最新版本
  旧版ng-katex大概率未适配Angular 18的API变化，先执行升级命令：

  npm install ng-katex@latest
  # 或使用yarn
  yarn add ng-katex@latest
  

• 适配Angular 18的独立组件模式
  Angular 18默认启用独立组件，若你的项目使用该模式，需在目标组件的imports数组中显式引入NgKatexModule：

  import { NgKatexModule } from 'ng-katex';
  
  @Component({
    selector: 'app-math-component',
    standalone: true,
    imports: [NgKatexModule],
    template: `<ng-katex [equation]="'E=mc^2'"></ng-katex>`
  })
  export class MathComponent {}
  

  若仍使用NgModule架构，只需在AppModule的imports中添加NgKatexModule即可。

• 同步更新依赖的katex核心库
  ng-katex依赖katex核心包，版本不匹配会导致运行时错误，执行命令更新：

  npm install katex@latest
  

• 修复ESBuild构建兼容性
  Angular 18默认使用ESBuild，若构建时出现CommonJS模块解析错误，需在angular.json的构建配置中添加允许的CommonJS依赖：

  "architect": {
    "build": {
      "options": {
        "allowedCommonJsDependencies": ["katex", "ng-katex"],
        // 其他配置...
      }
    }
  }
  

• 手动适配源码（终极方案）
  若官方未更新ng-katex支持Angular 18，可fork仓库进行源码修改：

  1. 修改仓库package.json中Angular相关依赖版本为^18.0.0
  2. 调整组件/模块的装饰器写法，适配Angular 18的API（比如移除已废弃的装饰器选项）
  3. 本地构建仓库：npm run build
  4. 在项目中安装本地构建的包：npm install ../path/to/forked-ng-katex

• 确保katex样式正确导入
  缺少katex样式会导致公式渲染异常，可在angular.json的styles数组中添加：

  "styles": [
    "src/styles.css",
    "node_modules/katex/dist/katex.min.css"
  ]
  

  或在组件样式中导入：

  @import 'katex/dist/katex.min.css';
  

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