title: Show error message on Snackbar from GlobalErrorHandler
body: <p>I have a requirement where I need to show the error messages (if it occurs) in a snackbar using angular material. I have written a <code>GlobalErrorhandler</code> which works fine i.e. gets triggered whenever any errors occurred inside the application.</p>
  
  <p>Inside the <code>GlobalErrorHandler</code> I am trying to log the exception and also I need to display the Error message to the user using <code>MdSnackBar</code>. But when i add the snackbar reference to the <code>GlobalErrorHandler</code>, I am getting the exception as below</p>
  
  <pre><code>Uncaught Error: Provider parse errors:
  Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR -&gt;]"): in NgModule AppModule in ./AppModule@-1:-1
      at NgModuleProviderAnalyzer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleProviderAnalyzer.parse (compiler.es5.js:11805)
      at NgModuleCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleCompiler.compile (compiler.es5.js:18657)
      at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModule (compiler.es5.js:26988)
      at compiler.es5.js:26933
      at Object.then (compiler.es5.js:1683)
      at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
      at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26860)
      at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
      at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
      at Object.../../../../../src/main.ts (main.ts:11)
  </code></pre>
  
  <p>I am not understanding what is the cyclic dependency here? why I am not able to instantiate snackbar in the <code>GlobalErrorHandler</code>?</p>
  
  <p>If it is not a correct approach of showing snackbar in a error handler, then what is the alternate solution for the problem i.e. to display the error message in a snackbar?</p>
  
  <p>Note: any exception occurs inside the application should be displayed in snackbar</p>
  
  <p>my <code>GlobalErrorHandler</code> code looks like below</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { ErrorHandler, Injectable, Injector } from '@angular/core';
  import { LocationStrategy, PathLocationStrategy } from '@angular/common';
  import * as StackTrace from 'stacktrace-js';
  import { SessionService } from '../Services/SessionService';
  import { MdSnackBar } from '@angular/material';
  
  //import { Constants } from './Constants';
  
  @Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
    constructor(private injector: Injector,
      public snackBar: MdSnackBar,
      private _SessionService: SessionService)
    { }
  
    handleError(error) {
      debugger;
      const location = this.injector.get(LocationStrategy);
      const message = error.message ? error.message : error.toString();
      const url = location instanceof PathLocationStrategy
        ? location.path() : '';
      // get the stack trace, lets grab the last 10 stacks only
      StackTrace.fromError(error).then(stackframes =&gt; {
        debugger;
        const stackString = stackframes
          .splice(0, 20)
          .map(function (sf) {
            return sf.toString();
          }).join('\n');
        // log on the server
        console.log("_SessionService.loggedinuser " + this._SessionService.LoggedInUser);
        console.log("this._SessionService.LAST_API_URL : " + this._SessionService.LAST_API_URL);
        console.log("message : " + message);
        console.log("url : " + url);
        console.log("stack : " + stackString);
  
        this.snackBar.open("Error Occurred : " + message, "OK", {
          duration: this._SessionService.SnackbarTimer,
        });
  
      });
      throw error;
    }
  
  }
  </code></pre>