angular - 包含第三方库的类型会导致未通过 angular CLI 找到模块？

Question

我试图在我的 Angular 9 应用程序中包含 Apple MapKit JS 的类型，因为库没有提供高质量的类型，@types 中也没有任何好的第三方类型。范围包。然而，Angular CLI 对我如何包含我的类型并不满意。我在编译时收到的确切错误是:

Module not found: Error: Can't resolve 'mapkit' in `components/map.component.ts`.

我究竟做错了什么？
打字
~src/types/mapkit/index.d.ts
这是类型声明的地方，以及它们是如何声明的。

declare module 'mapkit' {
  // interfaces, classes, etc here
}

typescript 配置
配置文件

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2019",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

代码中的用法
这是如何 mapkit用来。

import * as mapkit from 'mapkit';

Answer 1

长话短说:您需要使用类型重命名文件夹并将它们添加到类型根目录中。
第 1 步
在类型为 (./types) 的文件夹中创建新文件夹“apple-mapkit-js”
步骤 #2
在那里添加您的自定义 index.d.ts
步骤 #3
将 TSC 指向您的自定义类型。使用新的 typeRoots 更新 tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "typeRoots" : ["./src/types/", "node_modules/@types"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
}

第 4 步
将您的导入更新到

import * as mapkit from 'apple-mapkit-js'

现在它起作用了。
但问题是什么？
实际上，根据 TypeScript documentation ，如果您指定 typeroots，则所有其他资源对于 typescript 都变得“不可见”，因此 tsc 只是没有看到您的声明
附言检查 Angular 9 应用程序。