错误 TS2503：找不到命名空间“WebMidi”

Question

I have an Angular workspace containing a library and its testing app.

projects/
├── midi-app
│   ├── browserslist
│   ├── karma.conf.js
│   ├── src
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── midi-app-e2e
│   ├── protractor.conf.js
│   ├── src
│   └── tsconfig.e2e.json
└── midi-lib
    ├── karma.conf.js
    ├── ng-package.json
    ├── package.json
    ├── README.md
    ├── src
    ├── tsconfig.lib.json
    ├── tsconfig.spec.json
    └── tslint.json

I'm using the @types/webmidi and the VSCode editor is not complaining.

I can also successfully build the library with the ng build midi-lib --watch and the compilation completes.

But then, when I try to serve the application usng the ng serve command, from the same directory, it fails with the error TS2503: Cannot find namespace 'WebMidi' error.

It used to serve just fine until yesterday morning when I opened up the laptop and tried to serve the application, when it failed. I had not done any code change since the day before when it served fine.

I tried cleaning up but it changed nothing:

rm -fr node_modules package-lock.json
npm cache clean
npm install

Here are some configuration files.

The tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "lib": [
      "es2018",
      "dom"
    ],
    "baseUrl": "./",
    "paths": {
      "@app/*": ["projects/midi-app/src/app/*"],
      "@lib/*": ["projects/midi-lib/src/lib/*"],
      "midi-lib": [
        "dist/midi-lib"
      ],
      "midi-lib/*": [
        "dist/midi-lib/*"
      ]
    }
  }
}

The tsconfig-lib.json file:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "typeRoots": [
      "../../node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

I tried adding

"typeRoots": [
  "node_modules/@types"
],

in the tsconfig.json file but it didn't help at all.

And I also tried removing

"typeRoots": [
   "../../node_modules/@types"
],

from the tsconfig-lib.json file but it again didn't help.

UPDATE: The issue is now gone and I have no idea why. Is it because I upgraded typescript to 3.2.4 ? Or because I removed the webmidi 2.3.3 dependency from the package.json file? High Chaparal...

Answer 1

The namespace is not webmidi , this is only the name of the npm package. the namespace is WebMidi , so I'll suggest you add types to both tsconfig.json and tsconfig.spec.ts (for tests ) inside "compilerOptions" .

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "allowSyntheticDefaultImports":true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "types": [ "WebMidi" ],
  }
}

Answer 2

Try this to see if it work

In your tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["webmidi"] // add here
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

Answer 3

Instead of tsconfig.json you should add changes to tsconfig.app.json , because this file is used for build. For example my file looks like:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

it will work if you remove types field or if you add needed type inside like types: ["webmidi"] .

Works for me and I'm sure will works for you