Getting TS2344: Type 'T' does not satisfy the constraint 'Object'. from Angular libraries after clean npm install

Question

I have an Angular application that has been building and running just fine, but had some strange npm dependency issues when I added angular/material, so I deleted both package-lock.json and my node_modules, and npm i would now install with no errors.

However, I now get a bunch of TypeScript errors when compiling, which I did not have before.

My package.json has the following dependencies:

    "dependencies": {
        "@angular/animations": "^14.1.0",
        "@angular/common": "^14.1.0",
        "@angular/compiler": "^14.1.0",
        "@angular/core": "^14.1.0",
        "@angular/forms": "^14.1.0",
        "@angular/material": "14.1.0",
        "@angular/material-moment-adapter": "14.1.0",
        "@angular/platform-browser": "^14.1.0",
        "@angular/platform-browser-dynamic": "^14.1.0",
        "@angular/router": "^14.1.0",
        "@ngrx/component-store": "^14.3.0",
        "@ngrx/effects": "^14.2.0",
        "@ngrx/entity": "^14.2.0",
        "@ngrx/store": "^14.2.0",
        "@ngrx/store-devtools": "^14.2.0",
        "@ngx-translate/core": "^14.0.0",
        "tslib": "^2.3.0",
        "uuid": "^8.3.2",
        "zone.js": "~0.11.4"


"devDependencies": {
        "@angular-devkit/build-angular": "^14.1.0",
        "@angular-eslint/builder": "14.0.2",
        "@angular-eslint/eslint-plugin": "14.0.2",
        "@angular-eslint/eslint-plugin-template": "14.0.2",
        "@angular-eslint/schematics": "14.0.2",
        "@angular-eslint/template-parser": "14.0.2",
        "@angular/cli": "~14.1.0",
        "@angular/compiler-cli": "^14.1.0",
        "@types/jasmine": "~4.0.0",
        "@types/lodash": "^4.14.184",
        "@types/uuid": "^8.3.4",
        "@typescript-eslint/eslint-plugin": "5.29.0",
        "@typescript-eslint/parser": "5.29.0",
        "eslint": "^7.32.0",
        "jasmine-core": "~4.2.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.0.0",
        "typescript": "^4.8.2"

I did have TypeScript 4.7 but tried upgrading after getting the error below (it did not make any difference).

The errors I now get are

        Error: node_modules/@angular/material/datepicker/index.d.ts:602:48 - error TS2344: Type 'MatDatepickerControl<unknown>' does not satisfy the constraint 'MatDatepickerControl<{}>'.
        The types returned by 'getStartValue()' are incompatible between these types.
            Type 'unknown' is not assignable to type '{} | null'.

    602     constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>, _viewContainerRef: ViewContainerRef);
                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


    Error: node_modules/@angular/material/datepicker/index.d.ts:621:48 - error TS2344: Type 'MatDatepickerControl<unknown>' does not satisfy the constraint 'MatDatepickerControl<{}>'.

    621     constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>);
                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Error: node_modules/@angular/material/datepicker/index.d.ts:777:36 - error TS2344: Type 'MatDatepickerControl<unknown>' does not satisfy the constraint 'MatDatepickerControl<{}>'.

    777     _datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>;
                                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


    Error: node_modules/@angular/material/datepicker/index.d.ts:778:48 - error TS2344: Type 'MatDatepickerControl<unknown>' does not satisfy the constraint 'MatDatepickerControl<{}>'.

    778     constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>);
                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Error: node_modules/@ngrx/effects/src/effect_decorator.d.ts:7:84 - error TS2344: Type 'T' does not satisfy the constraint 'Object'.

    7 export declare function getEffectDecoratorMetadata<T>(instance: T): EffectMetadata<T>[];
                                                                                                                                                                             ~

        node_modules/@ngrx/effects/src/effect_decorator.d.ts:7:52
            7 export declare function getEffectDecoratorMetadata<T>(instance: T): EffectMetadata<T>[];
                                                                                                                     ~
            This type parameter might need an `extends Object` constraint.

    Error: node_modules/@ngrx/effects/src/effects_metadata.d.ts:3:75 - error TS2344: Type 'T' does not satisfy the constraint 'Object'.

    3 export declare function getSourceMetadata<T>(instance: T): EffectMetadata<T>[];
                                                                                                                                                            ~

        node_modules/@ngrx/effects/src/effects_metadata.d.ts:3:43
            3 export declare function getSourceMetadata<T>(instance: T): EffectMetadata<T>[];
                                                                                                    ~
            This type parameter might need an `extends Object` constraint.


    Error: node_modules/@ngrx/effects/src/models.d.ts:25:31 - error TS2344: Type 'T' does not satisfy the constraint 'Object'.

    25     [key in EffectPropertyKey<T>]?: EffectConfig;
                                                                     ~

        node_modules/@ngrx/effects/src/models.d.ts:24:37
            24 export declare type EffectsMetadata<T> = {
                                                                                         ~
            This type parameter might need an `extends Object` constraint.

So all from libraries. I have just added material, so not sure if I would have got them before, however, I did not have these errors from the NgRx library before

I can get rid of these by adding:

"compilerOptions": {
  "skipLibCheck": true,

to tsconfig.json, but note sure hiding these errors is the best idea.

Why am I suddenly getting these?

Husted

Have you tried to download a previous version of @angular/material ? – Shcherbakov

I haven't, but it does seem to not just be material, there are now also errors from ng/rx which has been there the whole time (eg node_modules/@ngrx/effects/src/models.d.ts:25:31 - error TS2344: Type...) – Husted

Hi, did you solve your problem? I had the same problem with ngrx when upgrading from Angular 13 to 14. – Oshiro

@AnDo - I have had to add the "compilerOptions": { "skipLibCheck": true, for the time being; so more of a work around than a solve - would prefer not to have to do this - so would still be interested in the real reason for the above. – Husted

Angular 14 adds typing for FormControl, so I suspect the Material components want you to declare the types on the FormControl instances they're connected to – Dram

I'm getting this issue too, have you had any luck finding a solution yet? – Poison

@WillAlexander I also came cross this problem and ahd to use the temp solution above......do you have an example for declaring the FormControl types....I saw the warning but no documentation. – Spanish

I ran into the same issue with a new v15 Angular project with zero code in it. I was just setting up the environment similar to another project and it occurred after installing Material v14.0.7 with the line loading MatDatepickerModule. It works in other projects. Removing the date picker from the module allows it to compile. It was a compatibility issue. I updated Material to the latest v14.2.7, uncommented the MatDatepickerModule and it complied properly. – Imperceptible

Answer 1

I had the same error at the first step of the migration from angular 13 to angular 14 (ng update @angular/core@14 @angular/cli@14), but it got solved when I migrate angular material (ng update @angular/material@14)

Try with angular 14.3 and material 14.2

Cleon

Answer 2

Im not sure is it correctly but for that issue

Error: node_modules/@angular/material/datepicker/index.d.ts:778:48
  - error TS2344: Type 'MatDatepickerControl unknown '
  does not satisfy the constraint 'MatDatepickerControl {}

I got the same problem and I went to the node_modules/@angular/material/datepicker/index.d.ts:778:48 and changed MatDatepickerControl unknown to MatDatepickerControl any. That worked for me but I had only that one error not the all list like u.

Shanda

I think the error will occur again when u update or install npm packages. Because these node modules are getting from lines which are mentioned in package.json. When you run npm i that command will execute package.json. – Overbalance

Yes, as @OshadhaPunchihewa mentioned, editing the npm package edits will soon disappear. For myself, I am actually happy using the "skipLibCheck": true, as there is nothing we can do about lib errors anyway (and I've seen some othesr recommend always doing this anyway) – Husted

Answer 3

I was upgrading angular from 15 to 16 and got same errors. I change type unknown to any, because i saw error related to type provided error. My project working fine after changes.index.d.ts

Rossini

Hi, please dont add images of code, instead paste the code as text, this allows people with low bandwidth or using screenreaders to still make use of your answer – Pedi