Angular 2 个单元测试 - 出现错误加载失败 'ng:///DynamicTestModule/module.ngfactory.js'

Question

我有 angular 2 个 webpack 应用程序，所有 webpack、karma 配置都是根据 angular.io webpack 指南创建的。我没有使用 aot。我正在编写 jasmine 单元测试规范来测试我的组件。首先，我尝试不使用异步块，在那种情况下，单元测试只会执行到 fixture.detectChanges() 调用，之后的代码不会执行。似乎 fixture.detectChanges 调用被无限阻塞。

我尝试在异步块中包含代码。然后我得到以下错误。 Error:Failed 在 'XMLHttpRequest' 上执行 'send'：无法加载 'ng:///DynamicTestModule/module.ngfactory.js'

没有异步的代码

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

Answer 1

昨天我自己运行进入了这个问题。问题是我的组件 class 上有一个我没有在测试中设置的 Input() 属性。例如，在 my-component.ts:

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

和我的-component.spec.ts:

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

或者您可以在组件中的某处提供默认值。无论哪种方式，如果未设置任何输入，测试都会崩溃，并且您会收到不直观的错误。

注意：运行 ng test -sm=false 将给出导致问题的实际错误消息。图片来源：

Answer 2

我也遇到了这个问题，这是由于模拟数据格式不正确造成的。在我的组件中，我有一个进行 http 调用的服务。

类似于：（服务代码）

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

在组件中我调用了这个函数并订阅了它：(组件代码)

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

解法：

当我模拟服务功能时，我未能 return 具有属性 things 的数据。这就是导致 XMLHttpRequest 失败的原因，我想 angular 看起来错误就像是 HTTP 请求一样发生了。确保我 return 在任何模拟的 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);
      }
   }

Answer 3

这是我在Angular遇到过的最具有欺骗性的错误信息。

在我的例子中，它与 sending 无关，与 XmlHttpRequest 无关 - 至少与你的水平无关d尝试关注消息时猜测。

嘲笑一个class也就是ngrx/store太过分了。我在一个容器中引入了两个 Observable 方法，之前我的模型 class 中没有包含这些方法，当我开始使用它们时我忘记这样做了。一旦添加到模型中，错误就消失了。

...让 Karma 很高兴能够 从 XmlHttpRequest 执行 'send'，无论它意味着什么。

Answer 4

第二天我被同样的错误咬伤了——这次问题被埋在了HTML文件中。对 *ngIf

使用简单的数组长度测试

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

必须重构为

<ng-container *ngIf="myArrayNotEmpty">

带有 getter，如：

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

尽管如此多种多样的原因被一条极具误导性和无用的消息涵盖了，但我还是有点恼火。

Answer 5

运行使用 --sourcemaps=false 进行的测试不会让 Karma 无提示地失败，而是会为您提供有关错误的一些详细信息。

Answer 6

要找出真正导致错误的原因，请禁用源映射：

对于 angular-cli >= v6.x:

ng test --source-map=false

对于angular-cli v1.x:

ng test -sm=false

然后您会看到更好的错误，例如"Cannot read property 'x' of undefined" 在导致错误的实际源文件中。出于某种原因，目前正在测试中的 sourcemaps 存在一个错误，你只会得到这个神秘的错误。

Answer 7

就我而言，我的模拟服务缺少一些 public 组件在 ngOnInit 方法中访问的变量。

Answer 8

补充 Dan Field 的回答

这是 Angular Cli 版本 1.2.2 或更高版本 的问题。运行使用 --sourcemaps=false 进行测试，您将收到正确的错误消息。

ng test --sourcemaps=false

shorthand 因为这是：

ng test -sm=false

在此处查看详细信息：https://github.com/angular/angular-cli/issues/7296

Answer 9

我也遇到了这个问题。在我的 *ngIf 检查之一中，结果证明我的组件中存在一个简单的空引用错误。

我建议运行ning ng serve 并检查组件是否在浏览器中正常运行，没有任何错误，或者只是运行 ng test --source-map=false 以获得更有用的错误消息。

Answer 10

访问未定义对象的变量时出现同样的错误。

示例：

分量：

soemthing = {}

模板：

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

因此 something 已定义，anotherthing 未定义，因此无法访问 data。

非常烦人的错误，据我所知还没有出现在列表中:)

Angular 2 个单元测试 - 出现错误加载失败 'ng:///DynamicTestModule/module.ngfactory.js'

Angular 2 unit testing - getting error Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'

karma-runner

webpack

angular