Configure HTML meta tags in route configuration of Angular for SSR
- Native support for SSR - so all meta data will be served to any crawler
- Declarative configuration of meta tags without any restrictions
- Templating in strings with dynamic data from context
- Global templates for any type of meta tag
- Contexts can be either plain objects or RxJs Observables of objects
- Default (global) and local contexts (reset after every route navigation)
npm install ngx-router-meta
- Just import
RouterMetaModule.forRoot()
in yourAppModule
:
import { NgModule } from '@angular/core';
import { RouterMetaModule } from 'ngx-router-meta';
@NgModule({
imports: [RouterMetaModule.forRoot()],
})
export class AppModule {}
- And then configure give your routes some
lovemeta info:
TIP: You can useRoutesWithMeta
instead of defaultRoutes
type from@angular/router
package for extra type info!
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RoutesWithMeta } from 'ngx-router-meta';
import { ShowRouteComponent } from './show-route.component';
const routes: RoutesWithMeta = [
{
path: '',
component: ShowRouteComponent,
data: {
meta: {
title: 'Home Page',
description: 'Tell everyone about your home!',
},
},
},
{
path: 'route1',
component: ShowRouteComponent,
data: {
meta: {
title: 'Route 1 Page',
'custom:tag': 'Works!',
},
},
},
{
path: 'route2',
component: ShowRouteComponent,
// Look, these tags are not even required, yay!!
},
];
- Serve your app (even with SSR) and enjoy your meta!
Coming really soon =)
This project was generated with Angular CLI version 8.2.0.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.