title: Angular 4 Unit test error - Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/LoginComponent.ngfactory.js'
body: <p>I am writing some unit tests for my component and i am getting this cryptic error message. I found a similar question at <a href="https://stackoverflow.com/questions/44254758/angular-2-unit-testing-getting-error-failed-to-load-ng-dynamictestmodule-m">Angular 2 unit testing - getting error Failed to load &#39;ng:///DynamicTestModule/module.ngfactory.js&#39;</a> but the answers did not help me solve my issue. I am angular 4.3.2</p>
  
  <p>Here's the component i am writing the test for:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {Router} from '@angular/router';
  
  import {NotificationService} from '../common/notification/notification.service';
  import {SessionService} from '../common/session/session.service';
  import {Login} from './login.model';
  
  @Component({
               selector: 'cc-login-form',
               templateUrl: './login.component.html',
               styleUrls: ['./login.component.scss'],
             })
  export class LoginComponent {
    model: Login = new Login('', '');
  
    constructor(private sessionService: SessionService,
                private router: Router,
                private notificationService: NotificationService) {
    }
  
    onSubmit() {
      this.sessionService
          .login(this.model.email, this.model.password)
          .subscribe(
            sessionInfo =&gt; {
              this.notificationService.showSuccess('notification.successfully.logged.in');
              this.router.navigate([`/cc/list`]);
            },
            error =&gt; this.notificationService.showError('notification.invalid.login')
          );
    }
  }
  </code></pre>
  
  <p>And here is the test file:</p>
  
  <pre><code>import {async, ComponentFixture, TestBed} from '@angular/core/testing';
  import {FormsModule} from '@angular/forms';
  import {Router} from '@angular/router';
  import {TranslateModule, TranslateService} from '@ngx-translate/core';
  import {NotificationService} from '../common/notification/notification.service';
  import {NotificationServiceStub} from '../common/notification/tests/NotificationServiceStub';
  import {SessionService} from '../common/session/session.service';
  import {SessionServiceStub} from '../common/session/tests/SessionServiceStub';
  import {RouterStub} from '../common/tests/RouterStub';
  import {TranslateServiceStub} from '../common/translate/tests/TranslateServiceStub';
  
  import {LoginComponent} from './login.component';
  
  describe('LoginComponent', () =&gt; {
    let component: LoginComponent;
    let fixture: ComponentFixture&lt;LoginComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
                                       imports: [
                                         FormsModule,
                                         TranslateModule
                                       ],
                                       declarations: [LoginComponent],
                                       providers: [
                                         {provide: SessionService, useClass: SessionServiceStub},
                                         {provide: Router, useClass: RouterStub},
                                         {provide: NotificationService, useClass: NotificationServiceStub},
                                         {provide: TranslateService, useClass: TranslateServiceStub},
                                       ]
                                     })
             .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(LoginComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should be created', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>When running the test i get the following on chrome console: </p>
  
  <pre><code>zone.js:2642 XMLHttpRequest cannot load ng:///DynamicTestModule/LoginComponent.ngfactory.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
  (anonymous) @ zone.js:2642
  zone.js:195 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/LoginComponent.ngfactory.js'.
      at http://localhost:9876/_karma_webpack_/webpack:/Users/pedrompg/Documents/quandoo/fe/chains-center/~/zone.js/dist/zone.js:2642:1
      at XMLHttpRequest.proto.(anonymous function) [as send] (
  </code></pre>
  
  <p>Any can help me with that?</p>
  
  <p>EDIT - 1
  Here's the services/stubs implementation</p>
  
  <p><strong>SessionServiceStub</strong></p>
  
  <pre><code>export class SessionServiceStub implements ISessionService {
    login(login: string, password: string): Observable&lt;any&gt; {
      return Observable.of({merchantId: 123});
    }
  
    logout(): Observable&lt;any&gt; {
      throw new Error('Method not implemented.');
    }
  
    validateSessionToken(): Observable&lt;any&gt; {
      throw new Error('Method not implemented.');
    }
  }
  </code></pre>
  
  <p><strong>SessionService</strong></p>
  
  <pre><code>@Injectable()
  export class SessionService implements ISessionService {
  
    constructor(private http: CcHttpClient, private router: Router, private localSessionService: LocalSessionService) {
    }
  
    login(login: string, password: string): Observable&lt;any&gt; {
      return this.http.post(`api/sessions`, {login: login, password: password}).map((res: Object) =&gt; {
        this.localSessionService.createSession(res);
        return res;
      });
    }
  }
  </code></pre>
  
  <p><strong>RouterStub</strong></p>
  
  <pre><code>export class RouterStub {
    navigate(commands: any[], extras?: NavigationExtras): Promise&lt;boolean&gt; {
      return Promise.resolve(true);
    };
  }
  </code></pre>
  
  <p><strong>TranslationServiceStub</strong></p>
  
  <pre><code>export class TranslateServiceStub {
    instant(key: string | Array&lt;string&gt;, interpolateParams?: Object): string | any {
      return 'translation';
    };
  }
  </code></pre>
  
  <p><strong>NotificationServiceStub</strong></p>
  
  <pre><code>export class NotificationServiceStub implements INotificationService {
    showToast(type, text, title, defaultTitle): Promise&lt;Toast&gt; {
      return Promise.resolve(null);
    }
  
    showSuccess(msg, title?): Promise&lt;Toast&gt; {
      return Promise.resolve(null);
    }
  
    showError(msg, title?): Promise&lt;Toast&gt; {
      return Promise.resolve(null);
    }
  }
  </code></pre>
  
  <p><strong>EDIT 2</strong>
  Changing my TestBed config to the following removed the error but brought a new one:</p>
  
  <pre><code>beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
                                       imports: [
                                         FormsModule,
                                         HttpClientModule,
                                         TranslateModule.forRoot({
                                                                   loader: {
                                                                     provide: TranslateLoader,
                                                                     useFactory: HttpTranslateLoaderFactory,
                                                                     deps: [HttpClient]
                                                                   }
                                                                 })
                                       ],
                                       declarations: [LoginComponent],
                                       providers: [
                                         {provide: SessionService, useClass: SessionServiceStub},
                                         {provide: Router, useClass: RouterStub},
                                         {provide: NotificationService, useClass: NotificationServiceStub},
                                       ]
                                     })
             .compileComponents();
    }));
  </code></pre>
  
  <p>Now the error message is </p>
  
  <pre><code>TypeError: Cannot read property 'assertPresent' of undefined
          at resetFakeAsyncZone home/pedrompg/Documents/quandoo/fe/chains-center/~/@angular/core/@angular/core/testing.es5.js:304:1)
          at Object.&lt;anonymous&gt; home/pedrompg/Documents/quandoo/fe/chains-center/~/@angular/core/@angular/core/testing.es5.js:1001:1)
          at ZoneQueueRunner.webpackJsonp.../../../../zone.js/dist/jasmine-patch.js.jasmine.QueueRunner.ZoneQueueRunner.execute home/pedrompg/Documents/quandoo/fe/chains-center/~/zone.js/dist/jasmine-patch.js:132:1)
  </code></pre>
  
  <p>Which happens at this function:</p>
  
  <pre><code>function resetFakeAsyncZone() {
      _fakeAsyncTestZoneSpec = null;
      ProxyZoneSpec.assertPresent().resetDelegate(); //ProxyZoneSpec is undefined here for whatever reason
  }
  </code></pre>