Angular 2-е тестирование - получение ошибки Не удалось загрузить 'ng:///DynamicTestModule/module.ngfactory.js'

У меня есть приложение angular 2 webpack, все настройки webpack, karma, созданные в соответствии с руководством по angular.io webpack. Я не использую aot. Я пишу жасмин unit test для тестирования моих компонентов. Сначала я попробовал без async-блока, в этом случае unit test просто получите выполнение только до вызова fixture.detectChanges(), после чего код не будет выполнен. Похоже, что fixture.detectChanges вызывает бесконечную блокировку.

Я попытался включить код в асинхронный блок. Затем я получаю следующую ошибку. Ошибка: не удалось выполнить 'send' в 'XMLHttpRequest': не удалось загрузить 'ng:///DynamicTestModule/module.ngfactory.js'


Код без async

beforeeach(()=> {
TestBed.configureTestingModule({
imports:[],
declaration :[Mycomp],
providers:[{ provide:MyService, useclass:MyMockService}]
});
 fixture=TestBed.createComponent(Mycomp);
 console.log(' before detect changes'):
 fixture.detectChanges():
 console.log('after detect changes');// this is not getting   
    logged .. karma shows 0 of 1 executed successfully

 });

С асинхронным

  beforeeach(async(()=> {
 TestBed.configureTestingModule({
  imports:[],
  declaration :[Mycomp],
  providers:[{ provide:MyService,       useclass:MyMockService}]
  });
   fixture=TestBed.createComponent(Mycomp);
    fixture.detectChanges():
  }));

Получение ошибки Не удалось загрузить dynamictestmodule/module.ngfactory.js

Ответ 1

Я столкнулся с этим вопросом вчера. Проблема заключалась в том, что у меня было свойство Input() в моем классе компонентов, которое я не устанавливал в тесте. Так, например, в my-component.ts:

@Component({
  selector: 'my-component'
})
export class MyComponent {
  @Input() title: string;
}

и my-component.spec.ts:

beforeEach(() => {
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  component.title = 'Hello there!' // <-- this is required!
  fixture.detectChanges();
});

Или вы можете указать значение по умолчанию в компоненте. В любом случае, тест сработает, если какие-либо входы не будут установлены, и вы получите эту неинтуитивную ошибку.

Примечание. Запуск ng test -sm=false приведет к появлению фактического сообщения об ошибке, вызывающего проблему. Кредит: fooobar.com/questions/107025/...

Ответ 2

Чтобы выяснить причину ошибки, отключите исходные карты:

Для angular-cli> = v6.x:

ng test --source-map=false

Для angular-cli v1.x:

ng test -sm=false

Затем вы увидите ошибку получше, например, Msgstr "Невозможно прочитать свойство 'x' из неопределенного" в исходном файле, вызвавшем ошибку. По какой-то причине в тестировании сейчас есть ошибка с исходными картами, и вы просто получаете эту загадочную ошибку.

Ответ 3

текущие тесты с --sourcemaps=false не заставят вас карма молча, но вы получите некоторые подробности об ошибке.

Ответ 4

Добавление к ответу Дэна Филда

Это проблема с версией Angular Cli 1.2.2 или новее. Запустите тест с --sourcemaps=false, и вы получите правильные сообщения об ошибках.

тест ng --sourcemaps = false

сокращение для этого:

тест ng -sm = false

Подробности смотрите здесь: https://github.com/angular/angular-cli/issues/7296

Ответ 5

У меня также была эта проблема, и это было связано с искаженными издевательскими данными. В моем компоненте у меня была служба, которая сделала http-вызов.

что-то вроде: (код службы)

getData() {
   return this.http.get(obj);
}

В компоненте я назвал эту функцию и подписался на нее: (код компонента)

this.service.getData().subscribe((data) => {
  this.componentData = data.things; //**<=== part that broke everything**
}, (error) => {
  console.log(error);
});

Решение:

Когда я высмеивал сервисную функцию, мне не удалось вернуть данные с атрибутом things. Это то, что вызвало сбой XMLHttpRequest, я полагаю, что angular похоже, что произошла ошибка, как если бы это был запрос HTTP. Убедившись, что я вернул правильные атрибуты на любые издевавшиеся HTTP-запросы, исправили проблемы.

Надеюсь, это прояснит ситуацию. Ниже приведен код реализации макета.

(component.specs)

function fakeSubscribe(returnValue,errorValue) {
  return {
    subscribe:function(callback,error){
      callback(returnValue);
      error(errorValue);
    }
  }
}



 class MockService {
      getData() {
        var fakeData = {
          things:[]
        }
        return fakeSubscribe(fakeData,0);
      }
   }

Ответ 6

Это наиболее ошибочное сообщение об ошибке, которое я когда-либо встречал в Angular.

В моем случае это не имело никакого отношения к отправке, не имеет ничего общего с XmlHttpRequest - по крайней мере, не на уровне, который вы предполагаете при попытке следовать сообщению.

Это было слишком насмехаться над классом, а именно ngrx/store. Я представил два метода Observable в контейнере, которые раньше не были включены в мой макет-класс, и я забыл сделать это, когда начал использовать их. После добавления к макету ошибка исчезла.

... оставляя Карму счастливым, чтобы выполнить "отправить" из XmlHttpRequest, что бы это ни значило.

Ответ 7

Я был укушен той же ошибкой на следующий день - на этот раз проблема была похожа на файл HTML. Использование простого теста длины массива для *ngIf

<ng-container *ngIf="myArray.length > 0">

пришлось реорганизовать в

<ng-container *ngIf="myArrayNotEmpty">

с геттером, как в:

get myArrayNotEmpty(){
  return this.myArray && this.myArray.length > 0;
}

Я немного раздражен, хотя такое множество причин покрывается одним очень вводящим в заблуждение и бесполезным сообщением.

Ответ 8

В моем случае в моей макетной службе отсутствовали некоторые общедоступные переменные, к которым обращается компонент в методе ngOnInit.

Ответ 9

У меня тоже была эта проблема. Это оказалось простой ошибкой нулевой ссылки в моем компоненте в одной из моих проверок * ngIf.

Я бы предложил запустить ng serve и проверить, работает ли компонент в браузере без ошибок, или просто запустить ng test --source-map = false, чтобы получить более полезное сообщение об ошибке.

Ответ 10

У меня была та же ошибка, когда я получил доступ к переменной неопределенного объекта.

Пример:

Компонент:

soemthing = {}

Шаблон:

<demo-something [someinput]="something.anotherthing.data"> ...

Таким образом, something был определен, anotherthing не определен, и data может быть недоступен.

Очень досадная ошибка и, насколько я мог судить, пока нет в списке :)