PhpStorm无法识别uppercase管道与router-outlet标签如何解决？

前置检查 #

首先确认项目基础配置正确：

• 执行npm install完整安装所有依赖，确保@angular/common、@angular/router包已存在于项目node_modules目录中
• 打开IDE设置 → 语言和框架 → JavaScript → 库，确认Angular相关类型库已加载，缺失的话可以手动添加项目node_modules/@angular目录，或点击下载获取官方Angular类型定义
• 确认IDE已勾选「使用项目tsconfig.json配置」（路径：设置 → 语言和框架 → TypeScript）

问题1：uppercase管道提示unresolved #

• 确认使用该管道的组件所属模块已在imports数组中引入CommonModule，Angular所有内置管道都需要依赖该模块才能使用
• 配置无误仍报错的话，右键点击项目根目录，选择「将目录标记为 → 资源根」
• 执行「文件 → 清除缓存并重启」，重启后IDE会重新扫描项目类型定义，即可解决识别问题

问题2：<router-outlet>标签未被识别 #

• 确认使用该标签的模块已在imports数组中引入RouterModule，根模块引入格式为RouterModule.forRoot(routes)，子模块引入格式为RouterModule.forChild(routes)
• 导入配置无误仍报错的话，可以手动添加类型声明：在项目src目录下新建typings.d.ts文件（已有则直接编辑），添加以下内容：

declare namespace JSX {
  interface IntrinsicElements {
    'router-outlet': any;
  }
}

• 也可以调整IDE检查规则：打开设置 → 编辑器 → 检查，搜索「Angular 未知HTML标签」，将该检查项的告警级别调低，或在例外列表中添加router-outlet
• 最后执行清除缓存并重启IDE即可生效

内容的提问来源于stack exchange，提问作者Josef Lundström