CODEWITHSUNDEEP
angulartypescript
Smokey Dawson
Smokey Dawson

Reputation: 9230

Angular does not recognise item from keyvalue pipe on ng build --prod

I am trying to use the keyvalue pipe in my production Angular application

I have some data like this (basic example - not actual data)

{
    01-12-19: [
        {
            message: 'hello',
            id: 12
        },
        {
            message: 'goodbye',
            id: 13
        }
    ],
    02-12-19: [
        {
            message: 'hello',
            id: 14
        },
        {
            message: 'goodbye',
            id: 15
        }
    ]
}

now in my component HTML I am trying to use the | keyvalue pipe like so

<div *ngFor="let item of messages | keyvalue | orderBy: item?.key">
    <div class="date">
        {{item?.key | momentFormat: 'DD/MM/YYYY'}}
    </div>
    <app-message
        *ngFor="let message of item?.value"
        [message]="message"
    >
    </app-message>
</div>

now this works, I can see the list of messages.

But when I try and build my project with ng build --prod I keep getting these errors

Property 'item' does not exist on type 'MessageContainerComponent'

How can I fix this issue? This error does not show up when I run ng build only errors on production.

Upvotes: 0

Views: 1256

Answers (1)

Chintan Kotadiya
Chintan Kotadiya

Reputation: 1395

I have to replicate that issue in local and I face the same issue. I have resolved that like that way.

I have checked also in production mode.

<div *ngFor="let item of messages | keyvalue | orderBy: messages.item">
    <div class="date">
        {{item.key | momentFormat: 'DD/MM/YYYY'}}
    </div>
    <app-message
        *ngFor="let message of item.value"
        [message]="message"
    >
    </app-message>
</div>

Please try that way. hope this will help you.

Upvotes: 1

Related Questions