Angular Elements自定义元素中ng-content内的组件未加载问题咨询

本质是Angular自定义元素的编译、解析作用域和普通Angular组件的逻辑存在隔离，具体分为两种常见情况：

• 若custom是打包为独立Angular Elements产物、引入到非Angular/其他技术栈页面使用：嵌入在<custom>标签内的<component>属于原生DOM范畴，不会经过Angular编译器处理，浏览器仅会将其识别为未知HTML标签，无法加载对应组件逻辑。
• 若custom在同一Angular应用内注册为自定义元素：<custom>标签所属的宿主NgModule的declarations未声明component组件，导致编译器无法识别该标签，自然不会执行组件逻辑。另外模板中重复写两个无选择器的<ng-content>属于不规范写法，仅会导致投影内容重复渲染两次，不会直接造成组件不加载。

独立打包Angular Elements使用场景 #

• 若当前页面本身就是Angular应用：不需要将custom转换为自定义元素，直接作为普通组件调用即可，内部的<component>会和其他普通组件一样被正常编译解析。
• 若必须使用独立自定义元素：不要在自定义元素的投影插槽中写Angular组件标签，改为在custom组件内部通过动态组件方式渲染component：
  1. 在custom组件中引入component，通过ngComponentOutlet动态渲染：

     // custom.component.ts
     import { Component } from '@angular/core';
     import { Component as HelloComponent } from './component.component'; // 你的普通组件
     @Component({
       selector: 'custom',
       template: `<ng-container *ngComponentOutlet="innerComp"></ng-container>`
     })
     export class CustomComponent {
       innerComp = HelloComponent;
     }
     

  2. 确保component已添加到自定义元素对应NgModule的declarations中，Angular 9+ Ivy版本无需额外配置entryComponents。

同Angular应用内使用场景 #

• 检查<custom>标签所属的宿主NgModule，确认declarations数组已声明component组件，若为独立特性模块需同步导入CommonModule。
• 修正custom组件的ng-content写法，删除重复的无选择器插槽，仅保留一个即可：

  <ng-content></ng-content>
  

• 若custom使用ViewEncapsulation.ShadowDom封装模式，可给ng-content添加选择器精准匹配投影内容，避免内容被拦截：

  <ng-content select="component"></ng-content>
  

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