Aurelia -- Route Change on Form Submission Issue
<p>Aurelia newbie here and I have hit a wall.</p>

<p>So, this code works just fine and the route change happens, but it only happens after the Submit button on the <code>home.html</code> file is clicked TWICE.  On the first Submit button click, I get the following error: <code>ERROR [app-router] Error: Route not found: /anonymous-wow-armory-profile/</code>.  </p>

<p>My question is why does it work after two form submissions, but not the first one?  I know I am missing something in the process here.</p>

<p><strong>home.html</strong></p>

<pre><code>&lt;template&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-12 nav-home text-center"&gt;
                &lt;a href="http://www.maskedarmory.com"&gt;Create Profile&lt;/a&gt;
                &lt;a href="mailto:shane@khaccounts.net?subject=Bug Report"&gt;Bug Report&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
                &lt;div class="logo"&gt;
                    &lt;img src="dist/assets/images/logo.png" alt="Logo" /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="row row-bottom-pad"&gt;
            &lt;div class="col-md-4"&gt;&lt;/div&gt;
            &lt;div class="col-md-4"&gt;
                &lt;div class="profile-creation-box"&gt;
                    &lt;div class="box-padding"&gt;
                        &lt;strong&gt;Masked Armory&lt;/strong&gt; is the most well known anonymous World of Warcraft (WoW) profile source in the Real Money Trading (RMT) market. We take everything to the next level with offering alternate gear sets, sorted reputation display, Feat of Strength / Legacy achievement display, and much more!&lt;br /&gt;&lt;br /&gt;
                        Come make a profile at Masked Armory today and see that we are the best solution for all of your anonymous WoW Armory profile needs!
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="row"&gt;
            &lt;div class="col-md-4"&gt;&lt;/div&gt;
            &lt;div class="col-md-4 container-bottom-pad"&gt;
                &lt;div class="profile-creation-box"&gt;
                    &lt;div class="box-padding"&gt;
                        &lt;form class="form-horizontal" role="form" submit.delegate="submit()"&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="col-sm-3 control-label"&gt;Region&lt;/label&gt;
                                &lt;div class="col-sm-9"&gt;
                                    &lt;label class="radio-inline"&gt;
                                        &lt;input type="radio" name="region_name" value="us" checked.bind="postData.region"&gt; United States
                                    &lt;/label&gt;
                                    &lt;label class="radio-inline"&gt;
                                        &lt;input type="radio" name="region_name" value="eu" checked.bind="postData.region"&gt; Europe
                                    &lt;/label&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label for="server_name" class="col-sm-3 control-label"&gt;Server&lt;/label&gt;
                                &lt;div class="col-sm-9"&gt;
                                    &lt;input type="text" class="form-control" id="server_name" placeholder="Server Name" value.bind="postData.serverName"&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label for="character_name" class="col-sm-3 control-label"&gt;Character&lt;/label&gt;
                                &lt;div class="col-sm-9"&gt;
                                    &lt;input type="text" class="form-control" id="character_name" name="character_name" placeholder="Character Name" value.bind="postData.characterName"&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="form-group"&gt;
                                &lt;div class="col-sm-offset-3 col-sm-9"&gt;
                                    &lt;div class="checkbox"&gt;
                                        &lt;label&gt;
                                            &lt;input type="checkbox" id="altgear" name="altgear"&gt; Add Alternate Gearset
                                        &lt;/label&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="form-group"&gt;
                                &lt;div class="col-sm-offset-3 col-sm-9"&gt;
                                    &lt;button type="submit" class="btn btn-danger"&gt;Create Armory Profile&lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/form&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre>

<p><strong>home.js</strong></p>

<pre><code>import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
import {Router} from 'aurelia-router';

@inject(Router)
export class Home {

    postData: Object = {};
    data: string = '';
    code: string = '';
    loading: boolean = false;
    http: HttpClient = null;
    apiUrl: string = 'http://localhost:8000/api/v1';

    constructor(router) {
        this.http = new HttpClient().configure(x =&gt; {
            x.withBaseUrl(this.apiUrl);
            x.withHeader('Content-Type', 'application/json');
        });

        this.maRouter = router;
    }

    submit() {

        console.log(this.postData);

        this.http.post('/armory', JSON.stringify(this.postData)).then(response =&gt; {
            this.data = response.content;
            this.code = response.statusCode.toString();
            this.loading = false;
        });

        this.maRouter.navigateToRoute('armory', {id: this.data});
    }
}
</code></pre>

<p><strong>armory.js</strong></p>

<pre><code>import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

export class Armory {

    postData: Object = {};
    data: string = '';
    code: string = '';
    loading: boolean = false;
    http: HttpClient = null;
    apiUrl: string = 'http://localhost:8000/api/v1';
    profileId: number = 0;

    constructor() {
        this.loading = true;

        this.http = new HttpClient().configure(x =&gt; {
            x.withBaseUrl(this.apiUrl);
            x.withHeader('Content-Type', 'application/json');
        });
    }

    activate(params, routeConfig) {
        this.profileId = params.id;
        this.getArmoryData();
    }

    getArmoryData() {
        return this.http.get("/armory/" + this.profileId).then(response =&gt; {
            this.data = response.content;

            console.log(this.data);

            this.code = response.statusCode.toString();
            this.loading = false;
        });
    }
}
</code></pre>

<p>What am I missing here?  </p>

<p>Thanks for your help!</p>