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?

Answer 1

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

Answer 2

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 ;)

Answer 3

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 }} {{ product?. description }}

Answer 4

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

someObject['someProperty']

instead of

someObject.someProperty

Answer 5

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;
});

Answer 6

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;
}

Answer 7

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);
    }
}

Answer 8

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?