Trouble with eventAggregator when using slightly more complicated implementation

I am trying to implement a simple messaging system where a div resides at the top of the page and it has one viewmodel called messages.

I followed THIS (Eric L. Anderson’s tutorial on the eventAggregator) tutorial but mine is a little different and is error-ing.

The viewmodel is called messages - first the template:

            message: ${message}
            alertType: ${alertType}

Here is the typescript file’s contents:

import { Aurelia, PLATFORM, autoinject } from "aurelia-framework";
import { EventAggregator } from 'aurelia-event-aggregator';

export class Messages {
  public alertType: string;
  public message: string;

  constructor(private eventAggregator: EventAggregator) {

    this.eventAggregator.subscribe(MessagePayload, (publishedMessage, alertType) => {
        this.message = publishedMessage;
        this.alertType = alertType;


As you can see the constructor has the subscribe function. “MessagePayload” is the class that can be instantiated. It goes to a function that takes two parameters.

This is “MessagePayload” - has two variables in its constructor.

    export class MessagePayload {
        alertType: string;
        message: string;

        constructor(message: string, alertType: string) {
            this.message = message;
            this.alertType = alertType;


I am publishing from a manual button for the moment and the function bound to that button is this:

secondTestAggregator() {
    this.eventAggregator.publish(new MessagePayload("Updated test message", "success"));

I am getting an error on this publish line:

scheduler.ts:35 Uncaught TypeError: Cannot set property ‘message’ of undefined
at (scheduler.ts:35)

I dont know why this is not working and wonder if someone might point out the reason why?

From your post it looks like MessagePayload is a class/method and not a channel (string).

According to their docs,, you’ll need first a string which represents the channel, then your payload.


this.eventAggregator.subscribe('my-event-channel-name', (publishedMessage, alertType) => {
        this.message = publishedMessage;
        this.alertType = alertType;


secondTestAggregator() {
    this.eventAggregator.publish('my-event-channel-name', new MessagePayload("Updated test message", "success"));

Thank you that now works…

For completeness sake, the channel doesn’t need to be a string. It can be a function or anything really. The only issue with his code is that he wasn’t specifying the channel in the publish. This would work fine though:

this.eventAggregator.publish(MessagePayload, new MessagePayload("Updated test message", "success"));
1 Like