Using cleave.js (^1.5.2) in my Angular 6 application, along with the @types/cleave.js package (^1.4.0), I encountered a strange issue. When I run ng build to compile the application, it fails and shows the following errors:
ERROR in src/app/app.component.ts(4,8): error TS1192: Module '"C:/Users/evcomes/Angular2/hellogular/node_modules/@types/cleave.js/index"' has no default export.
src/app/app.component.ts(5,8): error TS1192: Module '"C:/Users/evcomes/Angular2/hellogular/node_modules/@types/cleave.js/options/index"' has no default export.
Looking at the source of @types/cleave.js confirms this, but since it's just for types, why would a default export be necessary? What's even weirder is that if I make a small modification to any file, save it, the automatic rebuild process recognizes it (though still displays the error), serves the angular app in development mode, and the cleave.js functionality works in the browser. So is this actually an error or can it be ignored? How do I disable it?
Most tutorials and guides I've come across mention that simply npm installing DefinitelyTyped libraries should suffice for use without further adjustments. Therefore, most issues related to this seem to involve people creating TypeScript bindings for JS libraries or custom modules.
In package.json:
...
"@types/cleave.js": "^1.4.0",
"cleave.js": "^1.5.2"
...
In my tsconfig.json:
...
"esModuleInterop": true,
"typeRoots": [
"node_modules/@types"
]
...
In my app.component.ts:
...
import Cleave from 'cleave.js';
import CleaveOptions from 'cleave.js/options'
...