npm

Need private packages and team management tools?Check out npm Orgs. »

ngx-router-meta

1.0.0 • Public • Published

NgxRouterMeta

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:
import { NgModule } from '@angular/core';
import { RouterMetaModule } from 'ngx-router-meta';
 
@NgModule({
  imports: [RouterMetaModule.forRoot()],
})
export class AppModule {}
  1. 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!
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!!
  },
];
  1. Serve your app (even with SSR) and enjoy your meta!

Documentation

Coming really soon =)


This project was generated with 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.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

install

npm i ngx-router-meta

Downloadsweekly downloads

0

version

1.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability