3

I'm following the View Product Details tutorial on the angular website and encountered the error:

Error in src/app/product-details/product-details.component.html (4:16) Object is possibly 'undefined'.

I can't proceed to the next tutorial because it needs this page to function.

Here is the code:

product-list.component.html

<h2>Products</h2>

<div *ngFor="let product of products">

<h3>
  <a [title]="product.name + ' details'" [routerLink]="['/products', product.id]">
    {{ product.name }}
  </a>
</h3>   
</div>

product-details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product, products } from '../products';
@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})

export class ProductDetailsComponent implements OnInit {
  product: Product|undefined;
  constructor(
    private route: ActivatedRoute,
  ) { }

  ngOnInit() {
    // First get the product id from the current route.
    const routeParams = this.route.snapshot.paramMap;
    const productIdFromRoute = Number(routeParams.get('productId'));

    // Find the product that correspond with the id provided in route.
    this.product = products.find(product => product.id === productIdFromRoute);
  }

}

product-details.component.html

<h2>Product Details</h2>

<div *ngIf="product">
<h3>{{ product.name }}</h3>
<h4>{{ product.price | currency }}</h4>
<p>{{ product.description }}</p>

</div>

I hope someone can help to figure out the problem because I see the code is functioning.

Thank you.

Peter Riesz
  • 3,091
  • 29
  • 33
henryloke
  • 67
  • 5
  • Does this answer your question? [How can I solve the error 'TS2532: Object is possibly 'undefined'?](https://stackoverflow.com/questions/54884488/how-can-i-solve-the-error-ts2532-object-is-possibly-undefined) – Yong Shun Aug 11 '21 at 02:43
  • I notice you are importing `import { Product, products } from '../products';` this statement, in your `product-details.component.ts` If possible share the code of both `Product` &`products` – Suneel Kumar Aug 11 '21 at 05:47

4 Answers4

9

I'm also doing this tutorial and I fixed it by adding the ProductDetailsComponent to the declarations inside app.module.ts.

declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
ProductAlertsComponent,
ProductDetailsComponent //<-- add this into declarations
],

Don't forget to import first the ProductDetailsComponent in app.module.ts.

import { ProductDetailsComponent } from './product-details/product-details.component';

It should work after refreshing the entire website (not just the display to the right, go save and refresh the browser tab).

Imishua
  • 91
  • 2
  • I needed to do the second part of importing the component, that was not mentioned in the tutorial in that section, but I didn't need to refresh – Ben Nov 29 '21 at 20:57
0

You might want to try using product?.name

vsnikhilvs
  • 456
  • 1
  • 3
  • 10
0

I fixed that by adding 'ProductDetailsComponent' import in 'app.module.ts'

JoCrocco
  • 1
0

tsconfig.json file

 "strict": false,

Turn off the strict. Angular will able to compile successfully.

henryloke
  • 67
  • 5