Angular+Apollo项目ng build报错：类型'{}'无nodeQuery等属性

Hey there! I’ve run into this exact issue before—your app works fine locally but breaks on ng build because TypeScript’s strict type checking kicks into high gear during production builds, even if dev mode lets some type inconsistencies slide. Let’s break down how to fix this:

1. Define a Type for Your Apollo Query Response #

The root problem is that TypeScript can’t infer the structure of the data coming back from your Drupal GraphQL server, so it defaults to treating the response as an empty object {}. To fix this, create an interface that matches the shape of your query’s return data:

// Inside your idea-list.component.ts (or a separate types file)
interface NodeQueryResult {
  nodeQuery: {
    // Match the exact fields your Drupal GraphQL endpoint returns
    entities: Array<{
      title: string;
      body?: string; // Add any other fields you're using
      id: string;
    }>;
  };
}

Then, use this interface when you call watchQuery or query with Apollo:

this.apollo.watchQuery<NodeQueryResult>({
  query: YOUR_GRAPHQL_QUERY // Replace with your actual query
}).valueChanges.subscribe(({ data, loading }) => {
  // Now TypeScript knows data has a nodeQuery property!
  this.ideaData = data.nodeQuery;
  this.loading = loading;
});

2. Type Your Component Variables #

Make sure the variables in your component that hold the Apollo data and loading state have explicit types, instead of letting TypeScript infer them as any or undefined:

export class IdeaListComponent implements OnInit {
  ideaData: NodeQueryResult['nodeQuery']; // Matches the nodeQuery shape
  loading: boolean = false; // Initialize to avoid initialization errors

  constructor(private apollo: Apollo) {}

  // ... rest of your component code
}

3. Temporary Fix: Loosen Type Checks (Not Recommended) #

If you need a quick fix to get the build working while you sort out the types, you can adjust your tsconfig.json to disable strict property initialization. But note this is a band-aid—not a long-term solution, since it bypasses useful type checks:

{
  "compilerOptions": {
    // Disable all strict checks (not ideal)
    "strict": false,
    // OR just disable strict property initialization
    "strictPropertyInitialization": false
  }
}

Why This Happens #

When you run ng serve, Angular uses a more relaxed TypeScript configuration (often with strict: false or partial strict mode) to speed up development. But ng build (especially production builds) enables stricter checks to catch potential bugs before deployment. This is why your app works locally but fails during build—TypeScript is enforcing rules that dev mode let slide.

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