refreshing page doesn't set the title or description that's defined in the router

[chrillewoodz]

I'm submitting a ... (check one with "x")

[x] bug report => check the README and search github for a similar issue or PR before submitting
[ ] support request => check the README and search github for a similar issue or PR before submitting
[ ] feature request

Current behavior
If I go from page 1 to page 2, the metas are set correctly, but if I go from page 1 to page 2 and then refresh on page 2, page 2's metas aren't being set.

Expected/desired behavior
I expect the page 2's metas to be set on refresh as well.

Minimal reproduction of the problem with instructions
See current behavior.

• Angular version: 2.0.X
  2.3.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  all

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  all

• Node (for AoT issues): node --version =
  6.7

[chrillewoodz]

I can see the same issue in the deprecated ng2-metadata repo, but then when you start navigating again it's not updating anything. You need to go back to the top route and then go down the tree again and it will set whatever is defined in the router. There must be something wrong with the way you listen to router events.

[fulls1z3]

Hi @chrillewoodz, there was in issue #15 which prevented the default meta settings to be rendered on views without meta settings in its route definitions. That's why the deprecated ng2-metadata does not update anything. This behavior has been changed since the rc.4 release of @nglibs/meta. However, I see that we need to make improvisations.

I'll analyze this issue as well as #27 at a first available time, and then let you know about details. Meanwhile, any further inspections and issues reported are highly appreciated. Thank you.

[fulls1z3]

Hi @chrillewoodz, I've tested the issue documented above, using the latest version (@nglibs/meta** v0.2.0-beta.4) on the @nglibs/example-app.

Without touching the default configuration (and also the meta properties at the routes), I've modified the src/app/+about/about-banana.component.ts as follows:

// angular
import { Component, OnInit } from '@angular/core';

// libs
import { MetaService } from '@nglibs/meta';

@Component({
  template: `@nglibs about banana page<br/>
  If your life sucks, start a new one in Banana Republic`
})
export class AboutBananaComponent implements OnInit {
  constructor(private meta: MetaService) {
  }

  ngOnInit(): void {
    this.meta.setTitle('Today the lucky person is: bjornharvold'); // as promised
  }
}

Just after the initial navigation, the output (page title) was exactly:
showcasing the @nglibs utilities

Then, I clicked on the link Banana Republic and navigated to /en/about/banana. The output (page title) was exactly:
Today the lucky person is: bjornharvold | @nglibs example app

And finally, I pressed ctrl + F5 to reload the page (while F12 devtools was open, and browser cache was disabled), the output (page title) was exactly:
Today the lucky person is: bjornharvold | @nglibs example app

Again, based on the information you provided, I could not reproduce the issue - using the official showcase app @nglibs/example-app with the development environment mentioned below:

• Angular version: 4.0.1

• Browser: Chrome 56.0.2924.87 (64-bit)

• Language: TypeScript 2.2.2

• Node (for AoT issues): node --version = 6.10.10

Please make sure you're using the latest version of @nglibs/meta** (v0.2.0-beta.4 at the moment). If there're any points you forgot to mention, or need more details feel free to ask again.

For now, I'm closing this issue.

Note: @bjornharvold, you see, I mentioned you too 😄

[bjornharvold]

Than you for the mention @fulls1z3 ;-) The problem I was having was not setting it directly but like this:

My current code:

this.activatedRoute.params
      .map(params => params['id'])
      .flatMap(id => this.hotelService.retrieveMetaData(id))
      .subscribe((list: Array<MetaData>) => {
          if (list && list.length > 0) {
            list.forEach(md => {
              switch (MetaDataType[md.type]) {
                case MetaDataType.PAGE_TITLE:
                  this.metaService.setTitle(md.value, false, false);
                  break;
                case MetaDataType.METADATA:
                  this.metaService.setTag(md.key, md.value, false);
                  break;
                default:
                  console.log('do not know how to handle metadata type: ' + md.type);
              }
            });
          }
        },
        error => {
          return Observable.of<Array<MetaData>>();
        },
        () => {
        }
      );

Unless I add "false, false" the title doesn't update

[fulls1z3]

Hi @bjornharvold, now with this repro steps I can have a better understanding about the issue, thank you for the provided information 👍

A similar topic was just discussed on #30: without defer argument set to false, setTitle/setTag methods simply subscribe to the NavigationEnd event of the router. However, the observable above gets resolved after that event.

There's a subscription bound to the event, true. But it cannot be triggered just because NavigationEnd event was emitted earlier. In this case, passing false to defer would execute the method immediately.

I'm thinking about possibilities without listening to NavigationEnd event, however options are quite limited as NavigationEnd is the only event whom we can retrieve urlAfterRedirects property. We can't expect further functionality from the Angular team quite soon, as they're quite busy with the i18n stuff nowadays. However, if I can find an opportunity (there're possibilities, yes) to make it work with the desired way, be sure I'll get it done.

On the other hand, this issue reveals the fact that I need to document the behavior of defer argument at the README - we can't expect people what's under hood at the first glance :)

So, I want to say my thanks again to @chrillewoodz @cybey and @bjornharvold for all your contributions.