Angular 2 tutorial refresh on party-details broken


#1

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).

http://localhost:3000/party/MbNp8AgW8BAoTzGvg

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?


Angular 2.0.1 How reactive data when inject route param in step 5
#2

Same issue. Did you find any solution?


#3

Hi guys!

try to change this:

@Component({
  selector: 'app',
  templateUrl: 'client/app.html',

to:

@Component({
  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


#4

Mys,
Almost!

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


#5

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:


#6

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';


@Component({
    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) {
        super();
        var partyId = params.get('partyId');

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

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

#7

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


#8

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