angular 4 routing won't refresh the page?

Question

I hosted my app on heroku. It is so wired that when I change the router, the page will load up the new component, but won't remove the last component for the previous router.

Here is my router and I have router-outlet in my appcomponent file.

const appRoutes: Routes = [
    {
        path:  'home',
        component: HomeComponent
    },
    {
        path: 'jokes/:title',
        component: JokeDetailComponent
    },
    {
        path: 'signup',
        component: RegisterComponent,
        canActivate: [NonauthService]
    },
    {
        path: 'newpost',
        component: NewPostComponent
    },
    {
        path: 'logout',
        redirectTo: ''
    },
    {
        path: 'verify/:id',
        component: VerifyComponent
    },
    {
        path: 'login',
        component: LoginComponent,
        canActivate: [NonauthService]
    },
    {
        path: 'profile/:username',
        component: ProfileComponent
    },
    {
        path: '**',
        redirectTo: '/home'
    }
];

Here is my viewDetail button

<div class="row">
    <div class="col-sm-6" *ngFor="let joke of jokes">
        <div class="card text-center">
            <div class="card-body">
                <h4 class="card-title">{{ joke.title }}</h4>
                <p class="card-text">{{ joke.content.substring(0,joke.content.length/2)}}...</p>
                <a [routerLink]="['/jokes/',joke.ref]" class="btn btn-primary">View Detail</a>
            </div>
        </div>
    </div>
</div>

And this is my login/signup code:

<ul class="nav justify-content-end">
            <li class="nav-item "  *ngIf= "!authService.loggedIn()" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact:true}">
                <a class="nav-link" routerLink = "/login">Login</a>
            </li>
            <li class="nav-item " *ngIf= "!authService.loggedIn()" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact:true}">
                <a class="nav-link" routerLink = "/signup">Signup</a>
            </li>
            <li class="nav-item "  *ngIf= "authService.loggedIn()" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact:true}">
                <a class="nav-link" routerLink = "/profile/{{authService.username}}">{{authService.username}}</a>
            </li>
            <li class="nav-item "  *ngIf= "authService.loggedIn()" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact:true}">
                <a class="nav-link" routerLink = "/logout" (click)="onLogOut()" >Logout</a>
            </li>
        </ul>

So when I go to jokes/sometitle, it should only loads up the jokeDetailComponent. However it doesn't, it will still keep the old component from the previous router.

The weird part is that if you don't click the viewDetail button, the login and signup router works perfectly fine. However, the viewDetail button has the same implementation as login and signup router, they should work the same.

You can test it on this link: https://happierday.herokuapp.com, you can click button other than viewdetail first, they work as expected. Then try viewdetail button.

The thing is it works perfectly in development, but when I it is live on heroku, it starts all the problem. I really need help on this one, I've been spend few hours on this thing.

Answer 1

Checking the browser console, I see this error :

ERROR TypeError: Cannot read property 'title' of undefined
    at Object.eval [as updateRenderer] (JokeDetailComponent.html:4)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13105)
    at checkAndUpdateView (core.es5.js:12256)
    at callViewAction (core.es5.js:12599)
    at execComponentViewsAction (core.es5.js:12531)
    at checkAndUpdateView (core.es5.js:12257)
    at callViewAction (core.es5.js:12599)
    at execEmbeddedViewsAction (core.es5.js:12557)
    at checkAndUpdateView (core.es5.js:12252)
    at callViewAction (core.es5.js:12599)

Your joke variable is undefined when the router load the component. Try to check its existence before accessing its property (by adding a ? between the variable and the property), like this :

<div class="col-sm-6" *ngFor="let joke of jokes">
    <div class="card text-center">
        <div class="card-body">
            <h4 class="card-title">{{ joke?.title }}</h4>
            <p class="card-text">{{ joke?.content.substring(0,joke.content.length/2)}}...</p>
            <a [routerLink]="['/jokes/',joke.ref]" class="btn btn-primary">View Detail</a>
        </div>
    </div>

Answer 2

The error may come from your app.component.html file.

When you use routing, you don't have to declare each component, but juste replacing the component place with :

<router-outlet></router-outlet>

Angular do the job, loading the requested component into the router-outlet