Angular 2 tutorial refresh on party-details broken

angular
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?

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:

1 Like