Really strange thing with aurelia router params

Question

I'm trying to set a param id on a reaction object like this:

reaction: { message_id: ""};
    async activate(params) {
        alert(params.id);
        this.reaction.message_id = params.id;
    }

The alert is correct so It prompts correctly. But then I receive in my console:

ERROR [app-router] TypeError: Cannot set property 'message_id' of undefined

Edit:

import { HttpClient, json } from "aurelia-fetch-client"
import { autoinject } from "aurelia-framework"
import { Router } from 'aurelia-router'

@autoinject
export class message {

    message: {  reactions: Reaction[], id: "" };
    editing: boolean;
    reaction: Reaction;

    constructor(private http: HttpClient, private router: Router) {
        this.editing = false;
    }

    created() {
        this.getMessage();
    }

    async activate(params) {
        alert(params.id);
        this.reaction.message_id = params.id;
    }

    getMessage() {
        this.http.fetch('message/show', {
            body: json(this.router.currentInstruction.params.id)
        })
            .then(response => response.json())
            .then(data => {
                this.message = data;
            });
    }

    update() {
        this.http.fetch('message/update', {
            body: json(this.message)
        })
            .then(response => {
                if (response.status == 200) {
                    swal({
                        title: "Bericht succesvol geupdatet",
                        type: "success",
                        showConfirmButton: false,
                        timer: 2000
                    });
                }

                this.editing = false;
            });
    }

    destroy() {
        swal({
            title: 'Weet u het zeker?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ja verwijder dit bericht',
            cancelButtonText: 'Stop!',
            confirmButtonColor: '#002e5b',
        }, (isOk) => {
            if (isOk) {
                this.http.fetch('message/destroy', {
                    body: json(this.message)
                }).then(data => {
                    swal({
                        title: 'Verwijderd',
                        text: 'Het bericht is succesvol verwijderd',
                        type: 'success',
                        showConfirmButton: false,
                        timer: 3000
                    });
                });

                this.router.navigate("/dashboard");
            }
        });
    }

    post() {
        this.message.reactions.push(this.reaction);

        this.http.fetch('reaction/store', {
            body: json(this.reaction)
        }).then(response => {
            if (response.status == 200) {
                swal({
                    title: "Reactie succesvol aangemaakt",
                    type: "success",
                    showConfirmButton: false,
                    timer: 2000
                });

                this.reaction = {};
            }
        });
    }
}

export class Reaction {
    message_id: number;
    account_id: number;
    reaction: string;
}

Answer 1

You are only giving a type to reaction, not a value. You have to instantiate it before using it. Try this:

reaction: Reaction; //this has a type but it is undefined
reaction = new Reaction(); //this has a type and it is instantiated! use this line!

This is a simple Typescript problem, nothing related to Aurelia.