27

when I run ng test I get this error (I use standard setup with Karma) when I try to test component:

XMLHttpRequest cannot load ng:///DynamicTestModule/FullModalHeaderComponent.ngfactory.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

How can I address this issue?

Code:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { FullModalHeaderComponent } from './full-modal-header.component';

describe('FullModalHeaderComponent', () => {
  let component: FullModalHeaderComponent;
  let fixture: ComponentFixture<FullModalHeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [FullModalHeaderComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FullModalHeaderComponent);
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

and

import { Component, Input } from '@angular/core';
import { ProcessingCenter, Publication } from '../../publications/model';

@Component({
  selector: 'gom-full-modal-header',
  templateUrl: './full-modal-header.component.html'
})
export class FullModalHeaderComponent {

  @Input('processingCenter') processingCenter: ProcessingCenter;
  @Input('publication') publication: Publication;
  @Input('title') title: string;

}

Also, when I run tests with ng test --sourcemaps=false issue goes away.

6
  • Can you post your test code ? This is most probably coming from here Sep 4, 2017 at 12:45
  • Sure, test code is generated from angular-cli
    – dragonfly
    Sep 4, 2017 at 13:26
  • 6
    Can you try running ng test --sourcemaps=false and update the post ? This issue is most probably a fake one since there is no way this is a CORS issue. Also, can you post your HTML template code ? I think this is coming from here Sep 4, 2017 at 13:29
  • 3
    Be sure to check for your template variables, the issue was coming from here. Most likely an input value not being instanciated when the test is running or something like that. Adding the safe navigation operator might just solve all the issues and you might not even need --sourcemaps=false anymore. exemple : {{entity.count}} ==> {{entity?.count}} Sep 4, 2017 at 16:23
  • 1
    also look into that : github.com/angular/angular-cli/issues/7296 Sep 4, 2017 at 16:24

5 Answers 5

18

This can also happen if you have something like this:

  • Your constructor or onInit calls a service
  • That service is faked/mocked so that it returns a result
  • The subscription on your service sets a property on your component
  • The component html has an error, for example:
    <strong>{{ result.item.subproperty }}</strong>
    <!--             ^^^^^^                    -->
    <!--      ^ could be null in tests ^       -->

Note that if item is undefined because your fake/mock didn't have it, the component template will cause an exception, indirectly causing this problem.

So check your html for this type of problem, and fix your fake/mock and/or make your template more robust.

2
  • 1
    This is a complete answer. In addition I had a TypeError for the same test complaining about no next being defined, perhaps because it was trying to iterate a field that did not exist.
    – Maus
    Feb 21, 2019 at 20:15
  • 2
    This answer is really helpful. I had an error in the nested child component. Jun 10, 2020 at 11:51
14

Component tests can fail with this error when there is an uninitialised @Input.

Provide sensible defaults for all your @Input properties:

@Input('processingCenter') processingCenter: ProcessingCenter = null;
@Input('publication') publication: Publication = null;
@Input('title') title: string = '';

Or make sure to initialise them in your tests:

it('should be created', () => {
  component.processingCenter = new ProcessingCenter();
  component.publication = new Publication();
  component.title = 'The Title';
  expect(component).toBeTruthy();
});
1
  • This didn't fix my issue but it is the correct reason for my issue. However, my situation is different from above. I think this should work for the current question. Jul 11, 2018 at 22:31
2

This happened to me as well. For anyone who arrives here via Google, if you have ejected your Angular project out of the CLI, I resolved this by editing the angular-cli.json and marking ejected false.

After that, I was able to run the suggestion above and find out my real error message.

For me, it was a piece of my component template that was making use of an injected service that was undefined in my unit test.

1

I stumbled on this issue too. Here are the things to look for (Just consolidating all possibilities into one location). I resolved my issue using first and second steps

  1. Try ng test --source-map=false to see if there's an issue elsewhere.
  2. If the issue is resolved by simply adding --source-map=false and if you are using mock services that returns an observable, make sure subscribers have an error handler, then you do not need the source-map false flag

    this.fe.getData().subscribe(d => { ... }, err => console.log(err));

  3. Use safe navigators in your HTML

  4. Make sure component inputs are set in test env check @tanya's answer
-1

It's caused by failed case(s). The real problem we want to address, is to fix the error, not hide it.

Try to use my solution Solution to fix your Angular 5 – TestBed bug of XMLHttpRequest cannot load ng:///DynamicTestModule/-

With my fix, there is no need to disable sourcemap and the real debugging info is revealed.

2
  • Not sure why my answer was down-voted. I use it very smoothly and it releases me from the greate hassling.
    – Paul Lan
    Jan 16, 2020 at 18:22
  • Probably because it involves modifying library files. Dec 19, 2020 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.