Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gund/ngx-router-meta
Configure HTML meta tags like title and description in route configuration of Angular for SSR
https://github.com/gund/ngx-router-meta
angular configuration description meta-tags metadata router seo-optimization ssr title
Last synced: 8 days ago
JSON representation
Configure HTML meta tags like title and description in route configuration of Angular for SSR
- Host: GitHub
- URL: https://github.com/gund/ngx-router-meta
- Owner: gund
- License: mit
- Created: 2019-08-07T23:34:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T00:55:25.000Z (about 2 years ago)
- Last Synced: 2025-02-07T21:05:25.410Z (12 days ago)
- Topics: angular, configuration, description, meta-tags, metadata, router, seo-optimization, ssr, title
- Language: TypeScript
- Homepage:
- Size: 1.23 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# NgxRouterMeta
[](https://travis-ci.org/gund/ngx-router-meta)
[](https://codecov.io/gh/gund/ngx-router-meta)
[](https://codeclimate.com/github/gund/ngx-router-meta/maintainability)
[](https://www.npmjs.com/package/ngx-router-meta)
[](https://www.npmjs.com/package/ngx-router-meta)
[](https://github.com/gund/ngx-router-meta/blob/master/LICENSE)
[](https://github.com/semantic-release/semantic-release)
> Configure HTML meta tags in route configuration of Angular for SSR
## Features
- 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)
## Install
```
npm install ngx-router-meta
```
## Configure
1. Just import `RouterMetaModule.forRoot()` in your `AppModule`:
```ts
import { NgModule } from '@angular/core';
import { RouterMetaModule } from 'ngx-router-meta';
@NgModule({
imports: [RouterMetaModule.forRoot()],
})
export class AppModule {}
```
2. And then configure give your routes some ~~love~~ meta info:
**TIP**: You can use `RoutesWithMeta` instead of default `Routes` type
from `@angular/router` package for extra type info!
```ts
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!!
},
];
```
3. Serve your app (even with SSR) and enjoy your meta!
## Documentation
**Coming really soon =)**
---
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.0.
## Development server
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.
## Code scaffolding
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`.
## Build
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.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).