Angular v15+Pug模板中ng-cli-pug-loader无法识别Angular类/指令求助

1. 解决WebStorm版本兼容问题 #

WebStorm 2021.2.4发布于Angular 15之前，对Angular 15的特性支持不全，尤其是Pug模板里的Angular指令识别逻辑。直接升级到WebStorm 2022.3及以上版本，该版本开始全面适配Angular 15，能解决大部分语法识别类问题。

2. 优化ng-cli-pug-loader配置 #

确保loader配置能让WebStorm抓取到Angular模板的元数据信息：

• 在angular.json中补全Pug模板的处理配置，开启templatePreprocessorOptions并关联自定义Webpack配置：

"architect": {
  "build": {
    "options": {
      "templatePreprocessorOptions": {
        "includePaths": ["src"]
      },
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      }
    }
  }
}

• 在项目根目录的webpack.config.js中，给ng-cli-pug-loader添加angular: true配置，确保传递Angular编译上下文：

module.exports = {
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'ng-cli-pug-loader',
            options: {
              angular: true
            }
          }
        ]
      }
    ]
  }
};

3. 检查WebStorm的Angular插件设置 #

• 打开Settings > Languages & Frameworks > Angular，勾选Enable Angular language service，并将Angular CLI路径指向项目内的node_modules/@angular/cli/bin/ng。
• 进入Settings > Editor > File Types，确认Pug文件类型已关联Angular Pug Template解析器，让IDE将Pug文件视为Angular模板处理。

4. 修复公共类与管道的识别问题 #

• 先确认公共类、管道已在对应Angular模块中正确声明/导出，组件使用时也已在providers或declarations中引入。
• 执行File > Invalidate Caches... > Invalidate and Restart，清除WebStorm缓存后重启，让IDE重新索引项目内的Angular定义。

内容的提问来源于stack exchange，提问作者Peter Andreas Moelgaard