Angular 5仅ng serve --prod时报错：Property 'id'不存在于ProductModel

Let's break down your issue and answer your questions step by step:

Why does ng serve work but ng serve --prod throw an error? #

The core difference here is that Angular's production mode enables strict template type checking by default, while development mode uses more lenient checks (or skips some entirely). Here's what's likely going on:

1. Your ProductModel definition is missing the id property (or has a case mismatch like Id instead of id). Even if the API returns an id field, TypeScript can't validate it against your model if the model doesn't explicitly declare it.
2. The data returned from bcProductService.getProductById isn't properly typed. If your service method doesn't specify it returns a ProductModel, TypeScript might infer a generic type that excludes id—development mode overlooks this, but prod mode's strict checks catch it.
3. You're assigning single.data to product without type validation. If single.data's structure doesn't match ProductModel, loose development checks let it slide, but strict prod checks flag the mismatch when the template tries to access product.id.

Answers to your questions #

1. Did I set this.product incorrectly? #

Your assignment logic is fine, but there's a type mismatch issue. Fix these points to resolve the error:

• Verify your ProductModel: Make sure it explicitly includes the id property. For example:

  export interface ProductModel {
    id: number; // or string, match your API's data type
    // add other product properties here
  }
  

• Type your service response: Ensure getProductById returns an Observable of the correct type, so TypeScript knows single.data is a ProductModel:

  getProductById(id: number): Observable<{ data: ProductModel }> {
    return this.http.get<{ data: ProductModel }>(`your-api-url/${id}`);
  }
  

  This tells TypeScript exactly what structure to expect from the API response, making the assignment this.product = single.data type-safe.

2. How can I see all errors in development mode? #

You don't need to rely solely on ng build --prod to catch these issues. Enable strict checks in your project so development mode flags the same errors as prod:

• Open your tsconfig.json file and update these settings:

  {
    "compilerOptions": {
      "strict": true, // Enables all strict type-checking options
      "noImplicitAny": true // Flags variables with implicit `any` type
    },
    "angularCompilerOptions": {
      "strictTemplates": true // Enables strict template type checking (prod default)
    }
  }
  

  After saving, run ng serve—you'll now see the same id property error in development mode, letting you fix it early.

• About environment.ts: Enabling strict checks doesn't affect your environment variables at all. You can still use environment.prod.ts for production-specific configs while keeping strict checks enabled in both modes. Strict checks only enforce type safety, which is independent of your environment setup.

内容的提问来源于stack exchange，提问作者Omar