fix(seo): Set SEO data in route config

Author: feloy

src/app/app.component.spec.ts

@@ -4,6 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { ToolbarModule } from './toolbar/toolbar.module';
 import { MatSidenavModule, MatListModule } from '@angular/material';
+import { SeoService } from './services/seo.service';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -19,7 +20,8 @@ describe('AppComponent', () => {
           MatSidenavModule,
           MatListModule
         ],
-        declarations: [AppComponent]
+        declarations: [AppComponent],
+        providers: [SeoService]
       }).compileComponents();
     })
   );

src/app/app.component.ts

@@ -1,4 +1,12 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
+import {
+  Router,
+  ActivatedRoute,
+  NavigationEnd,
+  RouterEvent
+} from '@angular/router';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { SeoService } from './services/seo.service';
 
 interface Menu {
   title: string;
@@ -7,31 +15,58 @@ interface Menu {
 }
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   menus: Menu[] = [
     {
-      title: "Home",
-      link: "/",
+      title: 'Home',
+      link: '/',
       options: { exact: true }
     },
     {
-      title: "Operators",
-      link: "/operators",
+      title: 'Operators',
+      link: '/operators',
       options: { exact: false }
     },
     {
-      title: "Companies",
-      link: "/companies",
+      title: 'Companies',
+      link: '/companies',
       options: { exact: false }
     },
     {
-      title: "Team",
-      link: "/team",
+      title: 'Team',
+      link: '/team',
       options: { exact: false }
     }
   ];
+
+  constructor(
+    private _router: Router,
+    private _activatedRoute: ActivatedRoute,
+    private _seo: SeoService
+  ) {}
+
+  ngOnInit() {
+    this._router.events
+      .pipe(
+        filter((e: RouterEvent) => e instanceof NavigationEnd),
+        map(() => {
+          let route = this._activatedRoute;
+          while (route.firstChild) {
+            route = route.firstChild;
+          }
+          return route;
+        }),
+        filter(route => route.outlet === 'primary'),
+        mergeMap(route => route.data)
+      )
+      .subscribe(data => {
+        if (data !== {}) {
+          this._seo.setHeaders(data.title || [], data.description || '');
+        }
+      });
+  }
 }

src/app/companies/companies-routing.module.ts

@@ -3,7 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { CompaniesComponent } from './companies.component';
 
-const routes: Routes = [{ path: '', component: CompaniesComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: CompaniesComponent,
+    data: { title: ['Companies'], description: 'Companies that use RxJS...' }
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/companies/companies.component.ts

@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { SeoService } from '../services/seo.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
   styleUrls: ['./companies.component.scss']
 })
-export class CompaniesComponent implements OnInit {
-  constructor(private _seo: SeoService) {}
-
-  ngOnInit() {
-    this._seo.setHeaders(['Companies'], this._seo.companiesDescription);
-  }
+export class CompaniesComponent {
+  constructor() {}
 }

src/app/operators/operators-routing.module.ts

@@ -8,6 +8,7 @@ const routes: Routes = [
   {
     path: '',
     component: OperatorsComponent,
+    data: { title: ['Operators'], description: 'All the RxJS operators...' },
     children: [{ path: ':operator', component: OperatorComponent }]
   }
 ];

src/app/operators/operators.component.ts

@@ -17,7 +17,6 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
 import { OperatorDoc } from '../../operator-docs/operator.model';
-import { SeoService } from '../services/seo.service';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
@@ -60,14 +59,12 @@ export class OperatorsComponent implements OnInit {
 
   constructor(
     private _breakpointObserver: BreakpointObserver,
-    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[],
-    private _seo: SeoService
+    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
   ) {}
 
   ngOnInit() {
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
-    this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 
   get extraSmallScreen() {

src/app/operators/specs/operators.spec.ts

@@ -10,7 +10,6 @@ import {
   groupOperatorsByType
 } from '../operators.component';
 import { OperatorDoc } from '../../../operator-docs';
-import { SeoService } from '../../services/seo.service';
 
 const mockActivatedRoute = {
   snapshot: {},
@@ -42,7 +41,6 @@ describe('Operators', () => {
         imports: [RouterTestingModule, LayoutModule],
         declarations: [OperatorsComponent],
         providers: [
-          SeoService,
           { provide: OPERATORS_TOKEN, useValue: mockOperators },
           { provide: ActivatedRoute, useValue: mockActivatedRoute }
         ],

src/app/rxjs/rxjs-routing.module.ts

@@ -1,9 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-
 import { RxjsComponent } from './rxjs.component';
 
-const routes: Routes = [{ path: '', component: RxjsComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: RxjsComponent,
+    data: { title: [], description: 'The complete RxJS documentation...' }
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/rxjs/rxjs.component.ts

@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { SeoService } from '../services/seo.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-rxjs',
   templateUrl: './rxjs.component.html',
   styleUrls: ['./rxjs.component.scss']
 })
-export class RxjsComponent implements OnInit {
-  constructor(private _seo: SeoService) {}
-
-  ngOnInit() {
-    this._seo.setHeaders([], this._seo.homeDescription);
-  }
+export class RxjsComponent {
+  constructor() {}
 }

src/app/services/seo.service.ts

@@ -6,12 +6,6 @@ export class SeoService {
   // This part is happended at the end of head>title
   private siteTitle = 'RxJS Documentation';
 
-  // head>meta>description for common pages
-  public homeDescription = 'The complete RxJS documentation...';
-  public operatorsDescription = 'All the RxJS operators...';
-  public companiesDescription = 'Companies that use RxJS...';
-  public teamDescription = 'People behind the RxJS Documentation project...';
-
   constructor(private _title: Title, private _meta: Meta) {}
 
   public setHeaders(titleParts: string[], description: string) {