Including typings for third-party library gives module not found via angular CLI?

Question

I am attempting to include typings for Apple's MapKit JS in my Angular 9 application, because there are no high quality typings provided by the library, nor any good third-party typings in the @types scoped package. However, Angular CLI isn't happy with how I've included my typings. The exact error I receive on compile is:

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

What am I doing wrong?

Typings

~src/types/mapkit/index.d.ts

This is where the typings are declared, and how they are declared.

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

Typescript Configuration

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"
  ]
}

Usage in code

Here is how mapkit is used.

import * as mapkit from 'mapkit';

Did you tried installing typing by using this : npm install --save @types/apple-mapkit-js — sunilbaba, Jun 21 '20 at 05:36
You could create a pull request for @types/apple-mapkit-js. It may be a little bit more work now, but this way you would benefit from updates made by others in the future. — Christoph Lütjen, Jun 24 '20 at 14:26
any custom types not in @types, need to be added to types in `compiler options` — mr.vea, Jun 25 '20 at 20:20
It would really help if you can create a sample stackblitz or git repo for minimum reproduction — Sachin Gupta, Jun 27 '20 at 13:11

Drag13 · Accepted Answer · 2020-06-25T12:06:24.747

4

Long story short: You need to rename your folder with types and add them to the type roots.

Step #1

In your folder with types (./types) create new folder "apple-mapkit-js"

Step #2

Add your custom index.d.ts there

Step #3 Point TSC to your custom types. Update tsconfig.app.json with new 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"
  ],
}

Step #4 Update your import to the

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

Now it works.

But what was the issue?

Actually, according to the TypeScript documentation, if you specify typeroots, all other resources become "invisible" for the typescript, so tsc just didn't see your declarations

P.S. Checked on the Angular 9 app.

edited Jun 25 '20 at 12:06

answered Jun 24 '20 at 10:45

Drag13

5,859
1
18
42

Hi, I follow your method, and it is still not working, Module not found: Error: Can't resolve 'ros2d' – Chi Jul 22 '20 at 07:55
Hi @Chi this is probably another issue. Try to install ros2d directly using ```npm i ros2d @types/ros2d``` – Drag13 Jul 22 '20 at 08:18
there's no @types/ros2d, so I need to add a typing for it – Chi Jul 22 '20 at 08:22
1

Check TypeScript version, (it was written for 3.5+), follow the instruction it should work. If complaints come from IDE, restart IDE. This also might help https://drag13.io/posts/custom-typings/index.html – Drag13 Jul 22 '20 at 08:28
@Chi and check if ros2d installed – Drag13 Jul 22 '20 at 08:36
I think I have found the issue, there's no module.export in this ros2d library, thanks for your help – Chi Jul 22 '20 at 08:48

David · Answer 2 · 2020-07-01T09:45:09.847

0

Try declaring a namespace instead

declare namespace mapkit {

and remove your import from your component

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

Since tsconfig.app.json already includes definition files from your project, your namespace declaration will work without further changes

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

edited Jul 01 '20 at 09:45

answered Jul 01 '20 at 07:02

David

33,444
11
80
118