Getting error on ng serve: Type 'null' is not assignable to type 'string | Dayjs'

Question

I am working on an Angular Project. I am trying to use ngx-daterangepicker-material. I have installed the below packages:

npm install ngx-daterangepicker-material --save

npm install dayjs --save

I have added sample code shown as per ngx-daterangepicker-material.

My component.ts and component.html has below code:

ranges: any = {
    'Today': [dayjs(), dayjs()],
    'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
    'Last 7 Days': [dayjs().subtract(6, 'days'), dayjs()],
    'Last 30 Days': [dayjs().subtract(29, 'days'), dayjs()],
    'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
    'Last Month': [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')]
  }

  model: any;

<input type="text" ngxDaterangepickerMd startKey="start" endKey="end" [ranges]="ranges" [(ngModel)]="model">

As soon as I run ng serve, I got below error:


Error: node_modules/ngx-daterangepicker-material/daterangepicker.component.d.ts:173:9 - error TS2380: The return type of a 'get' accessor must be assignable to its 'set' accessor type
  Type 'null' is not assignable to type 'string | Dayjs'.

173     get minDate(): dayjs.Dayjs | null;
            ~~~~~~~


Error: node_modules/ngx-daterangepicker-material/daterangepicker.component.d.ts:179:9 - error TS2380: The return type of a 'get' accessor must be assignable to its 'set' accessor type

179     get maxDate(): dayjs.Dayjs | null;
            ~~~~~~~

As per above error, it does not seem from my code. It is pointing to code under node_modules folder.

Below are the versions from package.json

"dayjs": "^1.11.5",

"ngx-daterangepicker-material": "^6.0.2",

Could someone help in resolving this error?

could you try [`"skipLibCheck": true`](https://stackoverflow.com/questions/51634361/how-to-force-tsc-to-ignore-node-modules-folder) — Naren Murali, Sep 27 '22 at 14:37
maybe you're importing the wrong `dayjs` function. Check which folder it's it imported from. It probably should be the root folder and you're just importing something internal (???) just throwing out ideas — Francisco Santorelli, Sep 27 '22 at 14:49
@NarenMurali thank you for quick response. Adding that the flag of `"skipLibCheck": true` under tsconfig.json resolved that error. Thank you — Seshu Thanneeru, Sep 27 '22 at 14:53
@FranciscoSantorelli My import statement is `import * as dayjs from 'dayjs';`. Am I missing anything here? — Seshu Thanneeru, Sep 27 '22 at 14:55
@NarenMurali this `"skipLibCheck": true` seems a temporary relief. Now my page is giving other error `ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[LocaleService -> LocaleService -> LocaleService]: NullInjectorError: No provider for LocaleService!` I need to check if this is because of that null been allowed as value. — Seshu Thanneeru, Sep 27 '22 at 15:10

score 0 · Answer 1 · answered Sep 27 '22 at 15:23

0

As per your comment of No provider for LocaleService!.

You should configure the necessary providers like below.

    import { LocaleService } from './locale.service';
.
.
.
.


    { provide: LocaleService, useClass: LocaleService, deps: [LOCALE_CONFIG] },

For more info, please click Here

answered Sep 27 '22 at 15:23

Ramesh Rajendran

37,412
45
153
234

Do I need `LocaleService` for using `Dayjs` or `ngx-daterangepicker-material`? I will try adding LocaleService. – Seshu Thanneeru Sep 28 '22 at 07:13
I hope `ngx-daterangepicker-material` – Ramesh Rajendran Sep 28 '22 at 09:57
as per the code link you provided, `ngx-daterangepicker-material` already adds `LocaleService` in `NgxDaterangepickerMd` module. In my code, I have included `NgxDaterangepickerMd.forRoot()` that means `LocaleService` is available automatically, right. Am I missing anything here. – Seshu Thanneeru Sep 28 '22 at 10:41
I have multiple modules in my project. I had this `NgxDaterangepickerMd.forRoot()` on the module where I have date range component. It was giving `NullInjectorError`. I have also added `NgxDaterangepickerMd.forRoot()` on `AppModule`, then this `NullInjectorError` been gone. – Seshu Thanneeru Sep 28 '22 at 13:08

score 0 · Answer 2 · answered Sep 28 '22 at 13:17

As suggested by @NarenMurali under comments, adding "skipLibCheck": true under compilerOptions of tsconfig.json file resolved this issue.

PS: I had faced another issue of getting NullInjectorError. It was because of my module hierarchy. After adding NgxDaterangepickerMd.forRoot() under AppModule, that error been resolved.

Getting error on ng serve: Type 'null' is not assignable to type 'string | Dayjs'

2 Answers2