Angular 2 tutorial refresh on party-details broken

Although navigation works correctly in the app. If you navigate to a ‘party-details’ and reload/refresh the browser (or just paste the link in another tab).


Nothing displays. No errors. Just no ‘party detail’.
I get the same broken results in the completed app I downloaded and built.
Using the Browser’s ‘Back’ button now (after a refresh on the parameterized route) is also broken (though it works fine before the refresh)
I added other ‘non parameterized’ routes and they behave correctly on refresh.
Does this have anything to do with the ‘deprecated router’ we are using currently?

Same issue. Did you find any solution?

Hi guys!

try to change this:

  selector: 'app',
  templateUrl: 'client/app.html',


  selector: 'app',
  templateUrl: '/client/app.html', // the change

so /client/app.html instead of client/app.html.

Otherwise it tries to load http://localhost:3000/party/client/app.html which doesn’t exist so it returns whole new with an app.

related issue on github


To run correctly, the App also needs another change. Add a *ngIf=“party” to not render the party when it is still not loaded from server. In client/imports/party-details/party-details.html:

<form (submit)="saveParty(party)" *ngIf="party">

With both changes, it works perfect!

Thank you

There is also one change needed. NgZone with Tracker.autorun to make it work until 5th step.

I’ll update Socially 2.0 soon.

But thanks for catching it up :thumbsup:

Thank you mys,
You were true. The full file that worked (using the MeteorComponent, and NgZone) is:

import { Component, NgZone } from '@angular/core';
import { RouteParams, RouterLink } from '@angular/router-deprecated';
import { Parties } from '../../../collections/parties';
import { MeteorComponent } from 'angular2-meteor';

    selector: 'party-details',
    templateUrl: '/client/imports/party-details/party-details.html',
    directives: [ RouterLink ]

export class PartyDetails extends MeteorComponent { 
    party: Object;

    constructor(private params: RouteParams, ngZone: NgZone) {
        var partyId = params.get('partyId');

        this.autorun(() => { // reactive
   => { // run inside Angular2 world
       = Parties.findOne(partyId);

    saveParty(party) {
        Parties.update(party._id, {
            $set: {
                description: party.description,
                location: party.location

Can anybody advice where to read about:
this.autorun(() => { // reactive => { // run inside Angular2 world ?
What “magic” this part of code do? :slight_smile:

Since a lot of people met this problem, I posted here:

1 Like