Angular Universal build always adds the app.component tags

[alucardu]

A clear and concise description of the problem...

I'm not sure if it's an bug or if this is intended but when I run yarn build:ssr and yarn serve:ssr (locally or on my server) I always see the meta tags of the appComponent in the page sourcecode.

appComponent:

public ngOnInit(): void {
  this.metaTagService.addTags([
    {
      name: 'keywords',
      content: 'content inital page',
    },
    { name: 'robots', content: 'index, follow' },
    { name: 'author', content: 'Digamber Singh' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { name: 'date', content: '2019-10-31', scheme: 'YYYY-MM-DD' },
    { charset: 'UTF-8' },
  ]);

dashboardComponent

public ngOnInit(): void {
  console.log(1)
  this.metaTagService.addTags([
    {
      name: 'keywords',
      content: 'content dashboard page',
    },

  ]);

  this.metaTitleService.setTitle('Movie dashboard')
}

Is it normal to see multiple content meta tags in the same sourcecode?

🌍 Your Environment

Angular CLI: 15.1.6
Node: 18.14.0
Package Manager: yarn 1.22.11
OS: win32 x64

Angular: 15.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, youtube-player

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.9
@angular-devkit/build-angular   15.2.9
@angular-devkit/core            15.1.6
@angular-devkit/schematics      15.1.6
@angular/cdk                    15.2.6
@angular/cli                    15.1.6
@angular/material               15.2.6
@nguniversal/builders           15.2.1
@nguniversal/express-engine     15.2.1
@schematics/angular             15.1.6
rxjs                            7.8.1
typescript                      4.9.5

[alan-agius4]

This is expected.

See: angular/angular#42700

[alucardu]

@alan-agius4 Could you explain/give an an example why the updateTag() isn't the default behavior? Why would I want to keep multiple meta tags from different pages?

[alan-agius4]

updateTag() isn't the default behavior?

Because because you are explicitly using the addTags API. Having multiple meta tags with the same name is valid HTML.

Example:

<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">

Will be aggregated as

<meta name="robots" content="noindex, nofollow">

See: https://developers.google.com/search/blog/2007/03/using-robots-meta-tag

In your case, you should use updateTags which under the hood will call addTags when the tag does not exist in the DOM.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}