angular: Angular 4 fails to provide MockBackend

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Exception if adding MockBackend to a list of AppModule providers:

“Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using ‘barrel’ index.ts files.”

This behavior since Angular 4.0 RC4/5. Mocking this way in 4.0 RC3 and earlier working just fine.

Exception in CompileMetadataResolver.prototype._getProvidersMetadata function … else if (provider === void 0) { _this._reportError(syntaxError(“Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using ‘barrel’ index.ts files.”)); } …

Expected behavior

FakeProvider is instantiated and MockBackend instance successfully injected.

Minimal reproduction of the problem with instructions

Add MockBackend to a list of AppModule providers. … import {MockBackend} from “@angular/http/testing”; … providers: [ … MockBackend, // <– //FakeProvider, //BaseRequestOptions ], …

What is the motivation / use case for changing the behavior?

Mock an Http service for testing purpose and backend-less development

Please tell us about your environment:

  • Angular version: 4.0.0
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: Typescript 2.2

  • Node (for AoT issues): node --version = 6.6.0

  • webpack: "^2.3.2", webpack-dev-server: "^2.4.2", webpack-merge: "^4.1.0"
    

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 4
  • Comments: 20 (3 by maintainers)

Commits related to this issue

Most upvoted comments

How i can run Angular 4 with MVC Asp.net ?? anybody please help

I believe I am seeing a similar issue.
If I build with AOT (ng build --prod): ERROR in ./src/$$_gendir/app/app.module.ngfactory.ts Module not found: Error: Can’t resolve ‘@angular/http/testing/src/mock_backend’ in ‘C:\git\web_lcm_gatwick\src$$_gendir\app’ @ ./src/$$_gendir/app/app.module.ngfactory.ts 60:0-67 @ ./src/main.ts @ multi ./src/main.ts

If I comment out MockBackend in my providers the issue goes away. If I disable AOT, the issue goes away.

Simple reproduction with angular-cli 1.0.0:

  1. ng new ngcli
  2. edit app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MockBackend } from "@angular/http/testing";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
      MockBackend
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. ng build --prod produces error:

ERROR in ./src/$$_gendir/app/app.module.ngfactory.ts Module not found: Error: Can’t resolve ‘@angular/http/testing/src/mock_backend’ in ‘C:\git\ngcli\src$$_gendir\app’ @ ./src/$$_gendir/app/app.module.ngfactory.ts 23:0-66 @ ./src/main.ts @ multi ./src/main.ts

  1. if you run ng build everything works fine

Same problem using Angular CLI 1.0.0 and Angular 4.0.0

The issue is closed but i still get the error, i just upgraded to angular 4 (4.1.3) 2 days before, all the production code works fine, but all the tests are down, on reason is the MockBackend imported form ‘@angular/http/testing’ is undefined. My project don’t use cli, the test is started by Karma and webpack. the curious thing is all other angular module import works except for testing include ‘@angular/http/testing’ and ‘@angular/core/testing’ Any ideas? thanks!

Confirmed fix in 4.1.2. Thanks everyone!

Just tried this again with Angular version 4.0.3 and the issue still exists.
Using my reproduction steps above >https://github.com/angular/angular/issues/15521#issuecomment-290118657

ng build --prod or ng serve --prod produces the error.