Включение набора текста для сторонней библиотеки дает модуль, не найденный через angular CLI?

Question

Я пытаюсь включить набор текста для MapKit JS от Apple в свое приложение Angular 9, потому что в пакете с областью действия @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';

Answer 1

Короче говоря: вам нужно переименовать папку с типами и добавить их в корни типов.

Шаг # 1

В вашей папке с типами ( ./types) создайте новую папку «apple-mapkit- js»

Шаг 2

Добавьте туда свой собственный index.d.ts

Шаг # 3 Укажите TS C на свои пользовательские типы. Обновите tsconfig.app. json с новым typeRoots:

{
  "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 , если вы укажете typeroots, все остальные ресурсы станут «невидимыми» для машинописного текста, поэтому ts c просто не видел ваших объявлений

PS Проверено в приложении Angular 9.

Answer 2

Попробуйте вместо этого объявить пространство имен

declare namespace mapkit {

и удалите импорт из вашего компонента

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

Поскольку tsconfig.app.json уже включает файлы определений из вашего проекта, ваше объявление пространства имен будет работать без дальнейших изменений

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