feat(anchor): add anchor and scroll support in app routing module

Author: Ismaestro

README.md

@@ -71,12 +71,13 @@ npm run update           | Update the project dependencies with ng update
 * Modal and toasts (snakbar)!
 * Responsive layout (flex layout module)
 * SASS (most common used functions and mixins) and BEM styles
-* Internationalization with ng-translate and ngx-translate-extract
+* Internationalization with ng-translate and ngx-translate-extract. Also use cache busting for translation files with [webpack translate loader](https://github.com/ngx-translate/http-loader#angular-cliwebpack-translateloader-example)
 * Lazy loading modules
 * Service Workers
 * Dynamic Imports
 * More logical structure directory (from [here](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7))
 * Basic example library
+* Scroll restoration and anchor examples
 * Modernizr (browser features detection)
 * Safari polyfill for date inputs (date-input-polyfill)
 * Google Tag Manager

projects/ngx-example-library/karma.conf.js

@@ -26,6 +26,6 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: true
   });
 };

src/app/app-routing.module.ts

@@ -16,7 +16,10 @@ const routes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'enabled',
+      anchorScrolling: 'enabled'
+    })
   ],
   exports: [
     RouterModule

src/app/modules/heroes/pages/hero-detail/hero-detail.page.html

@@ -35,3 +35,6 @@ <h1 class="header__title">{{'heroDetail' | translate}}</h1>
 <button mat-raised-button type="button" (click)="goBack()">
     {{'goBack' | translate | uppercase}}
 </button>
+<button *ngIf="hero" mat-raised-button type="button" (click)="goToTheAnchor()">
+    {{'Anchor to this hero' | translate | uppercase}}
+</button>

src/app/modules/heroes/pages/hero-detail/hero-detail.page.ts

@@ -1,8 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {Hero} from '../../shared/hero.model';
 import {HeroService} from '../../shared/hero.service';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {Location} from '@angular/common';
+import {AppConfig} from '../../../../config/app.config';
 
 @Component({
   selector: 'app-hero-detail',
@@ -17,6 +18,7 @@ export class HeroDetailPage implements OnInit {
 
   constructor(private heroService: HeroService,
               private location: Location,
+              private router: Router,
               private activatedRoute: ActivatedRoute) {
   }
 
@@ -49,4 +51,8 @@ export class HeroDetailPage implements OnInit {
   goBack(): void {
     this.location.back();
   }
+
+  goToTheAnchor(): void {
+    this.router.navigate([`/${AppConfig.routes.heroes}/${this.hero.id}`], {fragment: 'heroe-detail'});
+  }
 }