Angular 2單元測試 - 獲取錯誤無法加載'ng：///DynamicTestModule/module.ngfactory.js'

我有angular 2 webpack應用程序，所有webpack，根據angular.io webpack指南創建的karma配置。我不使用aot。我正在寫茉莉花單元測試規範來測試我的組件。首先，我嘗試沒有異步塊，在這種情況下，單元測試只能得到執行，直到fixture.detectChanges（）調用，之後的代碼不會被執行。看起來像fixture.detectChanges調用無限地被阻止。Angular 2單元測試 - 獲取錯誤無法加載'ng：///DynamicTestModule/module.ngfactory.js'

我嘗試通過在異步塊中包含代碼。然後我得到以下錯誤。錯誤：無法執行 '發送' 上 '的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

來源

2017-05-30 Amit Gaikwad

昨天我自己遇到了這個問題。問題是我的組件類有一個Input（）屬性，我沒有在測試中設置。因此，例如，在我-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會給出導致問題的實際錯誤消息。積分：https://stackoverflow.com/a/45802115/61311

來源

2017-07-26 13:26:59 newclearwinter

這是真的，但我也得到了同樣的錯誤，有時，當我有沒有正確嘲笑或服務如果我的組件試圖訪問其中一個服務返回的空值。仍然是一個有效的答案，但要注意，這可能並不總能解決問題。 – blo0p3r

+13

剛剛發現，通過將'sourcemap'選項設置爲false可以得到更好的錯誤信息：'ng test --sourcemap = false' – blo0p3r

@ blo0p3r這是一個很好的結果！將sourcemap設置爲false會將無用的XMLHttpRequest錯誤轉換爲實際的根錯誤。 – newclearwinter

我也有這個問題，這是由於歪曲的數據。在我的組件中，我有一個服務做了一個http調用。

是這樣的：（服務代碼）

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

在我稱這個功能組件，並訂閱了它：（組件代碼）

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

解決方案：

當我嘲笑的時候e服務功能我無法返回具有屬性things的數據。這是導致XMLHttpRequest失敗的原因，我猜測它看起來像發生錯誤就好像它是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); 
     } 
    }

來源

2017-07-31 15:05:02

正試圖弄清楚這一點，以及類似的概念。當組件期望Observable時，我的模擬服務返回的類型不是Observable。 –

這是我在角一生中遇到的最迷惑人的錯誤消息。

對我來說，它有無關發送，無關的XmlHttpRequest - 至少不是在試圖跟隨消息時，你猜的水平。

這是嘲笑一類，即ngrx /店。我在一個容器中引入了兩個Observable方法，這些方法之前沒有包含在我的模擬類中，而當我開始使用這些方法時，我忘了這麼做。一旦添加到模型中，錯誤就消失了。

...離開噶高興能夠從XmlHttpRequest執行「發送」，無論它是什麼意思。

來源

2017-08-07 18:24:56 user776686

你能舉一個你如何解決它的例子嗎？ – KevinOrfas

@KevinOrfas，我有同樣的問題和類似的解決方案，我的問題。就我而言，嵌套在組件內部的組件是測試了一個HTTP調用。我需要嘲笑HTTP服務來克服它們奇怪的錯誤。 – tylerjgarland

第二天我被同樣的錯誤咬了 - 這次問題被掩埋在HTML文件中。使用一個簡單的數組長度測試*ngIf

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

不得不被重構到

<ng-container *ngIf="myArrayNotEmpty">

吸氣劑，如：

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

我有點惱火，雖然這樣的品種一個非常具有誤導性和無益的信息涵蓋了原因。

來源

2017-08-09 22:13:33 user776686

你已經回答了這個問題兩次 - 這兩個答案在我的代碼庫的不同部分與我有關。我對這個問題感到十分惱火。 – Miller

運行測試--sourcemaps=false不會使Karma默默無聞，但會給你一些關於錯誤的細節。

來源

2017-08-18 22:52:21 user776686

要了解什麼是真正造成錯誤，禁用源地圖：

ng test -sm=false

然後您將看到一個更好的錯誤，例如「無法讀取導致錯誤的實際源文件中未定義的」「屬性'x'。出於某種原因，現在測試中存在一個源代碼映射的錯誤，而您只是得到這個神祕的錯誤。

來源

2017-08-21 16:46:42

就我而言，我的模擬服務缺少ngOnInit方法中組件訪問的一些公共變量。

來源

2017-10-25 21:46:15 maia

添加到丹菲爾德的回答

這是1.2.2或更高版本的Angular Cli版中的問題。用--sourcemaps=false運行你的測試，你會得到正確的錯誤信息。

ng test --sourcemaps=false

速記是這樣的：

ng test -sm=false

這裏查看詳情：https://github.com/angular/angular-cli/issues/7296

來源

2017-11-08 19:40:59

Angular 2單元測試 - 獲取錯誤無法加載'ng：///DynamicTestModule/module.ngfactory.js'

回答

相關問題