Angular Web Components中*ngIf指令报错问题求助

问题根源 #

你遇到的Can't bind to 'ngIf' since it isn't a known property of 'div'错误，核心原因是将NavBarComponent转为自定义元素时，组件依赖的CommonModule（提供*ngIf等内置指令）未被正确关联到自定义元素的运行上下文。直接在AppModule中引用跨项目的NavBarComponent，Angular无法识别组件所需的模块依赖。

修复方案 #

步骤1：确保SharedModule正确导入CommonModule #

先检查projects/shared/src/app/shared/shared.module.ts，确认已导入CommonModule（这是*ngIf生效的基础）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavBarComponent } from './nav-bar/nav-bar.component';

@NgModule({
  declarations: [NavBarComponent],
  imports: [CommonModule], // 必须添加这行，引入*ngIf等指令
  exports: [NavBarComponent]
})
export class SharedModule {}

步骤2：创建专用模块包裹自定义元素 #

在my-app-1项目中，创建一个专门用于包装自定义元素的模块，确保组件能获取到所需依赖：

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { SharedModule } from 'projects/shared/src/app/shared/shared.module';
import { NavBarComponent } from 'projects/shared/src/app/shared/nav-bar/nav-bar.component';

@NgModule({
  imports: [SharedModule], // 导入SharedModule，间接获取CommonModule的依赖
  declarations: []
})
export class NavBarElementModule {
  constructor(private injector: Injector) {
    // 基于SharedModule的injector创建自定义元素，确保依赖生效
    const navBarElement = createCustomElement(NavBarComponent, { injector });
    customElements.define('my-app-nav-bar', navBarElement);
  }

  // 无需bootstrap组件，添加空的ngDoBootstrap方法
  static ngDoBootstrap() {}
}

步骤3：在AppModule中导入专用模块 #

修改my-app-1/src/app/app.module.ts，导入上面创建的NavBarElementModule：

import { Injector, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavBarElementModule } from './nav-bar-element.module'; // 导入专用模块

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, NavBarElementModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

步骤4：重新编译运行 #

执行ng s my-app-1，此时自定义元素中的*ngIf应该能正常工作。

为什么之前的尝试无效？ #

• 直接在AppModule中引用NavBarComponent时，组件未关联到提供*ngIf的CommonModule，Angular无法解析模板中的指令。
• 重启服务器仅刷新应用，无法解决依赖缺失的根本问题；单独将CommonModule扩展到AppModule也无效，因为跨项目的组件未被该模块声明或导入。

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