New to Typescript/Angular. TS2339 compiling error. *ngIf="x.length > 0;" should be false but still tries to compile the elements inside

Issue

I'm following a Typescript/Angular course that is showing me how to use "*ngIf". The instructor is giving an example of an empty array so that it fails the condition and compiles the second set of ul tags. It worked for the instructor, but not for me.

image-box.component.html

<div id="image-box">
    <div class="left">
        <img src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"/>
        <app-title></app-title>
    </div>
    <div class="right">
        <h3>Contracts</h3>
        <ul *ngIf="contractInComponent.length > 0">
            <li *ngFor="let contract of contractInComponent">
                Service: {{ contract.service }} <br>
                Title: {{ contract.title }}
            </li>
        </ul>
        <ul *ngIf="contractInComponent.length == 0">
            <li>Empty</li>
        </ul>
    </div>
</div>

get-data.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class GetDataService {

  constructor() { }

  getContracts() {
    return [];
  }
}

image-box.component.ts

import { Component, OnInit } from '@angular/core';
//import { ImageBoxService } from './image-box.service';
import { GetDataService } from './get-data.service';

@Component({
  selector: 'app-image-box',
  templateUrl: './image-box.component.html',
  styleUrls: ['./image-box.component.scss']
})
export class ImageBoxComponent implements OnInit {
  contractInComponent;
  constructor(service:
    GetDataService) {
    this.contractInComponent = service.getContracts();
  }

  ngOnInit() {}
}

Compiled with problems:

ERROR

src/app/image-box/image-box.component.html:12:38 - error TS2339: Property 'service' does not exist on type 'never'.

12                 Service: {{ contract.service }} <br>
                                        ~~~~~~~

  src/app/image-box/image-box.component.ts:7:16
    7   templateUrl: './image-box.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ImageBoxComponent.


ERROR

src/app/image-box/image-box.component.html:13:36 - error TS2339: Property 'title' does not exist on type 'never'.

13                 Title: {{ contract.title }}
                                      ~~~~~

  src/app/image-box/image-box.component.ts:7:16
    7   templateUrl: './image-box.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ImageBoxComponent.

This works when I explicitly use Booleans. The first ul tag gets ignored and compiles the second set. The output is 0.

image-box.component.html

<div id="image-box">
    <div class="left">
        <!-- <h2>{{ contractInComponent[0].service }}</h2> -->
        <img src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"/>
        <app-title></app-title>
    </div>
    <div class="right">
        <h3>Contracts</h3>
        <ul *ngIf="false">
            <li *ngFor="let contract of contractInComponent">
                Service: {{ contract.service }} <br>
                Title: {{ contract.title }}
            </li>
        </ul>
        <ul *ngIf="true">
            <li>{{ contractInComponent.length }}</li> <!-- output = 0 -->
        </ul>
    </div>
</div>

get-data.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class GetDataService {

  constructor() { }

  getContracts() {
    return [];
  }
}

Solution

Your compiler automatically determines a return type and sees that your getContracts() is always returning undefined. That's why you have the error. If you explicitly add a return type like this.

getContracts() : any {
     return [];   
}

The error will disappear because you tell the compiler it will potentially return something.

Answered By - Nathan T.