Question

我正在尝试使用Angular 6构建Web扩展，因此我发现了web-ext-types来声明Web Extension API的类型。

因此，仅尝试创建一个新的角度项目，将tsconfig.json更新为包含node_modules/web-ext-types似乎就可以了，因为我可以看到browser是Visual Studio Code中公认的类型。到目前为止一切顺利。

现在，我想通过运行ng build --aot来构建项目，并且出现以下错误：error TS2304: Cannot find name 'browser'。

我在做什么错了？

tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2017",
    "typeRoots": [
      "node_modules/@types",
      "node_modules/web-ext-types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "myLibrary": [
        "projects/my-library"
      ],
      "myLibrary/*": [
        "projects/my-library/*"
      ]
    }
  }
}

tsconfig.app.json：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

也来自angular.json：

"tsConfig": "projects/extension/tsconfig.app.json",

创建了一个github存储库以显示完整的代码来再现我的问题：https://github.com/benk79/angular-web-ext-base

Answer 1

这里的问题是tsconfig.app.json中的设置：

"compilerOptions": {
  "types": []
},

这告诉Angular CLI运行不带类型包的TypeScript编译器，从而覆盖typeRoots中的tsconfig.json设置。这也解释了为什么您的IDE知道browser名称空间，而Angular CLI却不知道，因为IDE仅使用tsconfig.json配置，而不使用tsconfig.app.json中专用于Angular的配置CLI。只需删除types中的tsconfig.app.json设置即可解决问题。

如何使用Web扩展类型来避免错误TS2304

1 个答案: