Property ‘…’ has no initializer and is not definitely assigned in the constructor in Angular

If you’re developing an Angular application using the latest version of TypeScript, you might encounter a compilation error: “Property ‘…’ has no initializer and is not definitely assigned in the constructor.” This error is due to the strict class initialization introduced in TypeScript 2.7.

This tutorial will guide you through various solutions provided by the community to resolve this issue.

Solution 1: Update tsconfig.json

Open your tsconfig.json file and set the strictPropertyInitialization flag to false under the compilerOptions. This disables strict property initialization and resolves the compilation error.

"compilerOptions": {
    "strictPropertyInitialization": false,
    // other options...
}

Solution 2: Change TypeScript version in VSCode

If you are using Visual Studio Code, you can change the TypeScript version that the editor uses. This can be done by configuring the TypeScript version in your editor settings.

Solution 3: Initialize Variables in the Constructor

Ensure that all class properties are initialized either when declared or in the constructor. For example:

// Option A: Initialize when declared
makes: any[] = [];

// Option B: Initialize in the constructor
constructor(private makeService: MakeService) {
    this.makes = [];
}

Solution 4: Use Definite Assignment Assertion

If you are sure that a property will be assigned a value at runtime, you can use the definite assignment assertion (!):

makes!: any[];

Solution 5: Adjust Input Bindings

When dealing with @Input properties, add the definite assignment assertion or use optional properties if the variable might be undefined:

@Input() userId!: string;
// or
@Input() userId?: string;

Solution 6: Update tsconfig.json Strict Options

If the compilation error is related to strict options in tsconfig.json, adjust the following settings:

"compilerOptions": {
    "noImplicitReturns": false,
    "strictPropertyInitialization": false,
    // other options...
}

Solution 7: Assign Default Values

Assign default values to properties in the constructor to ensure they are initialized:

employees: Employee[];

constructor() {
    this.employees = [];
}

Choose the solution that best fits your project’s requirements. Whether it’s adjusting compiler options, initializing variables, or using definite assignment assertions, these approaches will help you overcome the “Property ‘…’ has no initializer” error in Angular applications.