feat(i18n): browser tab page title translations

angular.json

@@ -65,7 +65,7 @@
                 {
                   "type": "bundle",
                   "name": "vendor",
-                  "baseline": "700kb",
+                  "baseline": "750kb",
                   "warning": "100kb",
                   "error": "200kb"
                 },

src/app/app-routing.module.ts

@@ -12,9 +12,7 @@ const routes: Routes = [
   {
     path: 'settings',
     component: SettingsComponent,
-    data: {
-      title: 'Settings'
-    }
+    data: { title: 'anms.menu.settings' }
   },
   {
     path: 'examples',

src/app/app.component.ts

@@ -1,17 +1,17 @@
 import browser from 'browser-detect';
-import { Title } from '@angular/platform-browser';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
 import { ActivationEnd, Router, NavigationEnd } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 
 import {
   ActionAuthLogin,
   ActionAuthLogout,
   AnimationsService,
+  TitleService,
   selectorAuth,
   routeAnimations
 } from '@app/core';
@@ -60,7 +60,7 @@ export class AppComponent implements OnInit, OnDestroy {
     public overlayContainer: OverlayContainer,
     private store: Store<any>,
     private router: Router,
-    private titleService: Title,
+    private titleService: TitleService,
     private animationService: AnimationsService,
     private translate: TranslateService
   ) {}
@@ -154,33 +154,14 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   private subscribeToRouterEvents() {
-    this.router.events
-      .pipe(
-        filter(
-          event =>
-            event instanceof ActivationEnd || event instanceof NavigationEnd
-        ),
-        takeUntil(this.unsubscribe$)
-      )
-      .subscribe(event => {
-        if (event instanceof ActivationEnd) {
-          this.setPageTitle(event);
-        }
-
-        if (event instanceof NavigationEnd) {
-          AppComponent.trackPageView(event);
-        }
-      });
-  }
-
-  private setPageTitle(event: ActivationEnd) {
-    let lastChild = event.snapshot;
-    while (lastChild.children.length) {
-      lastChild = lastChild.children[0];
-    }
-    const { title } = lastChild.data;
-    this.titleService.setTitle(
-      title ? `${title} - ${env.appName}` : env.appName
-    );
+    this.router.events.pipe(takeUntil(this.unsubscribe$)).subscribe(event => {
+      if (event instanceof ActivationEnd) {
+        this.titleService.setTitle(event.snapshot);
+      }
+
+      if (event instanceof NavigationEnd) {
+        AppComponent.trackPageView(event);
+      }
+    });
   }
 }

src/app/core/core.module.ts

@@ -16,6 +16,7 @@ import { authReducer } from './auth/auth.reducer';
 import { AuthEffects } from './auth/auth.effects';
 import { AuthGuardService } from './auth/auth-guard.service';
 import { AnimationsService } from './animations/animations.service';
+import { TitleService } from './title/title.service';
 
 export const metaReducers: MetaReducer<any>[] = [initStateFromLocalStorage];
 
@@ -51,7 +52,12 @@ if (!environment.production) {
     })
   ],
   declarations: [],
-  providers: [LocalStorageService, AuthGuardService, AnimationsService],
+  providers: [
+    LocalStorageService,
+    AuthGuardService,
+    AnimationsService,
+    TitleService
+  ],
   exports: [TranslateModule]
 })
 export class CoreModule {

src/app/core/index.ts

@@ -3,4 +3,5 @@ export * from './animations/route.animations';
 export * from './animations/animations.service';
 export * from './auth/auth.reducer';
 export * from './auth/auth-guard.service';
+export * from './title/title.service';
 export * from './core.module';

src/app/core/title/title.service.ts

@@ -0,0 +1,38 @@
+import { Title } from '@angular/platform-browser';
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { filter } from 'rxjs/operators';
+
+import { environment as env } from '@env/environment';
+
+@Injectable()
+export class TitleService {
+  constructor(
+    private translateService: TranslateService,
+    private title: Title
+  ) {
+  }
+
+  setTitle(
+    snapshot: ActivatedRouteSnapshot,
+    lazyTranslateService?: TranslateService
+  ) {
+    let lastChild = snapshot;
+    while (lastChild.children.length) {
+      lastChild = lastChild.children[0];
+    }
+    const { title } = lastChild.data;
+    const translate = lazyTranslateService || this.translateService;
+    if (title) {
+      translate
+        .get(title)
+        .pipe(filter(translatedTitle => translatedTitle !== title))
+        .subscribe(translatedTitle =>
+          this.title.setTitle(`${translatedTitle} - ${env.appName}`)
+        );
+    } else {
+      this.title.setTitle(env.appName);
+    }
+  }
+}

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

@@ -22,31 +22,23 @@ const routes: Routes = [
       {
         path: 'todos',
         component: TodosComponent,
-        data: {
-          title: 'Todos'
-        }
+        data: { title: 'anms.examples.menu.todos' }
       },
       {
         path: 'stock-market',
         component: StockMarketComponent,
-        data: {
-          title: 'Stock Market'
-        }
+        data: { title: 'anms.examples.menu.stocks' }
       },
       {
         path: 'theming',
         component: ParentComponent,
-        data: {
-          title: 'Theming'
-        }
+        data: { title: 'anms.examples.menu.theming' }
       },
       {
         path: 'authenticated',
         component: AuthenticatedComponent,
         canActivate: [AuthGuardService],
-        data: {
-          title: 'Authenticated'
-        }
+        data: { title: 'anms.examples.menu.auth' }
       }
     ]
   }

