Angular 15：NgOptimizedImage类非Angular模块报错排查

近期将项目升级至Angular 15后整体运行正常，但在实现@angular/common中的NgOptimizedImage时第一步就失败。

按照官方指引的步骤1，代码示例如下：

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

// 引入至对应NgModule
@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}

// 或独立组件
@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

IntelliJ IDEA标记代码并报错：Class NgOptimizedImage is not an Angular module，但点击NgOptimizedImage可正常跳转到项目node_modules/@angular/common/index.d.ts中的定义：

export declare class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {

说明该类已被正确识别，现询问报错原因及解决方法。

项目的Angular版本信息：

@angular-devkit/architect       0.1502.6
@angular-devkit/build-angular   15.2.6
@angular-devkit/core            15.2.6
@angular-devkit/schematics      15.2.6
@angular/cli                    15.2.6
.........................................
rxjs                            6.5.5
typescript                      4.8.4
webpack                         5.80.0

原因 #

Angular 15中NgOptimizedImage是指令而非模块，NgModule的imports数组仅接受模块类（如CommonModule），直接导入单个指令会触发IDE的类型校验错误；另外你提供的独立组件代码存在语法缺失，也会导致IDE报错。

解决方法 #

1. NgModule场景 #

在NgModule中，需导入包含NgOptimizedImage的CommonModule（或BrowserModule，CommonModule更通用），而非直接导入NgOptimizedImage类：

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

@NgModule({
  imports: [CommonModule],
})
class AppModule {}

2. 独立组件场景 #

独立组件支持直接导入单个指令，但需修正代码语法错误（缺少逗号）：

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

@Component({
  standalone: true, // 补上缺失的逗号
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

3. IDE缓存问题 #

若上述修改后IDE仍报错，可尝试：

• 重启IntelliJ IDEA
• 执行File > Invalidate Caches...清理IDE缓存
• 重新安装依赖：删除node_modules和package-lock.json，运行npm install

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