Object is possibly 'null' - ошибка. Typescript

Нам необходимо активировать модальное окно с помощью функции в классе, но переменную modal терминал выдает как Object is possibly 'null'. Функция в конце класса - modalAction.

export class PonyBox {
readonly leaderIcon = partyLeaderIcon;
readonly inviteIcon = faUserPlus;
readonly removeIcon = faUserTimes;
readonly cogIcon = faUserCog;
readonly checkIcon = faCheck;
readonly ignoreIcon = faMicrophoneSlash;
readonly hideIcon = faEyeSlash;
readonly starIcon = faStar;
readonly addFriendIcon = faUserPlus;
readonly removeFriendIcon = faUserMinus;
readonly messageIcon = faComment;
isIgnored = isIgnored;
isFriend = isFriend;
removingFriend = false;
@Input() pony?: Pony;
@Output() sendMessage = new EventEmitter<Entity>();
constructor(private model: Model, private game: PonyTownGame) {
    
}
get ignoredOrHidden() {
    return this.pony && (isIgnored(this.pony) || isHidden(this.pony));
}
get isMod() {
    return this.model.isMod;
}
get canInviteToParty() {
    return this.pony && (!this.game.party || (isPartyLeader(this.game) && !isPonyInParty(this.game.party, this.pony, true)));
}
get canRemoveFromParty() {
    return this.pony && isPartyLeader(this.game) && isPonyInParty(this.game.party, this.pony, true);
}
get canPromoteToLeader() {
    return this.pony && isPartyLeader(this.game) && isPonyInParty(this.game.party, this.pony, false);
}
get special() {
    const tag = getTag(this.pony && this.pony.tag);
    return tag && tag.name;
}
get specialClass() {
    const tag = getTag(this.pony && this.pony.tag);
    return tag && tag.tagClass;
}
get paletteInfo() {
    return this.pony && getPaletteInfo(this.pony);
}
inviteToParty() {
    this.playerAction(PlayerAction.InviteToParty);
}
removeFromParty() {
    this.playerAction(PlayerAction.RemoveFromParty);
}
promoteToLeader() {
    this.playerAction(PlayerAction.PromotePartyLeader);
}
toggleIgnore() {
    if (this.pony) {
        const ignored = isIgnored(this.pony);
        this.playerAction(ignored ? PlayerAction.Unignore : PlayerAction.Ignore);
        this.pony.playerState = setFlag(this.pony.playerState, EntityPlayerState.Ignored, !ignored);
    }
}
hidePlayer(days: number) {
    this.playerAction(PlayerAction.HidePlayer, days * DAY);
}
addFriend() {
    this.playerAction(PlayerAction.AddFriend);
}
removeFriend() {
    this.playerAction(PlayerAction.RemoveFriend);
}
private playerAction(type: PlayerAction, param: any = undefined) {
    const ponyId = this.pony && this.pony.id;

    if (ponyId) {
        this.game.send(server => server.playerAction(ponyId, type, param));
    }
}
sendMessageTo() {
    if (this.pony) {
        this.sendMessage.emit(this.pony);
    }
}
// supporter servers
get canInviteToSupporterServers() {
    return false; // DEVELOPMENT; // TODO: check if ignored or hidden
}
get isInvitedToSupporterServers() {
    return false;
}
inviteToSupporterServers() {
    this.playerAction(PlayerAction.InviteToSupporterServers);
}
modalAction() {
    let modal = document.getElementById('myModal');
    modal.style.display = "block";
}

}

Само модальное окно:
button#myBtn Open Modal
        #myModal.modal
            .modal-content
                .modal-header
                    span.close &times;
                    h2 Modal Header
                .modal-body
                    iframe(name='myiframe')
                    p Some text in the Modal Body
                    p Some other text...
                .modal-footer
                    h3 Modal Footer

Ответы (1 шт):

Автор решения: Aziz Umarov

Всё на самом деле просто

element = document.getElementById(id);

Возвращаемое значение ссылка на объект типа Element соответствующий указанному ID или null

в коде

let modal = document.getElementById('myModal');
modal.style.display = "block";

нет проверки на null

let modal = document.getElementById('myModal');
if (modal) {
    modal.style.display = "block";
}
→ Ссылка