Angulaire 2 unité d'essai - erreur Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'

Je suis tombé sur cette question de moi-même hier. Le problème était que j'avais un Input() bien sur ma classe de composant que je n'ai pas de réglage dans le test. Ainsi, par exemple, dans mon composant.ts:

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

et mon composant.spec.ts:

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

Ou vous pouvez fournir une valeur par défaut dans le composant quelque part. De toute façon, le test de collision si toutes les entrées ne sont pas ensemble et vous obtiendrez que peu intuitive erreur.

Remarque: l'Exécution de ng test -sm=false donnera le véritable message d'erreur à l'origine du problème. Crédit: https://stackoverflow.com/a/45802115/61311

de l'exécution des tests avec --sourcemaps=false ne manquera pas de Karma, silencieusement mais de vous donner quelques détails sur l'erreur à la place.

J'ai aussi eu ce problème et c'était dû à mal formé moqué de données.
Dans mon composant, j'ai eu un service qui ont fait un appel http.

quelque chose comme: (code de service)

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

Dans le composant, j'ai appelé cette fonction et souscrit: (code du composant)

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

Solution:

Quand j'ai raillé la fonction de service je n'ai pas réussi à retourner les données qui avaient l'attribut things. C'est ce qui a causé la XMLHttpRequest échec, je suppose angulaire, il ressemblait à l'erreur s'est passé comme si c'était de la requête HTTP. S'assurer que je retourne les attributs corrects sur toute moqué de requêtes HTTP résolu les problèmes.

Espère que cela efface les choses. Ci-dessous est le code pour la mise en œuvre de la maquette.

(composant.spécifications)

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



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

J'ai été mordu par le même message d'erreur lendemain, cette fois, le problème a été enterré dans le fichier HTML. À l'aide d'un simple tableau de test de longueur pour *ngIf

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

a dû être remaniée en

<ng-container *ngIf="myArrayNotEmpty">

avec un getter comme dans:

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

Je suis un peu irrité mais qu'une telle variété de causes est couvert par un très trompeuse et peu serviable message.

J'ai juste eu cette question. Il s'est avéré être une simple référence null erreur dans mon composant dans un de mes *ngIf contrôles.

Je vous conseille d'exécuter ng servir et de vérifier le composant fonctionne dans le navigateur, sans erreurs, ou simplement de l'exécuter ng test --source-carte=false pour obtenir un plus utiles message d'erreur.