CODEWITHSUNDEEP
htmlangulartypescriptangular-pipe
Hamish McBrearty
Hamish McBrearty

Reputation: 179

Angular 9 Keyvalues pipe doesn't build for production

My app that I've created runs fine on the development server, ng serve, but when I attempt to build for production it fails with this error

ERROR in src/app/leaderboard/leaderboard.component.html(9,17): Argument of type 'object' is not assignable to parameter of type 'Map<unknown, unknown>'

Here's my leaderboard.component.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/firestore';


@Component({
  selector: 'app-leaderboard',
  templateUrl: './leaderboard.component.html',
  styleUrls: ['./leaderboard.component.css']
})

export class LeaderboardComponent implements OnInit {

  constructor() { }
  db = firebase.firestore();
  cities:object;
  suburbs:object;
  unsorted() { }
  async getCities() {
    await this.db.collection("Cities").orderBy('count', "desc").get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            //console.log(doc.id, ": ", doc.data().count);
            this.cities[doc.id] = doc.data().count
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
  }

  async getSuburbs() {
    await this.db.collection("Suburbs").orderBy('count', "desc").get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            //console.log(doc.id, ": ", doc.data().count);
            this.suburbs[doc.id] = doc.data().count
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
  }



  ngOnInit() {
    this.getCities()
    this.getSuburbs()
  }

}

And here's the leaderboard.component.html

<div class="container">
    <div class="row">
        <h3>Cities</h3>
        <table class="table">
            <thead class="thead-dark">
                <th scope="col">City</th>
                <th scope="col">Bears found</th>
            </thead>
            <tr *ngFor="let city of cities | keyvalue: unsorted">
                <td>{{city.key}}</td>
                <td>{{city.value}}</td>
            </tr>
        </table>
    </div>
    <div class="row">
        <h3>Suburbs</h3>
        <table class="table">
            <thead class="thead-dark">
                <th scope="col">Suburb</th>
                <th scope="col">Bears found</th>
            </thead>
            <tr *ngFor="let suburb of suburbs | keyvalue: unsorted">
                <td>{{suburb.key}}</td>
                <td>{{suburb.value}}</td>
            </tr>
        </table>
    </div>
</div>

I think this is some sort of typing error from TypeScript but as I'm not much more than a beginner, I'm not quite sure what I can do to fix it.

I've left out a second error for line 22 of the html as it's the same as the error on line 9 where I use the keyvalue pipe

Thanks

Upvotes: 10

Views: 2802

Answers (4)

Jonathan
Jonathan

Reputation: 904

using $any() type casting is also a way to get rid of the error:

<tr *ngFor="let city of $any(cities) | keyvalue: unsorted">

Upvotes: 3

Roshan Khandelwal
Roshan Khandelwal

Reputation: 973

Having the "strictTemplates" flag enabled implies that "fullTemplateTypeCheck" is also enabled, so the latter can not be explicitly disabled.

One of the following actions is required:

  1. Remove the "fullTemplateTypeCheck" option.
  2. Remove "strictTemplates" or set it to 'false'.

Upvotes: 1

Willie
Willie

Reputation: 338

I had the same issue and tried all kinds of pipes and workarounds to be able to build. I ended up changing the following in my tsconfig file and I was able to build.

Obviously, this isn't a desirable long term solution. I will update angular when the newest version comes out and see if this isn't fixed.

"fullTemplateTypeCheck": false,

Upvotes: 0

yuval.bl
yuval.bl

Reputation: 5074

According to this issue which is now solved, Seems like upgrading angular might solve your issue.

Upvotes: 0

Related Questions