Aurelia - Trouble with EventAggregator. Cant read property "publish"

Question

I have eventAggregator working in all other parts oh my project. I have two roots and I am using eventAggregator to publish messages to a message div and it works.

In my public root I have "public.ts" which has my route configuration. In there I have a PostRenderStep in which I publish a message.. well I am publishing an empty message to force the message to disappear.

Here is my PostRenderStep class:

class PostRenderStep {

    constructor(private eventAggregator: EventAggregator) { }

    run(navigationInstruction: NavigationInstruction, next: Next): Promise<any> {
        console.log("I'm inside the POST activate step!")
        return Promise.resolve()
            .then(() => this.eventAggregator.publish('messages', new MessagePayload("", "", "")))
            .then(result => next());
    }
}

When I run this I get two errors - the first is with the event aggregator:

aurelia-logging-console.js:47 ERROR [app-router] TypeError: Cannot read property 'publish' of undefined
at public.ts:87
at <anonymous>

and right after this error is:

ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored.

I suspect that the postRenderStep with the navigation is failing because of the eventAggregator line and cause this second error.

I investigated this to find out if it was my event aggregator that wasnt working in the public root but the fact I posted a message after I changed roots and this displays says its working. I also placed a button that when clicked had a publish in it which also worked indicated that its working - just not in this class.

Could someone explain in more detail what this error is saying and further why its happening and how to fix it...

It works perfectly in my other root just not in this one.

The full public.ts file

import { Aurelia, PLATFORM, autoinject } from 'aurelia-framework';
import {
    Redirect,
    NavigationInstruction,
    Router,
    RouterConfiguration,
    Next,
    PipelineProvider
} from "aurelia-router";
import { EventAggregator } from 'aurelia-event-aggregator';


import { Messages, MessagePayload } from '../../services/messages/messages'

@autoinject
export class Public {
    public router: Router;

    configureRouter(config: RouterConfiguration, router: Router): void {
        this.router = router;
        config.title = "Aurelia";
        config.addPostRenderStep(PostRenderStep);


        config.map([
            {
                route: ["", "home"],
                name: "home",
                settings: { icon: "home" },
                moduleId: PLATFORM.moduleName("../components/home/home"),
                nav: true,
                title: "Home"
            },
            {
                route: "counter",
                name: "counter",
                settings: { icon: "education", auth: false },
                moduleId: PLATFORM.moduleName("../components/counter/counter"),
                nav: true,
                title: "Counter"
            },
            {
                route: "fetch-data",
                name: "fetchdata",
                settings: { icon: "th-list", auth: false },
                moduleId: PLATFORM.moduleName("../components/fetchdata/fetchdata"),
                nav: true,
                title: "Fetch data"
            },
            {
                route: "login",
                name: "login",
                settings: { icon: "user", auth: false, },
                moduleId: PLATFORM.moduleName("../components/login/login"),
                nav: true,
                title: "Login"
            },
            {
                route: "notFound",
                name: "notFound",
                settings: { auth: false, },
                moduleId: PLATFORM.moduleName("../components/notFound/notFound"),
                nav: false,
                title: "Not Found"
            }
        ]);

        config.mapUnknownRoutes('../components/notFound/notFound');

    }
}

    class PostRenderStep {

        constructor(private eventAggregator: EventAggregator) { }

        run(navigationInstruction: NavigationInstruction, next: Next): Promise<any> {
            console.log("I'm inside the POST activate step!")
            return Promise.resolve()
                .then(() => this.eventAggregator.publish('messages', new MessagePayload("", "", "")))
                .then(result => next());
        }
    }

Answer 1

You didn't autoinject in your PostRenderStep

@autoinject
class PostRenderStep {

}