Angular 由于CORS问题，角4 Karma组件测试失败

当我运行

ng test

时，当我尝试测试组件时，我得到了这个错误（我使用带有

Karma

的标准设置）：

XMLHttpRequest无法加载ng:///DynamicTestModule/FullModalHeaderComponent.ngfactory.js。跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https。

我如何解决这个问题

代码：

---

另外，当我使用

ng test运行测试时--sourcemaps=false

问题就消失了。

这也发生在我身上。对于通过Google到达这里的任何人，如果您已经将Angular项目从CLI中弹出，我通过编辑Angular-CLI.json并将ejected标记为false来解决这个问题

在那之后，我能够运行上面的建议并找出我真正的错误消息

---

对我来说，这是我的组件模板的一部分，它使用了单元测试中未定义的注入服务。

当存在未初始化的

@输入时，组件测试可能会失败

为所有
@Input
属性提供合理的默认值：

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

或者确保在测试中对其进行初始化：

it('should be created', () => {
  component.processingCenter = new ProcessingCenter();
  component.publication = new Publication();
  component.title = 'The Title';
  expect(component).toBeTruthy();
});

如果您有以下情况，也可能发生这种情况：


您的
构造函数
或
onInit
调用服务
该服务被伪造/模拟，以便返回结果
服务上的订阅将在组件上设置属性
组件html有错误，例如：


{{result.item.subperty}

请注意，如果
项
是
未定义的
，因为您的伪/mock没有它，那么组件模板将导致异常，间接导致此问题

因此，请检查您的html是否存在此类问题，并修复您的伪/模拟和/或使您的模板更加健壮。
我也偶然发现了这个问题。以下是需要寻找的东西（只是将所有可能性整合到一个位置）。我通过第一步和第二步解决了问题

请尝试ng test--source map=false以查看其他地方是否存在问题
如果通过简单地添加--source map=false来解决问题，并且如果您使用的是返回可观察的模拟服务，请确保订阅者具有错误处理程序，那么您就不需要source map false标志

this.fe.getData（）.subscribe（d=>{
...
}，err=>console.log（err））

在HTML中使用安全的导航器

确保在测试环境检查@tanya的答案中设置了组件输入
它是由失败的案例引起的。我们想要解决的真正问题是修复错误，而不是隐藏错误

尝试使用我的解决方案

使用我的修复程序，无需禁用
sourcemap
，真正的调试信息就会显示出来。
您可以发布测试代码吗？这很可能来自这里当然，测试代码是从angular Client生成的。您可以试着运行
ng test--sourcemaps=false
并更新帖子吗？这个问题很可能是假的，因为这不可能是CORS问题。另外，你能发布你的HTML模板代码吗？我认为这是从这里来的，请务必检查您的模板变量，问题是从这里来的。最有可能的是，在测试运行或类似的情况下，没有实例化输入值。添加安全导航操作符可能会解决所有问题，您甚至可能不再需要
--sourcemaps=false
。例如：
{{entity.count}}
==>
{{{entity？.count}}
还要调查一下：这并没有解决我的问题，但这是我问题的正确原因。然而，我的情况与上述不同。我认为这应该适用于当前的问题。这是一个完整的答案。此外，对于同一个测试，我有一个TypeError，抱怨没有定义下一个，可能是因为它试图迭代一个不存在的字段。这个答案非常有用。我在嵌套子组件中出错。不确定为什么我的答案被否决。我使用它非常顺利，而且它让我从巨大的麻烦中解脱出来。可能是因为它涉及到修改库文件。
@Input('processingCenter') processingCenter: ProcessingCenter = null;
@Input('publication') publication: Publication = null;
@Input('title') title: string = '';

it('should be created', () => {
  component.processingCenter = new ProcessingCenter();
  component.publication = new Publication();
  component.title = 'The Title';
  expect(component).toBeTruthy();
});