Angular Error error TS2532: Object is possibly 'undefined'

I have been unable to find why I am getting this error on a Angular project.

Plan contains and array of Tasks. Each Task contains an entity called MetaTime. MetaTime has a field TaskStart.

plan.usergen.model.ts

import { Moment } from 'moment';
import {ITaskUsergen} from "app/shared/model/task.usergen.model";

export interface IPlan {
  id?: number;
  name?: string;
  startDate?: Moment;
  tasks?: ITaskUsergen[];
}

export class Plan implements IPlan {
  constructor(
    public id?: number,
    public name?: string,
    public startDate?: Moment,
    public tasks?: ITaskUsergen[],
  ) {}
}

task.usergen.model.ts

import {ITask, Task} from "app/shared/model/task.model";
import {MetaTime} from "app/shared/model/meta-time.model";

export interface ITaskUsergen extends ITask {
  metaTime?: MetaTime;
}

export class TaskUserGen extends Task implements ITaskUsergen {
  constructor(public metaTime?: MetaTime) {
    super();
  }
}

meta-time.model.ts

import { Moment } from 'moment';

export interface IMetaTime {
  id?: number;
  taskStart?: Moment;
  taskDuration?: number;
  taskInterval?: number;
  taskRepeat?: number;
}

export class MetaTime implements IMetaTime {
  constructor(
    public id?: number,
    public taskStart?: Moment,
    public taskDuration?: number,
    public taskInterval?: number,
    public taskRepeat?: number
  ) {}
}

The full error is:

ERROR in src/main/webapp/app/entities/plan-usergen/plan-detail.component.html:47:46 - error TS2532: Object is possibly 'undefined'.
47   <td>{{ task.metaTime.taskStart }}</td>
                                            ~~~~~~~~
src/main/webapp/app/entities/plan-usergen/plan-detail.component.ts:7:16
7   templateUrl: './plan-detail.component.html',
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PlanDetailComponent.

It's probably because you're compiling AOT (Ahead of Time) and the metaTime is nullable (the questionmark after metaTime?).

The compiler gives the error because it's pretty strict I think (not quite an angular expert myself) but you should do a null-check to prevent the possible null situation.

You can at least fix it by using this, the question is whether this is the behavior YOU expect to happen:

<td>{{ task.metaTime?.taskStart }}</td>

In the end it's all about having code that behaves like you would expect.

Since you've made the entire chain of variables leading up to taskStart optional, technically any of them could be undefined, which would make it impossible to access the taskStart variable. You should either access it in a null-safe way or re-think weather the variables need to be optional.