title: Unable to override MAT_DIALOG_DATA provider using TestBed.overrideProvider in angular test cases
body: <p>I am trying to write integration tests for a component in angular using TestBed. there is some data being injected into component for material dialog using <code>@inject(MAT_DIALOG_DATA)</code>. I want to test two cases. One is when no data is provided and other one is when some data is provided. But I wanted to configure testing module same way for all cases (in <code>beforeEach</code> method).
  So for cases without data being injected I am configuring the module as below:</p>
  <pre class="lang-js prettyprint-override"><code>    TestBed.configureTestingModule({
            declarations: [
              PostNewComponent
            ].concat(EntryComponents1),
            imports: [TestingModule],
            providers: [
              PostService,
              { provide: MAT_DIALOG_DATA, useValue: {} },
              { provide: MatDialogRef, useValue: { close: (dialogResult: any) =&gt; {}, updateSize: () =&gt; {} }}
            ]
          });
  
  </code></pre>
  <p>and then I have a case in which I want to test the passed test data. so I tried the following to override the provider.</p>
  <pre class="lang-js prettyprint-override"><code>    TestBed.overrideProvider(MAT_DIALOG_DATA, {useValue : {name: &quot;passedName&quot;}});
  </code></pre>
  <p>but is doesn't override the provider. I debugged the issue and found that overrideProvider is finally calling following method in core.js</p>
  <pre class="lang-js prettyprint-override"><code>        /**
       * Read the `ngInjectableDef` for `type` in a way which is immune to accidentally reading inherited
       * value.
       *
       * @param type A type which may have its own (non-inherited) `ngInjectableDef`.
       */
      function getInjectableDef(type) {
          var def = type[NG_INJECTABLE_DEF];
          // The definition read above may come from a base class. `hasOwnProperty` is not sufficient to
          // distinguish this case, as in older browsers (e.g. IE10) static property inheritance is
          // implemented by copying the properties.
          //
          // Instead, the ngInjectableDef's token is compared to the type, and if they don't match then the
          // property was not defined directly on the type itself, and was likely inherited. The definition
          // is only returned if the type matches the def.token.
          return def &amp;&amp; def.token === type ? def : null;
      }
  </code></pre>
  <p>and &quot;type&quot; parameter passed to this function in case of <code>MAT_DIALOG_DATA</code> does not contain <code>ngInjectableDef</code> property. I don't have in depth knowledge of angular so can someone explain why is it not working and what exactly this read-only property &quot;<code>ngInjectableDef</code>&quot; is ?</p>