Erro no negociacoes-view e no mensagem-view

O erro na verdade está no controlador  Pela aula está certo

No negociacoes-view

import { Negociacoes } from "../models/negociacoes.js";
import { View } from "./view.js";

export class NegociacoesView extends View<Negociacoes> {

    template(model: Negociacoes): string {
        return `
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Quantidade</th>
                    <th>Valor</th>
                </tr>
            </thead>

            <tbody>
                ${model.lista().map(negociacao => {
                    return `
                        <tr>
                            <td>${new Intl.DateTimeFormat().format(negociacao.data)}</td>
                            <td>${negociacao.quantidade}</td>
                            <td>${negociacao.valor}</td>
                        </tr>
                    `
                }).join('')}
            </tbody>
        </table>`;
    }

    update(model: Negociacoes):void {
        const template = this.template(model);
        this.elemento.innerHTML = template;
    }
}

No MensagemView

import { View } from "./view.js";

export class MensagemView extends View<string> {
    template(model: string): string {
        return `
            <p class="alert alert-info=>${model}</p>
        `;
    }
}

E no View

export abstract class View<T> {

    protected elemento: HTMLElement;
    
    construtor(seletor:string) {
        this.elemento = document.querySelector(seletor)
    }

    abstract template(model: T): string;

    update(model: T): void {
        const template = this.template(model);
        this.elemento.innerHTML = template;
    }
}