-1

hi everyone ,i'am begginer in the angular framework , i created the first component,but got an error someone can help me please,

enter image description here

here is the error in the console log

enter image description here

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Ilyass El
  • 27
  • 8
  • 1
    Does this answer your question? [Property '...' has no initializer and is not definitely assigned in the constructor](https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc) – R. Richards Oct 21 '21 at 21:11

2 Answers2

1

mate! Welcome on board!

The error is thrown by the linter due to the TypeScript rule strictPropertyInitialization. See: https://www.typescriptlang.org/tsconfig#strictPropertyInitialization

When set to true, TypeScript will raise an error when a class property was declared but not set in the constructor.

The problem with your code is that you've type the appareilStatus as a string, but did not make sure that the variable is actually defined. In the case that your component appareilStatus is used without the input, that variable will be undefined and therefore not a string.

<app-appareil></app-appareil>
instead of your intended
<app-appareil appareilStatus="..." [appareilName]="'...'"></app-appareil>

To solve this error you have multiple options:

  1. Add undefined to the types: @Input() appareilStatus: string | undefined
  2. Mark appareilStatus as an optional parameter @Input() appareilStatus?: string
  3. Initialize your variable with a default value: @Input() appareilStatus: string = ''
  4. Initialize your variable in the constructor
@Input() appareilStatus: string

constructor() {
  this.appareilStatus = 'add your logic here';
}
  1. Not recommended: suppress the error in that line by adding // @ts-ignore in the line before
  2. Use a non-null assertion and mark your variable as "never undefined" if you intend this field as a required input: @Input() appareilStatus: string

or... if you are annoying by this rule for now. You can disable this check by adding "strictPropertyInitialization": false to your tsconfig.json

zZeepo
  • 336
  • 1
  • 3
  • 9
  • 1
    Oh! Just noticed that Mohamed.Karkotly already answered your question in the meantime. Just note that the `!` will actually mark this field required for the compiler. In that case it will not warn you about potential errors later on like `Object is possibly 'undefined'.` if you try to do `this. appareilName.indexOf('something')` for example, which would fail, if `appareilName` is `undefined`. – zZeepo Oct 21 '21 at 21:33
  • You answered that better, good job! – Mohamed Karkotly Oct 21 '21 at 21:40
0

This is due to something called strictPropertyInitialization which is equal to true in tsconfig.json.

So we have to tell the compiler that this instance will be initialized during runtime.

We do that by adding the ! operator to ignore strict type.

Your declaration will become like the following

@Input() appareilName!: string;

Hope this helped.

Mohamed Karkotly
  • 1,364
  • 3
  • 13
  • 26