Got an Ng0901 error when using routerLink

Question

This week i ran into the NG0901 Error (Yeah no message than this error) I don't know why because as it seems it's due to a RouterLink that is not correctly functionning.

To sum up the application, it's an order manager for bakery. All it was remaining is the parameter page to modify add or delete client, warehouse etc etc.

So i create a first page witch is call params and this page have button with routerLink element to 4 other page.

Here is my html code of the params page:

    <ion-header>
  <ion-toolbar>
    <ion-title>P.I.C 2.0 - Paramétre</ion-title>
    <ion-back-button slot="start" color="primary" defaultHref="home"></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <table>
    <tr>
      <td><ion-button> <a routerLink="params-client">Client</a></ion-button></td>
      <td><ion-button routerLink="./params_depot">Depot</ion-button></td>
      <!--<td><ion-button  routerLink="../depot">Feuille depot</ion-button></td>-->
    </tr>
    <tr>

      <td><ion-button routerLink="params-boul">Produit Boulangerie</ion-button></td>
      <td><ion-button routerLink="params_pat">Produit Patisserie</ion-button></td>
      <!--<td><ion-button routerLink="../params">Paramètre</ion-button></td>-->
    </tr>
  </table>
</ion-content>

And to this link is the behavior that is unusual of the ion-button and routerLink

Also here is my ng --version

ng --version

Here is also the StackTrace :

ERROR Error: Uncaught (in promise): Error: NG0901
Error: NG0901
    at e.find (main.js:1:604380)
    at C.ngDoCheck (main.js:1:468239)
    at Xa (main.js:1:501521)
    at cs (main.js:1:501322)
    at xi (main.js:1:501042)
    at $i (main.js:1:524323)
    at sy (main.js:1:531388)
    at Vv (main.js:1:525062)
    at $i (main.js:1:525073)
    at Hv (main.js:1:525433)
    at fe (polyfills.js:1:137971)
    at fe (polyfills.js:1:137482)
    at polyfills.js:1:138833
    at S.invokeTask (polyfills.js:1:128604)
    at Object.onInvokeTask (main.js:1:583005)
    at S.invokeTask (polyfills.js:1:128525)
    at S.runTask (polyfills.js:1:123644)
    at P (polyfills.js:1:130949)
    at S.invokeTask [as invoke] (polyfills.js:1:129774)
    at x (polyfills.js:1:142703)
zm @ main.js:1

And i also add the typescript and the html page where the routerLink is pointing at:

import { Component, OnInit } from '@angular/core';
import {HttpRequestService} from "../../http-request.service";

@Component({
  selector: 'app-params-client',
  templateUrl: './params-client.page.html',
  styleUrls: ['./params-client.page.scss'],
})
export class ParamsClientPage implements OnInit {
  public client:any = {}
  constructor(private http: HttpRequestService) {
    this.http.get_client_all((data) => {
      this.client = data;
    });
  }

  ngOnInit() {
  }

}



<ion-header>
  <ion-toolbar>
    <ion-title>P.I.C 2.0 - Parémetre Client </ion-title>
    <ion-back-button slot="start" color="primary" defaultHref="params" ></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content>

<ion-grid>
  <ion-row>
    <ion-col>Id</ion-col>
    <ion-col>Nom</ion-col>
    <ion-col>Lieu</ion-col>
    <ion-col>Téléphone</ion-col>
    <ion-col>Modifier</ion-col>
    <ion-col>Supprimer</ion-col>
  </ion-row>

  <ion-row *ngFor="let c of client">
    <ion-col>{{c.id_client}}</ion-col>
    <ion-col>{{c.name}}</ion-col>
    <ion-col>{{c.lieu}}</ion-col>
    <ion-col>{{c.tel}}</ion-col>
    <ion-col>
      <ion-button>Modifier</ion-button>
    </ion-col>
    <ion-col>
      <ion-button>Supprimer</ion-button>
    </ion-col>
  </ion-row>

</ion-grid>


</ion-content>

Answer 1

The issue seems to be because of below property initialization code:

public client:any = {}

client is defined as an object and not an array and hence you will get an error during *ngFor="let c of client".

NgFor only supports binding to Iterables such as Arrays. If you expect data received from the HTTP call to be an array, then you should not initialize client with empty object {}. Either you can assign [] or have no assignment at all.

If client is truly an object, then you should use KeyValuePipe to iterate over an object.

Transforms Object or Map into an array of key value pairs.