Angular 4 Property does not exist on type Object on build

Question

I'm building a project using Angular, I started the project using angular-cli and when I try to run ng build --prod i keep getting this error:

Property 'description' does not exist on type Object

The code generating this error is the following:

export class AppComponent {
    product: Object = {};

    constructor(
        private store: StoreService,
        private request: RequestService,
    ) {
        this.product = this.request.getProduct(_id);
    }
}

<p>{{product.description}}</p>

I was reading some content about this and the error is because I'm using type definition to define product as Object, but I'm not passing any property definition.

I know I could define an Interface, like I do with arrays, but I wasn't able to do it. I don't know if I'm defining it wrong, this is how I tried:

export interface ProductInterface {
    id: Number;
    description: String;
    title: String;
}

product: Object<ProductInterface> = {};

But it also gives me errors. What do I need to do to avoid this?

The type of product should be ProductInterface, not Object<ProductInterface>. — JB Nizet
– JB Nizet, Commented Jun 28, 2017 at 20:00
Or this one maybe better: ng build --prod --aot false --build-optimizer false — gtamborero
– gtamborero, Commented Mar 23, 2018 at 10:22

LLai · Accepted Answer · 2017-06-28 20:08:23Z

31

For your first example. In your html, you are saying product has the property description (which it does not on type Object)

In your second example. You are initially defining product as an empty object

product: ProductInterface = {};

Which is missing the required fields of the interface. So you can remove the initialization, leaving

product: ProductInterface;

Also as others have noted, you do not need the Object<> syntax

edited Jun 28, 2017 at 20:08

answered Jun 28, 2017 at 20:01

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nikhil Radadiya Over a year ago

I have a dynamic form and don't know any form control while compilation, at compilation time I get for ex:Property 'name' does not exist on type '{}'. any solutions for this type of forms?

LLai Over a year ago

@NikhilRadadiya If there are unknown properties in your object you can add dynamic properties product: {[key: string]: string} This will allow you to assign whatever key (type string) to the object with a value (type string). This is called an index signature (basarat.gitbooks.io/typescript/docs/types/index-signatures.html)

Nikhil Radadiya Over a year ago

Thank you very much man, you saved many lives, that index structure is working like a charm

LLai Over a year ago

@NikhilRadadiya glad I could help!

Silambarasan R · Accepted Answer · 2020-09-11 04:21:25Z

9

From my case..

ngOnInit(){
    this.product = this.request.getProduct(_id); // who is _id
}

Just adding data:any at subscription works fine.

this.request.getProduct(_id).subscribe((data: any) => {
   this.product=data;
});

This would helpful while the response data having more key, value pairs. (So Its hard/Time consuming to create Interface.)

But always the best practise is to use Interfaces ;)

edited Sep 11, 2020 at 4:21

answered Feb 19, 2019 at 11:10

Silambarasan R

1,60420 silver badges24 bronze badges

Comments

Kirill Chilingarashvili · Accepted Answer · 2019-12-09 10:22:20Z

8

If the property is dynamic (not known at compile time), you can use

someObject['someProperty']

instead of

someObject.someProperty

answered Dec 9, 2019 at 10:22

Kirill Chilingarashvili

1,0891 gold badge12 silver badges10 bronze badges

1 Comment

Christian Vincenzo Traina Over a year ago

it doesn't change anything in Angular v16

crash · Accepted Answer · 2017-06-28 20:01:00Z

5

First of all I would simply use product: ProductInterface; and you don't even have to initialize it.

Then, probably this will fix your error {{ product?. description }}

answered Jun 28, 2017 at 20:01

crash

4,5829 gold badges36 silver badges60 bronze badges

2 Comments

celsomtrindade Over a year ago

What does it mean to use ? ?

LLai Over a year ago

@celsomtrindade that is the safe navigation operator (I believe its called elvis operator in other languages) concretepage.com/angular-2/… . Basically angular won't look for the description field until product is defined. Without it you may get an cannot read property description of undefined error.

alehn96 · Accepted Answer · 2017-06-28 20:33:19Z

0

You must define the request in OnInit method, your controller that implements OnInit interface and define a new method

ngOnInit(){
    this.product = this.request.getProduct(_id); // who is _id
}

Assuming that getProduct() is http request that return a observable

this.request.getProduct(_id).subscribe((data) => {
   this.product=data;
});

edited Jun 28, 2017 at 20:33

answered Jun 28, 2017 at 20:05

alehn96

1,4031 gold badge14 silver badges23 bronze badges

1 Comment

celsomtrindade Over a year ago

that's not the point, I just removed the unecessary code and forgot this part. The request function is working fine.

suhailvs · Accepted Answer · 2018-11-05 11:08:34Z

0

It is safe to use any rather than Object when data is requested from server, because we don't know what will be returned from server. So you don't need to typecheck ie:

export class AppComponent {
    product: any;

    constructor(
        private store: StoreService,
        private request: RequestService,
    ) {
        this.product = this.request.getProduct(_id);
    }
}

answered Nov 5, 2018 at 11:08

suhailvs

21.9k15 gold badges104 silver badges104 bronze badges

1 Comment

Max Coplan Over a year ago

While this may be true at the time it was written, TypeScript has since included unknown to serve this very purpose

我零0七 · Accepted Answer · 2021-05-27 01:58:25Z

0

If you use command ng serve and build success.

May,you have the trouble with build configuration

maybe you need to modify the className.prod.ts like className.ts

my another answer has more detail:

Angular - How to fix 'property does not exist on type' error?

edited May 27, 2021 at 1:58

answered May 26, 2021 at 7:51

我零0七

5015 silver badges8 bronze badges

Comments

Christian Vincenzo Traina · Accepted Answer · 2023-10-18 17:33:01Z

0

In Angular 16 none of the other solutions worked.

Luckily, the documentation is clear about this: you can use $any(...):

{{ $any(product).unknownProperty }}

answered Oct 18, 2023 at 17:33

Christian Vincenzo Traina

10.6k4 gold badges46 silver badges79 bronze badges

Comments

Jorge Casariego · Accepted Answer · 2017-09-28 20:43:39Z

-2

In my case it worked after set my properties as public

So, just change this

export interface ProductInterface {
    id: Number;
    description: String;
    title: String;
}

to this

export interface ProductInterface {
    public id: Number;
    public description: String;
    public title: String;
}

answered Sep 28, 2017 at 20:43

Jorge Casariego

22.3k6 gold badges94 silver badges98 bronze badges

Collectives™ on Stack Overflow

Angular 4 Property does not exist on type Object on build

9 Answers 9

4 Comments

Comments

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

Comments

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related