Failed: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'.
AugusDogus opened this issue · 4 comments
I followed your tutorial on your blog and did not run into any errors, but when trying to replicate the steps in my current project I am.
When trying to setup the most basic test for home.ts
import { Component } from '@angular/core';
import { WelcomeSegmentComponent } from '../../components/welcome-segment/welcome-segment';
@Component({
selector: 'page-home',
templateUrl: './home.html',
})
export class HomePage {
constructor() {}
ionViewDidLoad() {
}
}
using the basic test laid out on your blog post
import { ComponentFixture, async } from '@angular/core/testing';
import { TestUtils } from '../../test';
import { HomePage } from './home';
import { WelcomeSegmentComponent } from "../../components/welcome-segment/welcome-segment";
let fixture: ComponentFixture<HomePage> = null;
let instance: any = null;
describe('Pages: HomePage', () => {
beforeEach(async(() => TestUtils.beforeEachCompiler([HomePage, WelcomeSegmentComponent]).then(compiled => {
fixture = compiled.fixture;
instance = compiled.instance;
})));
it('should create the home page', async(() => {
expect(instance).toBeTruthy();
}));
});
I receive the error Failed: Uncaught (in promise): Error: No provider for UserProvider!
In my attempts to troubleshoot I included the testbed config inline in my test to add UserProvider to the list of providers.
import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { App, Platform, Form, Keyboard, MenuController, NavController, Config, IonicModule } from "ionic-angular";
import { ConfigMock } from "ionic-mocks";
import { FormsModule, ReactiveFormsModule} from "@angular/forms";
import { HomePage } from './home';
import { WelcomeSegmentComponent } from "../../components/welcome-segment/welcome-segment";
import { UserProvider } from "../../providers/user/user";
let fixture: ComponentFixture<HomePage> = null;
let instance: any = null;
describe('Pages: HomePage', () => {
let fixture = null;
let instance = null;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [HomePage, WelcomeSegmentComponent],
providers: [
App, Platform, Form, Keyboard, MenuController, NavController, UserProvider,
{provide: Config, useFactory: () => ConfigMock.instance()},
],
imports: [
FormsModule,
IonicModule,
ReactiveFormsModule,
],
})
.compileComponents().then(() => {
fixture = TestBed.createComponent(HomePage);
instance = fixture;
fixture.detectChanges();
});
}));
it('should create the home page', async(() => {
expect(instance).toBeTruthy();
}));
});
Having done this I now receive the error Failed: Uncaught (in promise): Error: No provider for DomController! and so I add that to the list of providers in the same way I did with UserProvider.
Following this I end up with the error Failed: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'.
I've redone these steps with minor differences here and there, but I always end up with the same error at the end. I'm not sure if I should be stubbing/mocking these components or services or if I'm completely off trail.
I'm very new to Angular, Jasmine, and testing in general. Any help offered would be much appreciated.
Hey,
Please see #191.
- You may want to be mocking UserProvider rather than using it directly
- https://stackoverflow.com/questions/44254758/angular-2-unit-testing-getting-error-failed-to-load-ng-dynamictestmodule-m
Thanks
Generally you can check the real error if you do:
ng test -sm=false
instead of
ng test
sm stands for sourcemap
Sometimes even that doesn't work and you need to set a breakpoint just before the exception and execute on the browser console and you receive the real error
the flag -sm=false is now --source-map=false
Try my solution: