包括第三方库的键入会导致无法通过角度CLI找到模块?

时间:2020-06-21 04:00:46

标签: angular typescript mapkit-js

我试图在我的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
}

打字稿配置

tsconfig.json

{
  "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';

2 个答案:

答案 0 :(得分:4)

长话短说:您需要使用类型重命名文件夹并将其添加到类型根目录。

第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,如果您指定typeroot,则所有其他资源对于打字稿都是“不可见的”,因此tsc只是看不到您的声明

P.S。已在Angular 9应用程序上检查。

答案 1 :(得分:0)

尝试声明一个命名空间代替

declare namespace mapkit {

并从组件中删除导入

import * as mapkit from 'mapkit'; //Not needed

由于tsconfig.app.json已经包含了您项目中的定义文件,因此您的命名空间声明将可以正常使用

"include": [
  "src/**/*.d.ts"
],