title: Angular testing component with ActivatedRoute
body: <p>I have a big problem with testing component that uses ActivatedRoute - I only want to pass the default test "component.toBeTruthy"</p>
  
  <p>Component class:</p>
  
  <pre><code>@Component({
    selector: 'app-room',
    templateUrl: './room.component.html',
    styleUrls: ['./room.component.css']
  })
  export class RoomComponent implements OnInit {
  
    roomId:string;
  
    constructor(private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.roomId = this.route.snapshot.params.id;
    }
  
  }
  </code></pre>
  
  <p>Test:</p>
  
  <pre><code>describe('RoomComponent', () =&gt; {
    let component: RoomComponent;
    let fixture: ComponentFixture&lt;RoomComponent&gt;;
  
    beforeEach(async(() =&gt; {
  
      let temp = new ActivatedRouteStub();
  
      TestBed.configureTestingModule({
        declarations: [ RoomComponent ],
        imports: [MaterialModule, FormsModule, RouterModule, BrowserModule,BrowserAnimationsModule],
        providers: [MatDialog, MatToolbar, RoomService,
          {
            provide: ActivatedRoute, useValue: {}
          }
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(RoomComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>The problem is, that when I start tests it's fails with strange error:</p>
  
  <blockquote>
    <p>Chrome 65.0.3325 (Mac OS X 10.13.4) ERROR
      {
        "message": "Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/RoomComponent_Host.ngfactory.js'.\nat <a href="http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2206:25" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2206:25</a>\n\nError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/RoomComponent_Host.ngfactory.js'.\n    at <a href="http://localhost:9876/_karma_webpack_/polyfills.bundle.js:4970:35" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.bundle.js:4970:35</a>\n    at XMLHttpRequest.proto.(anonymous function) [as send] (<a href="http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3386:24" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3386:24</a>)\n    at Array. (node_modules/source-map-support/browser-source-map-support.js:107:134)\n    at node_modules/source-map-support/browser-source-map-support.js:101:106\n  </p>
  </blockquote>
  
  <p>If I remove this line <code>this.roomId = this.route.snapshot.params.id;</code> from ngOnInit, everything working.</p>
  
  <p>What's happening? </p>