In angular cli, you can add metadata to routes, for example. tag names and descriptions

Question

In angular cli, how can you add metadata to routes, for example. tag names and descriptions?

These are my routes:

import { Route} from '@angular/router';
import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

I want to add a title and description to these routes so that they appear in the browser, for example. name for each route.

In addition, I would like to be picked up by bots, for example. google seo bots.

I am using angular cli with webpack, angular version 4 and typescript.

Current error:

Answer 1

There the npm module ng2-metadata [ https://www.npmjs.com/package/ng2-metadata] it will serve the needs.

Sample code.

export const routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      metadata: {
        title: 'Sweet home',
        description: 'Home, home sweet home... and what?'
      }
    }
  },
  {
    path: 'duck',
    component: DuckComponent,
    data: {
      metadata: {
        title: 'Rubber duckie',
        description: 'Have you seen my rubber duckie?'
      }
    }
  },
  {
    path: 'toothpaste',
    component: ToothpasteComponent,
    data: {
      metadata: {
        title: 'Toothpaste',
        override: true, // prevents appending/prepending the application name to the title attribute
        description: 'Eating toothpaste is considered to be too healthy!'
      }
    }
  }
  ...
];

app.module.ts

 imports: [
    ...
    RouterModule.forRoot(routes),
    MetadataModule.forRoot()
  ],

.

  constructor(private metadataService: MetadataService) { }

Answer 2

ng2-metadata @ngx-meta/core, ( README > file), README .

npm page < ng2-metadata , , @ngx-meta/core.

@ngx-meta/core, , , , .

@ngx-meta/core: @ngx-meta/core ng2-metadata, v0.4.x v0.2.x.

@angular v4.x.x, v0.4.x ([master] branch).

Angular 4 v0.4.0-rc.1.

@angular v2.x.x, v0.2.x ([v0.2.x]).

Angular 2 v0.2.0-rc.5.