Еще один подход к построению архитектуры на фронте

Можно сделать интерфейс:

interface Eventable<E> {
    on<K extends keyof E>(event: K, cb: (event: E[K]) => void): void;
    off<K extends keyof E>(event: K, cb: (event: E[K]) => void): void;
}

Который будут реализовывать сервисы, а само управление подписками вынести в отдельный класс Emitter, который будет через композицию использоваться в сервисах:

interface NoteEvents {
    change: undefined;
}

class NoteService implements Eventable<NoteEvents > {
    emitter = new Emitter<NoteEvents>();

    on<K extends keyof E>(event: K, cb: (event: E[K]) => void): void {
        this.emitter.on(event, cb);
    }

    off<K extends keyof E>(event: K, cb: (event: E[K]) => void): void {
        this.emitter.off(event, cb);
    }
}

И тогда класс сервиса будет отвечать только за сам сервис, а подписки будут реализованы в другом классе.

Еще один подход к построению архитектуры на фронте

Эту архитектуру можно во Vue интегрировать по аналогии с React. Для этого подписка может быть в методе created, а отписка от изменений beforeDestroy. Сами сервисы можно передавать через метод provide по аналогии с контекстом.
По Angular написать не могу, так как опыта с ним не имел.