Angular15+Nx单体仓库中ngx-highlightjs绑定highlight属性报错

核心问题：模块未正确导入HighlightModule #

你的SharedModule虽然导入了HighlightModule类，但没有在@NgModule的imports数组中声明该模块。Angular要求必须将模块显式加入imports，才能使用其中包含的指令、组件等特性。

修复步骤 #

1. 更新SharedModule的imports配置
   修改模块代码，把HighlightModule添加到imports数组中：

   import {
       HighlightAutoResult,
       HighlightLoader,
       HighlightModule,
       HIGHLIGHT_OPTIONS,
       HighlightOptions,
   } from 'ngx-highlightjs';
   
   ...
   
   @NgModule({
       imports: [
           // 保留你已有的其他模块
           HighlightModule // 新增这一行
       ],
       declarations: [
           // 确保你的CodeFromUrlComponent在这里声明（如果它属于SharedModule）
       ],
       providers: [
           {
               provide: HIGHLIGHT_OPTIONS,
               useValue: <HighlightOptions>{
                   lineNumbers: false,
                   coreLibraryLoader: () => import('highlight.js/lib/core'),
                   languages: {
                       java: () => import('highlight.js/lib/languages/java'),
                       xml: () => import('highlight.js/lib/languages/xml'),
                       json: () => import('highlight.js/lib/languages/json'),
                   },
               },
           },
       ]
   })
   export class SharedModule { }
   

2. 确认组件所在模块的依赖
   如果CodeFromUrlComponent不属于SharedModule，而是在其他特性模块中，需要确保该特性模块导入了SharedModule（或直接导入HighlightModule）：

   @NgModule({
       imports: [SharedModule], // 或者直接写HighlightModule
       declarations: [CodeFromUrlComponent]
   })
   export class YourFeatureModule { }
   

3. 关于Nx懒加载的说明
   你怀疑的懒加载不是问题根源——ngx-highlightjs的语言懒加载是正常设计，与Angular模块的懒加载逻辑不冲突。只要模块正确导入，编译器就能识别[highlight]指令。

额外检查项 #

• 版本匹配：你使用的ngx-highlightjs@10.0.0确实兼容Angular 15，这部分无需调整。
• 清理缓存：在Nx仓库中执行nx reset或npm run clean，重新构建项目，避免缓存导致的识别异常。

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