[SOLVED] javascript library is not loaded into an angular typescript project

javascript library is not loaded into an angular typescript project

We are trying to build a javascript library (dwbn-event-webcomponents), that can be imported into a typescript project (angular 17) and also used standalone. It was installed via npm from git url.

In the angular project however, we get the following error:

event.module.ts:5:0-52 - Error: Module not found: Error: Can't resolve 'dwbn-event-webcomponents' in 'src/app/modules/ondemand'

The package.json of dwbn-event-webcomponents looks like this:

{
  "name": "dwbn-event-webcomponents",
  "version": "1.0.8",
  "description": "A powerfull but easy to integrate web component",
  "main": "src/js/events-webcomponents.js",
  "module": "src/js/events-webcomponents.js",
  "source": "src/js/events-webcomponents.js",
  "types": "types/event-webcomponents.d.ts",
  "type": "module",
  "keywords": [
    "events"
  ],
  "devDependencies": {
    "@inquirer/prompts": "^7.0.1",
    "clean-webpack-plugin": "^4.0.0",
    "gulp": "^5.0.0",
    "semver": "^7.6.3",
    "typescript": "^5.6.3",
    "webpack": "^5.95.0",
    "webpack-stream": "^7.0.0"
  },
  "engines": {
    "node": ">= 18"
  }
}

The files are all in the defined location and we have generated the typescript type definition file via npx tsc.

How can we resolve this error and make the library usable in a typescript project?

Solution

So it was really a very stupid mistake.

Our filestructure:

src/js/event-webcomponents.js

and in the package.js the module attribute was still pointing to the old name of the file: "module": "src/js/events-webcomponents.js",

classic typo...

Unfortunatley the typescript "Module not found: Error" message is not very helpfull in this case. But if you have a similar issue, it is worth to tripple check all your paths.