如何在Angular应用中正确使用chrome-types包？

你的核心问题是错误地尝试导入chrome-types包——它不是一个可导入的模块，而是Chrome API的全局类型声明包，无需通过import语句引入。按以下步骤修正：

1. 移除错误的导入语句
   删除代码中类似import * as chromeTypes from 'chrome-types';的语句，直接使用全局的chrome对象即可。

2. 正确配置tsconfig.json
   调整compilerOptions中的types和typeRoots，确保TypeScript能识别到chrome-types的类型声明：

   {
     "compilerOptions": {
       // 保留你原有其他配置
       "types": ["chrome-types"],
       "typeRoots": ["node_modules"] // 因为chrome-types直接安装在node_modules根目录，而非@types子目录
     }
   }
   

   • types数组指定要加载的类型包，确保chrome-types在其中；
   • typeRoots设置为["node_modules"]，让TypeScript能找到不在@types下的类型声明包。

3. 验证配置效果
   重新启动IDE（IntelliJ可能需要重启或重新加载项目），之后在代码中使用Chrome API（比如chrome.runtime.sendMessage()）时，应该能获得完整的类型提示，构建工具也不会再报模块不存在的错误。

4. 额外注意事项

   • 确保已经执行npm i chrome-types --save-dev（你已经完成这一步）；
   • 如果Angular构建仍有问题，检查angular.json中的tsConfig路径是否指向了正确的tsconfig文件。

内容的提问来源于stack exchange，提问作者D-Dᴙum