title: Angular unit test with a resolver guard
body: <p>I'd appreciate if someone could review what I'm missing, I have resolve guard on a route which gets the user which renders the name in the component.  I've created a test case for it but getting error of Cannot read property 'name' of undefined.</p>
  
  <p>Component</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;span class="headline"&gt;{{user.name}}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Component ts </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Data } from '@angular/router';
  
  import { User } from './../../model/user';
  
  @Component({
    selector: 'app-user-details',
    templateUrl: './user-details.component.html',
    styleUrls: ['./user-details.component.less']
  })
  export class UserDetailsComponent implements OnInit {
  
    user: User = new User();
  
    constructor(private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.route.data
        .subscribe(
          (data: Data) =&gt; {
            this.user = data['user'];
          }
        );
    }
  }
  </code></pre>
  
  <p>Route</p>
  
  <pre><code>{ path: 'user-details', component: UserDetailsComponent, resolve: { user: UserResolver} },
  </code></pre>
  
  <p>Test</p>
  
  <pre><code>describe('Component: User', () =&gt; {
      let routeStub;
  
      beforeEach(() =&gt; {
          routeStub = {
              data: null
          },
          TestBed.configureTestingModule({
              declarations: [
                  UserDetailsComponent
              ],
              imports: [       
              ],
              providers: [
                  { provide: ActivatedRoute, useValue: routeStub }
              ]
          }).compileComponents();
      });
  
      it('should render the user name', async(() =&gt; {
  
         var user = new User();
         user.name = "Alice";
  
          routeStub.data = { user: Observable.of(user) };
  
          let fixture = TestBed.createComponent(UserDetailsComponent);
          let component = fixture.debugElement.componentInstance;
  
          fixture.detectChanges();       
          let compiled = fixture.debugElement.nativeElement;
  
          fixture.whenStable().then(() =&gt; {
              expect(compiled.querySelector('span').textContent).toContain(user.name);
          });
      }));
  
  });
  </code></pre>
  
  <p>Error</p>
  
  <pre><code>Failed: Cannot read property 'name' of undefined
          TypeError: Cannot read property 'name' of undefined
              at Object.eval [as updateRenderer] (ng:///DynamicTestModule/UserDetailsComponent.ngfactory.js:18:34)
              at Object.debugUpdateRenderer [as updateRenderer] (webpack:///./node_modules/@angular/core/esm5/core.js?:14909:21)
              at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14023:14)
              at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)
              at execComponentViewsAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14301:13)
              at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14024:5)
              at callWithDebugContext (webpack:///./node_modules/@angular/core/esm5/core.js?:15272:42)
              at Object.debugCheckAndUpdateView [as checkAndUpdateView] (webpack:///./node_modules/@angular/core/esm5/core.js?:14809:12)
              at ViewRef_.detectChanges (webpack:///./node_modules/@angular/core/esm5/core.js?:11793:22)
              at ComponentFixture._tick (webpack:///./node_modules/@angular/core/esm5/testing.js?:208:32)
  </code></pre>
  
  <p>UPDATE: I also included the component ts file</p>