自定义Angular模块VS Code IntelliSense失效问题排查

我之前也碰到过一模一样的问题——模块跑起来完全正常，但VS Code就是不认组件标签，这种情况大多是Angular语言服务没法正确解析你的模块元数据导致的。下面是你需要在自定义模块包里补充和检查的关键配置：

1. 完善package.json的核心字段 #

确保你的模块包的package.json里包含以下关键配置，这些是Angular语言服务识别模块的核心依据：

• typings：指向生成的类型定义文件，通常是./dist/index.d.ts（如果你的编译产物在dist目录）
• module：指向ES模块入口文件，比如./dist/fesm2020/your-module-name.mjs
• main：指向UMD模块入口，比如./dist/your-module-name.umd.js
• peerDependencies：正确声明Angular相关依赖，避免版本冲突，示例：

  "peerDependencies": {
    "@angular/core": "^14.0.0 || ^15.0.0",
    "@angular/common": "^14.0.0 || ^15.0.0"
  }
  

• 如果你用的是Angular 12+，建议加上exports字段明确导出入口：

  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "esm2020": "./dist/fesm2020/your-module-name.mjs",
      "node": "./dist/your-module-name.umd.js"
    }
  }
  

2. 确保public-api.ts正确导出所有对外暴露的内容 #

ng-packagr默认会用public-api.ts作为模块的公共入口，你需要在这里导出你的模块和所有要对外使用的组件、指令、管道：

// public-api.ts
export * from './lib/your-custom.module';
export * from './lib/your-custom.component';
export * from './lib/your-custom.directive';

注意：组件本身也需要在自己的文件里用export导出，比如your-custom.component.ts里要export class YourCustomComponent { ... }

3. 检查NgModule的导出配置 #

在你的自定义模块类中，必须把要对外暴露的组件、指令加入exports数组，否则Angular语言服务不知道这些组件可以在外部使用：

// your-custom.module.ts
@NgModule({
  declarations: [YourCustomComponent],
  imports: [CommonModule],
  // 关键：把要对外用的组件/指令/管道加到这里
  exports: [YourCustomComponent]
})
export class YourCustomModule { }

4. 配置ng-package.json确保类型文件正确生成 #

在你的模块项目的ng-package.json里，确保lib.entryFile指向public-api.ts，并且开启类型生成（默认是开启的，但可以明确配置）：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      // 如果你的模块依赖其他第三方库，这里要映射它们的UMD模块ID，比如：
      "lodash": "_"
    }
  }
}

5. 消费项目的额外排查 #

如果以上配置都没问题，在引用模块的项目里可以做这些操作：

• 确保在tsconfig.json的compilerOptions.paths里正确映射你的模块（如果是本地开发用npm link的话）：

  "paths": {
    "your-module-name": ["../your-module/dist"]
  }
  

• 打开VS Code命令面板（Ctrl+Shift+P），执行Restart Angular Language Service，有时候语言服务需要重启才能识别新的模块元数据
• 清除消费项目的node_modules和dist目录，重新执行npm install和ng build你的自定义模块

完成这些配置后，VS Code的IntelliSense应该就能正确识别你的组件标签了，同时编译运行也不会受影响。

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