Angular 12 - is not assignable to type '[number, number]

Question

I am trying out ngx-charts library in Angular 12 and I keep getting this issue:

Type 'any[]' is not assignable to type '[number, number]'.

Target requires 2 element(s) but source may have fewer.

I don't know what the error means.

Here is the code:

HTML:

<ngx-charts-linear-gauge 
  [view]="view" 
  [scheme]="colorScheme" 
  [value]="value" 
  [previousValue]="previousValue" 
  (select)="onSelect($event)" 
  [units]="units"
>
</ngx-charts-linear-gauge>

ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  single: any[];
  view: any[] = [400, 400];
  colorScheme = {
    domain: ['#aae3f5']
  };
  value: number = 43;
  previousValue: number = 70;
  units: string = 'counts';

  onSelect(event) {
    console.log(event);
  }

}

Any ideas on what the error means, how to fix this?

ts config code is:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Try changing type definition for view to `view: number[]` – Jul 08 '21 at 08:55 — , Jul 08 '21 at 08:55

TmTron · Accepted Answer · 2021-10-27T06:58:56.940

4

I guess the issue is the type of you view property. According to the cods it must be of type number[]: doc-ref
note: the type in the docs is not exact enough. view is not defined as array of number (number[]), but as a tuple of 2 numbers ([number, number]) - source-code ref

But you define it as any[].
Depending on your typescript compiler settings, you may get an error or warning.

The explict type would be:

view: [number, number] = [400, 400];

See more examples and details in this Stackblitz example

edited Oct 27 '21 at 06:58

answered Jul 08 '21 at 08:56

TmTron

17,012
10
94
142

For some strange reason view = [400, 400]; still gives me the same error? It's very strange – yea2021 Jul 08 '21 at 09:09
Editor is complaining about this: [view]="view" ... the ts file now has this: view = [400, 400]; – yea2021 Jul 08 '21 at 09:11
you should add the exact error-output and in which line it occurs – TmTron Jul 08 '21 at 09:11
The exact error is: Error: src/app/app.component.html:5:14 - error TS2322: Type 'number[]' is not assignable to type '[number, number]'. Target requires 2 element(s) but source may have fewer. 5 [view]="view" – yea2021 Jul 08 '21 at 09:17
Maybe ngx-charts is not compatable with Angular 12 ? – yea2021 Jul 08 '21 at 09:18
try this: `view = [400, 400] as const;` – TmTron Jul 08 '21 at 09:19
No luck...same problem ... hmmmm ... I might have to use a different chart library :( – yea2021 Jul 08 '21 at 09:23
strange - and when you use an explicit type: `view: [number, number] = [400, 400];` – TmTron Jul 08 '21 at 09:25
BTW: which version of the lib are you using? – TmTron Jul 08 '21 at 09:25
Sould be the latest ... "@swimlane/ngx-charts": "^18.0.1", – yea2021 Jul 08 '21 at 09:28
in 18.0.1 view is defined as `[number, number]` [source-ref](https://github.com/swimlane/ngx-charts/blob/0bcbb1ca1814adf4664def7b184471de78c3c94a/projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts#L30) - so the code in my last 2 comments should work. you may post your tsconfig.json - maybe you have some strange settings there. – TmTron Jul 08 '21 at 09:34
I've added the tsconfig code to the question – yea2021 Jul 08 '21 at 09:41
You must add the code to your question - not to the answer. – TmTron Jul 08 '21 at 09:45
Anyway, here's a stackblitz example that seems to work fine: https://stackblitz.com/edit/swimlane-linear-gauge-chart-qvhmrr?file=tsconfig.json – TmTron Jul 08 '21 at 09:46
Maybe you use a different type-script version -check your package.json – TmTron Jul 08 '21 at 09:47
I've tried version 16.0.0 of the library and I get the same error ... must be an Angular 12 thing .. I'll look into another charts library for angular – yea2021 Jul 08 '21 at 10:05
1

As [400, 400]' is 'readonly' const cannot be assigned to the mutable type '[number, number]. const can be removed. – Gaurav Shrestha Oct 22 '21 at 15:28
@Guarav Shrestha thanks for the comment, you are absolutely right. I've updated my answer and provided a Stackblitz example. – TmTron Oct 27 '21 at 06:59

score 0 · Answer 2 · edited Sep 08 '21 at 13:58

0

Set "strictTemplates": false in your tsconfig.json, like this:

 "angularCompilerOptions": {
   "enableI18nLegacyMessageIdFormat": false,
   "strictInjectionParameters": true,
   "strictInputAccessModifiers": true,
   "strictTemplates": false,
 }

Refs: Angular Compiler Options TypeScript Configuration

edited Sep 08 '21 at 13:58

Adrian Mole

49,934
160
51
83

answered Sep 08 '21 at 10:58

reekoong

11
1

Angular 12 - is not assignable to type '[number, number]

2 Answers2