title: Angular 5: Detect a route change in service
body: <p>I tried to follow this tutorial: <a href="http://jasonwatmore.com/post/2017/06/25/angular-2-4-alert-toaster-notifications" rel="nofollow noreferrer">http://jasonwatmore.com/post/2017/06/25/angular-2-4-alert-toaster-notifications</a></p>
  
  <p>I have a problem with the routing. When i use router in my constructor, I get an parse Error.</p>
  
  <p>notification.service.ts
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Injectable, Injector} from '@angular/core';
  import {NavigationStart, Router} from '@angular/router';
  import {Observable} from 'rxjs';
  import {Subject} from 'rxjs/Subject';
  
  import {Notification, NotificationType} from '../models/notification';
  
  @Injectable()
  export class NotificationService {
      private subject = new Subject&lt;Notification&gt;();
      private keepAfterRouteChange = false;
      
      constructor(private router: Router) {
          // clear notification messages on route change unless 'keepAfterRouteChange' flag is true
          router.events.subscribe(event =&gt; {
              if (event instanceof NavigationStart) {
                  if (this.keepAfterRouteChange) {
                      // only keep for a single route change
                      this.keepAfterRouteChange = false;
                  } else {
                      // clear notification messages
                      this.clear();
                  }
              }
          });
      }
  
      getNotification(): Observable&lt;any&gt; {
          return this.subject.asObservable();
      }
  
      success(message: string, keepAfterRouteChange = false) {
          this.notification(NotificationType.Success, message, keepAfterRouteChange);
      }
  
      error(message: string, keepAfterRouteChange = false) {
          this.notification(NotificationType.Error, message, keepAfterRouteChange);
      }
  
      info(message: string, keepAfterRouteChange = false) {
          this.notification(NotificationType.Info, message, keepAfterRouteChange);
      }
  
      warn(message: string, keepAfterRouteChange = false) {
          this.notification(NotificationType.Warning, message, keepAfterRouteChange);
      }
  
      notification(type: NotificationType, message: string, keepAfterRouteChange = false) {
          this.keepAfterRouteChange = keepAfterRouteChange;
          this.subject.next(&lt;Notification&gt;{type: type, message: message});
      }
  
      clear() {
          // clear notifications
          this.subject.next();
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>Uncaught Error: Provider parse errors:
      Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR -&gt;]"): in NgModule AppModule in ./AppModule@-1:-1 
      at NgModuleProviderAnalyzer.parse (compiler.js:19549)
      at NgModuleCompiler.compile (compiler.js:20138)
      at JitCompiler._compileModule (compiler.js:34436)
      at eval (compiler.js:34367)
      at Object.then (compiler.js:474)
      at JitCompiler._compileModuleAndComponents (compiler.js:34365)
      at JitCompiler.compileModuleAsync (compiler.js:34259)
      at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
      at PlatformRef.bootstrapModule (core.js:5551)
      at eval (main.ts:11)
  </code></pre>
  
  <p>I tried to fix this with an Injector, but than an other error occured</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>constructor(private injector: Injector) {
    this.router.events.filter(event =&gt; event instanceof NavigationStart).subscribe(
    (event: NavigationStart) =&gt; {
      ...
    });
  }
  
  public get router(): Router {
    return this.injector.get(Router);
  }</code></pre>
  </div>
  </div>
      </p>
  
  <pre><code>RangeError: Maximum call stack size exceeded
      at StaticInjector.get (core.js:1109)
      at resolveNgModuleDep (core.js:10837)
      at _createClass (core.js:10882)
      at _createProviderInstance$1 (core.js:10848)
      at resolveNgModuleDep (core.js:10833)
      at _callFactory (core.js:10907)
      at _createProviderInstance$1 (core.js:10851)
      at resolveNgModuleDep (core.js:10833)
      at NgModuleRef_.get (core.js:12070)
      at NotificationService.get [as router] (notification.service.ts:27)
  </code></pre>
  
  <p>app.module.ts
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@NgModule({
      declarations: [
          AppComponent,
          NotificationComponent,
          ...
      ],
      imports: [
          BrowserModule,
          FormsModule,
          HttpClientModule,
          AngularFontAwesomeModule,
          routing
      ],
      providers: [
          UserService,
          {
              provide: ErrorHandler,
              useClass: GlobalErrorHandler
          },
          GlobalErrorHandler,
          NotificationService
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The notification will be fired in error-handler.service.ts
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
      constructor(private notificationService: NotificationService) {
      }
  
      public handleError(error) {
          let message = "ERROR: ";
          if (error instanceof HttpErrorResponse) {
              message = message + error.status + ' ' + error.statusText;
              console.log(message);
              this.notificationService.error(message);
          } else {
              message = message + error;
              console.log(message);
          }
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Has somebody an idea what went wrong?</p>