programmatically updating title or tags works inside ngOnInit, but not within subscribe callback function. about ngx-meta

[colin-davis]

So I was having some issues with this as well but I found a pretty good solution.

First the issue: NavigationEnd is called as soon as ngOnInit() finishes and does not wait for subscriptions to complete (and it shouldn't). Even deferred function won't add data from the subscriptions. As a hack you could add a function to manually update them when the subscription is done, however, this would be bad SEO as the values would load and then be updated (It's possible that the googlebot would only read the first values and move on).

The Best Solution: (No changes to @nglibs/meta needed). You need to load the data before the page is rendered. You can do this using the resolver in your routing module. Read this: https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
Then on your page you can get the data by:

constructor(private route: ActivatedRoute) {}

ngOnInit(){
    this.product = this.route.snapshot.data['product'];  
}

This ensures that the subscription is completed before the component is loaded and all of the metadata can be set immediately after in ngOnInit().

Note: you do not need to use the defer method for this.

@kblestarge Let me know if any of this is unclear and best of luck.
@fulls1z3 Awesome job on this project.

[fulls1z3]

Hi @kblestarge, I'll analyze this and will return to you at the first opportunity.

[fulls1z3]

Hi @kblestarge, just started, first with fixing the dependencies. But I'm planning to resolve all open issues on this & fellow repositories at once, while I have some free time this & tomorrow evenings.

Probably tomorrow, or Saturday I'll publish a release. Stay tuned :)

[kblestarge]

@Raydaq-git that works great for me! Thank you!

[fulls1z3]

Hi @kblestarge, @Raydaq-git. First of all I'd like to thank to @Raydaq-git for coming up quickly and offering such a working solution as well as both your appreciation.

The use of resolver would definitely work in most cases, no doubts. However, I'd like to offer another alternative too: the callback function - which might be a slightly more elegant way to handle this.

I need to clarify that, it could be the case only if you're using a certain REST call to fetch the data. I mean, there's a generic service (could be a SEO service returning page titles) that you invoke by passing the page id/key/etc as argument.

Well, if you look at the app.module.ts on @nglibs/example-app, you'll notice that the metaFactory contains the (key: string) => translate.get(key) as a callback. It means, the value that the meta property contains gets resolved using that callback function.

And, if you look at the config.json, home.routes.ts, and about.routes.ts you'll notice keys/values like "defaultPageTitle": "DEFAULT_TITLE", "defaultMetaDescription": "DEFAULT_DESC", as well as:

  {
    path: '',
    component: HomeComponent,
    data: {
      meta: {
        title: 'PUBLIC.HOME.PAGE_TITLE',
        override: true,
        description: 'PUBLIC.HOME.META_DESC'
      }
    }
  }

In this example app, the callback function is the translate.get (thanks to @ocombe, for his awesome project ngx-translate). ngx-translate uses these keys are to retrieve translations of meta information on en.json and on tr.json.

In your case, a more or less a similar approach should work:

metaFactory

callback: (key: string) => seoService.getEntityBySeoName(key)

This way, you won't need to call meta.setTitle/meta.setTag within the subscriptions. Simply pass the keys to a generic service which handles retrieval of seo data, and you're done ;)

Meantime, I feel that you're getting the meta info on the entity level - not using a generic method. The callback approach might not work if you stick using separate methods for every object. But there might be a way to make it generic - it's up to the architecture of your project.

Anyway, please feel free to ask anything you need, I'll be glad to provide help as far as in me lies.

[kblestarge]

Maybe I don't understand how this is supposed to work. Is it even possible to update the meta information outside of the ngOnInit function?

[kblestarge]

Looks like it works inside of a route param subscription declared in the ngOnInit:
this.route.params.subscribe((params: Params) => { this.meta.setTitle('this works fine'); });

but not inside my REST http subscription:
this.xrdService.entity.getEntityBySeoName(this.seoName) .subscribe((result: XRDEntity) => { this.meta.setTitle('this does not work'); });

Any suggestions?

[kblestarge]

@fulls1z3, any helpful insights?