Angular 15升级至16后ng serve编译失败，报NG8002错误求助

错误1：无法绑定到'ngStyle'，因为它不是'div'的已知属性 #

问题详情 #

src/app/feature/videocall-activity-window/videocall-activity-window.component.html第2行38列出现NG8002错误，对应代码：

<div tabindex="0" id="vidPlayerComp" [ngStyle]="{'width': VideocontainerWidth+'px', 'height': VideocontainerHeight+'px'}">

解决方法 #

• 检查当前组件所属的NgModule（比如VideocallActivityWindowModule），确认是否导入了CommonModule。ngStyle这类通用指令属于CommonModule，Angular 16中依然需要显式导入才能使用。
• 在模块的imports数组中添加CommonModule：

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    // 其他模块导入项
  ],
  declarations: [VideocallActivityWindowComponent]
})
export class VideocallActivityWindowModule { }

错误2：无法绑定到'applyClass'，因为它不是'svg-icon'的已知属性 #

解决方法 #

根据svg-icon的类型选择对应方案：

1. 若'svg-icon'是自定义Angular组件
   • 确认该组件类中已定义@Input() applyClass: string;输入属性。
   • 检查当前组件所属的NgModule是否导入了svg-icon组件所在的模块，或者在declarations数组中声明了该组件。
2. 若'svg-icon'是Web组件（第三方自定义元素）
   • 在当前组件所属的NgModule中配置CUSTOM_ELEMENTS_SCHEMA：

   import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
   
   @NgModule({
     // 其他配置项
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
   })
   export class YourModule { }
   

3. 临时允许任意属性（仅调试用，不推荐生产环境）
   • 在当前组件所属的NgModule中配置NO_ERRORS_SCHEMA：

   import { NO_ERRORS_SCHEMA } from '@angular/core';
   
   @NgModule({
     // 其他配置项
     schemas: [NO_ERRORS_SCHEMA]
   })
   export class YourModule { }
   

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