'Typescript Build Fails When Adding Angular into Monorepo (Clashing of Jasmine and Jest Types)

Gist

I have a Monorepo with solely Typescript packages. When I run tsc --build all packages will be compiled to Javascript. This worked fine until I added a package containing an Angular app.

For testing my packages I am using Jest. But Angular uses Jasmine.

Issue

When running tsc --build now, it seems that types of Jasmine and Jest are clashing.

I get a total of 184 errors. Originating from both node_modules/@types/jest and node_modules/@types/jasmine and my own packages:

Errors

I only show a few snippets from the error log, as it would be way too long to paste the whole thing. You can find the complete error log here: https://gist.github.com/flolude/115e92ca13cd8c86a4dca03528b92d4f

Jest node_modules/@types/jest/index.d.ts:1310:9 - error TS2717: Subsequent property declarations must have the same type. Property 'message' must be of type 'string', but here has type 'string | (() => string)'.

1310         message: string | (() => string);
             ~~~~~~~

Jasmine

node_modules/@types/jasmine/ts3.1/index.d.ts:304:9
    304         message?: string;
                ~~~~~~~
    'message' was also declared here.

My Own Packages

services/gateway/src/gateway.server.ts:7:24 - error TS2307: Cannot find module '@cents-ideas/utils'.

7 import { Logger } from '@cents-ideas/utils';
                         ~~~~~~~~~~~~~~~~~~~~

Solution

Everything compiles without errors when I remove the Jasmine types from the package.json of the Angular project. That's why I am sure they are causing the errors. But I need those packages for testing with Angular.

"devDependencies": {
    // no errors when I remove those 2 packages
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    // ...
  }

Source Code

As I've already mentioned I am operating inside a Monorepo. Here is the source code if you need further insight:



Solution 1:[1]

I've run into this problem as well, I can think of two possible approaches:

  1. Don't use Jasmine in your Angular Project.
  2. Use typeRoots

Don't use Jasmine in your Angular Project.

Since you seem to be starting a new Angular project and haven't actually written any Jasmine based Angular tests, you might just as well just use Jest for that project as well. If there are already Jasmine tests within the Angular project, migration is quite easy as well.

Use TypeRoots

Using tsconfig typeRoot compilerOptions, you can specifically extract and fix the conflicts in the respective .d.ts declarations.

what you need is to "break the tie" between the two declarations in some way. so options, consider creating a new folder: "overrides" , and add "overrides\jest\index.d.ts" to be what you thinkjestshould be. then update your tsconfig.json to include"typeRoots": [".\overrides", ".\node_modules@types"]. What this does it tells the compiler to look for types first in".\overrides\jest"and if it did not find it to look in".\node_modules@types\jest"`. GitHub Source

However, you will now have to maintain what is basically a local fork of a type definition file. If you can, you should post that fix upstream in whichever library you think should be fixed.

Updated 5/22: removed --skipLibCheck, as it is incompatible with OPs problem

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1