Angular 2 单元测试 - 出现错误无法加载“ng:///DynamicTestModule/module.ngfactory.js”答案

【问题标题】：Angular 2 unit testing - getting error Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'Angular 2 单元测试 - 出现错误无法加载“ng:///DynamicTestModule/module.ngfactory.js”
【发布时间】：2017-10-30 11:41:14
【问题描述】：

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

我尝试在异步块中包含代码。然后我得到以下错误。错误：无法在“XMLHttpRequest”上执行“发送”：无法加载“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失败

【问题讨论】：

标签： angular webpack karma-runner

【解决方案1】：

我昨天自己遇到了这个问题。问题是我的组件类上有一个 Input() 属性，我没有在测试中设置。例如，在 my-component.ts 中：

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

和我的组件.spec.ts：

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

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

注意：运行ng test -sm=false 将给出导致问题的实际错误消息。信用：https://stackoverflow.com/a/45802115/61311

【讨论】：

这是真的，但有时当我有一个未正确模拟的服务或我的组件试图访问其中一个服务返回的空值时，我也会遇到同样的错误。仍然是一个有效的答案，但请注意，这可能并不总能解决问题。
刚刚发现，你可以通过将sourcemap选项设置为false来获得更好的错误信息：ng test --sourcemap=false
@blo0p3r 这很好！将 sourcemap 设置为 false 会将无用的 XMLHttpRequest 错误变成实际的根错误。
在我的情况下--sourcemap=false 完全删除了错误^^
在 package.json 中使用自定义脚本不适用于 -sm=false 和 karma。即 "scripts": { "custom-test": "karma start --single-run=false -sm=false" } 你必须使用 ng test -sm=false。

【解决方案2】：

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

对于 angular-cli >= v6.x：

ng test --source-map=false

对于 angular-cli v1.x：

ng test -sm=false

然后您会看到更好的错误，例如“无法读取未定义的属性 'x'”在导致错误的实际源文件中。出于某种原因，目前正在测试的源映射存在一个错误，而您只是得到了这个神秘的错误。

【讨论】：

-sm 或 -sourcemaps 在我这边不起作用（CLI 版本？），而是 -source-map i> 有效。

【解决方案3】：

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

【讨论】：

【解决方案4】：

补充 Dan Field 的回答

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

ng 测试 --sourcemaps=false

简写为：

ng 测试 -sm=false

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

【讨论】：

这应该是评论，或者更好的是，对其他答案的编辑
感谢@AndréWerlang 的有用评论。欣赏！

【解决方案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 失败的原因，我猜想它看起来像是发生了错误，就好像它是 HTTP 请求一样。确保我在任何模拟的 HTTP 请求上返回了正确的属性，从而解决了这些问题。

希望这可以解决问题。下面是 mock 的实现代码。

(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);
      }
   }

【讨论】：

试图弄清楚这一点，以及类似的概念。当组件期望 Observable 时，我的模拟服务返回 Observable 以外的类型。

【解决方案6】：

这是我在 Angular 中遇到的最具欺骗性的错误消息。

在我的情况下，它与 sending 无关，与 XmlHttpRequest 无关 - 至少不是您在尝试关注消息时猜测的级别.

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

...让 Karma 很高兴能够从 XmlHttpRequest 执行“发送”，无论它意味着什么。

【讨论】：

@KevinOrfas，我有同样的问题和类似的解决方案。在我的例子中，嵌套在我正在测试的组件中的一个组件进行了 HTTP 调用。我需要模拟 HTTP 服务以克服他们奇怪的错误。
@user776686 ，你是如何嘲笑课堂的以及你是如何解决的，请你提供一些信息。

【解决方案7】：

第二天我被同样的错误所困扰 - 这次问题被隐藏在 HTML 文件中。对*ngIf使用简单的数组长度测试

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

必须重构为

<ng-container *ngIf="myArrayNotEmpty">

使用吸气剂，如：

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

虽然一个非常误导和无益的信息涵盖了如此多的原因，但我有点恼火。

【讨论】：

您已经回答了两次这个问题 - 在我的代码库的不同部分中，这两个答案都与我相关。我对这个问题很恼火。
你也可以改用<ng-container *ngIf="myArray?.length > 0">。由于您的代码由于 myArray 当时不可用而被破坏，后来被添加。添加 ? 是惰性检查，其作用与您在外部函数中实现的相同。
@markus 你显然是对的，随着时间的推移我已经学会了。我什至忘了我回答了这个问题;-)

【解决方案8】：

在我的例子中，我的模拟服务缺少一些由组件在 ngOnInit 方法中访问的公共变量。

【讨论】：

【解决方案9】：

我也遇到了这个问题。在我的一次 *ngIf 检查中，我的组件中出现了一个简单的空引用错误。

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

【讨论】：

【解决方案10】：

当我访问一个未定义对象的变量时，我遇到了同样的错误。

例子：

组件：

soemthing = {}

模板：

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

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

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

【讨论】：