src/app/examples/examples/examples.component.spec.ts

@@ -1,5 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { CoreModule } from '@app/core';
 import { TestingModule } from '@testing/utils';
 
 import { ExamplesComponent } from './examples.component';
@@ -11,7 +12,7 @@ describe('ExamplesComponent', () => {
   beforeEach(
     async(() => {
       TestBed.configureTestingModule({
-        imports: [TestingModule],
+        imports: [TestingModule, CoreModule],
         declarations: [ExamplesComponent]
       }).compileComponents();
     })

src/app/examples/examples/examples.component.ts

@@ -1,10 +1,11 @@
 import { Store } from '@ngrx/store';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { takeUntil } from 'rxjs/operators';
+import { ActivationEnd, Router } from '@angular/router';
+import { filter, takeUntil, map } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
-import { routeAnimations } from '@app/core';
+import { routeAnimations, TitleService } from '@app/core';
 import { selectorSettings, SettingsState } from '@app/settings';
 
 @Component({
@@ -13,7 +14,7 @@ import { selectorSettings, SettingsState } from '@app/settings';
   styleUrls: ['./examples.component.scss'],
   animations: [routeAnimations]
 })
-export class ExamplesComponent implements OnInit {
+export class ExamplesComponent implements OnInit, OnDestroy {
   private unsubscribe$: Subject<void> = new Subject<void>();
 
   examples = [
@@ -23,15 +24,47 @@ export class ExamplesComponent implements OnInit {
     { link: 'authenticated', label: 'anms.examples.menu.auth' }
   ];
 
-  constructor(private store: Store<any>, private translate: TranslateService) {}
+  constructor(
+    private store: Store<any>,
+    private router: Router,
+    private titleService: TitleService,
+    private translate: TranslateService
+  ) {
+  }
 
   ngOnInit(): void {
     this.translate.setDefaultLang('en');
+    this.subscribeToSettings();
+    this.subscribeToRouterEvents();
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
+  private subscribeToSettings() {
     this.store
       .select(selectorSettings)
       .pipe(takeUntil(this.unsubscribe$))
       .subscribe((settings: SettingsState) =>
         this.translate.use(settings.language)
       );
   }
+
+  private subscribeToRouterEvents() {
+    this.titleService.setTitle(
+      this.router.routerState.snapshot.root,
+      this.translate
+    );
+    this.router.events
+      .pipe(
+        filter(event => event instanceof ActivationEnd),
+        map((event: ActivationEnd) => event.snapshot),
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe(snapshot =>
+        this.titleService.setTitle(snapshot, this.translate)
+      );
+  }
 }

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

@@ -5,11 +5,15 @@ import { AboutComponent } from './about/about.component';
 import { FeaturesComponent } from './features/features.component';
 
 const routes: Routes = [
-  { path: 'about', component: AboutComponent, data: { title: 'About' } },
+  {
+    path: 'about',
+    component: AboutComponent,
+    data: { title: 'anms.menu.about' }
+  },
   {
     path: 'features',
     component: FeaturesComponent,
-    data: { title: 'Features' }
+    data: { title: 'anms.menu.features' }
   }
 ];