fix(http): Don't override the backend when using the InMemoryWebAPI (angular#52425)

When using `withFetch`,  the `PRIMARY_HTTP_BACKEND` token is set.

The InMemory Backend services will also set that token.

This means that providers order will matter and the latest on the list will be the one instantiated

PR Close angular#52425

Author: JeanMeche

packages/common/http/src/private_export.ts

@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export {HTTP_ROOT_INTERCEPTOR_FNS as ɵHTTP_ROOT_INTERCEPTOR_FNS} from './interceptor';
+export {HTTP_ROOT_INTERCEPTOR_FNS as ɵHTTP_ROOT_INTERCEPTOR_FNS, PRIMARY_HTTP_BACKEND as ɵPRIMARY_HTTP_BACKEND} from './interceptor';

packages/misc/angular-in-memory-web-api/src/http-client-in-memory-web-api-module.ts

@@ -6,21 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {XhrFactory} from '@angular/common';
-import {HttpBackend} from '@angular/common/http';
+import {HttpBackend, ɵPRIMARY_HTTP_BACKEND as PRIMARY_HTTP_BACKEND} from '@angular/common/http';
 import {ModuleWithProviders, NgModule, Type} from '@angular/core';
 
 import {HttpClientBackendService} from './http-client-backend-service';
 import {InMemoryBackendConfig, InMemoryBackendConfigArgs, InMemoryDbService} from './interfaces';
 
-// Internal - Creates the in-mem backend for the HttpClient module
-// AoT requires factory to be exported
-export function httpClientInMemBackendServiceFactory(
-    dbService: InMemoryDbService, options: InMemoryBackendConfig,
-    xhrFactory: XhrFactory): HttpBackend {
-  return new HttpClientBackendService(dbService, options, xhrFactory) as HttpBackend;
-}
-
 @NgModule()
 export class HttpClientInMemoryWebApiModule {
   /**
@@ -31,6 +22,8 @@ export class HttpClientInMemoryWebApiModule {
    *  Usually imported in the root application module.
    *  Can import in a lazy feature module too, which will shadow modules loaded earlier
    *
+   *  Note: If you use the `FetchBackend`, make sure forRoot is invoked after in the providers list
+   *
    * @param dbCreator - Class that creates seed data for in-memory database. Must implement
    *     InMemoryDbService.
    * @param [options]
@@ -44,12 +37,10 @@ export class HttpClientInMemoryWebApiModule {
     return {
       ngModule: HttpClientInMemoryWebApiModule,
       providers: [
-        {provide: InMemoryDbService, useClass: dbCreator},
-        {provide: InMemoryBackendConfig, useValue: options}, {
-          provide: HttpBackend,
-          useFactory: httpClientInMemBackendServiceFactory,
-          deps: [InMemoryDbService, InMemoryBackendConfig, XhrFactory]
-        }
+        HttpClientBackendService, {provide: InMemoryDbService, useClass: dbCreator},
+        {provide: InMemoryBackendConfig, useValue: options},
+        {provide: HttpBackend, useExisting: HttpClientBackendService},
+        {provide: PRIMARY_HTTP_BACKEND, useExisting: HttpClientBackendService}
       ]
     };
   }

packages/misc/angular-in-memory-web-api/src/in-memory-web-api-module.ts

@@ -6,11 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {XhrFactory} from '@angular/common';
-import {HttpBackend} from '@angular/common/http';
+import {HttpBackend, ɵPRIMARY_HTTP_BACKEND as PRIMARY_HTTP_BACKEND} from '@angular/common/http';
 import {ModuleWithProviders, NgModule, Type} from '@angular/core';
 
-import {httpClientInMemBackendServiceFactory} from './http-client-in-memory-web-api-module';
+import {HttpClientBackendService} from './http-client-backend-service';
 import {InMemoryBackendConfig, InMemoryBackendConfigArgs, InMemoryDbService} from './interfaces';
 
 @NgModule()
@@ -23,6 +22,8 @@ export class InMemoryWebApiModule {
    *  Usually imported in the root application module.
    *  Can import in a lazy feature module too, which will shadow modules loaded earlier
    *
+   *  Note: If you use the `FetchBackend`, make sure forRoot is invoked after in the providers list
+   *
    * @param dbCreator - Class that creates seed data for in-memory database. Must implement
    *     InMemoryDbService.
    * @param [options]
@@ -37,11 +38,9 @@ export class InMemoryWebApiModule {
       ngModule: InMemoryWebApiModule,
       providers: [
         {provide: InMemoryDbService, useClass: dbCreator},
-        {provide: InMemoryBackendConfig, useValue: options}, {
-          provide: HttpBackend,
-          useFactory: httpClientInMemBackendServiceFactory,
-          deps: [InMemoryDbService, InMemoryBackendConfig, XhrFactory]
-        }
+        {provide: InMemoryBackendConfig, useValue: options},
+        {provide: HttpBackend, useClass: HttpClientBackendService},
+        {provide: PRIMARY_HTTP_BACKEND, useExisting: HttpClientBackendService}
       ]
     };
   }

packages/misc/angular-in-memory-web-api/test/http-client-backend-service_spec.ts

@@ -8,8 +8,8 @@
 
 import 'jasmine-ajax';
 
-import {HTTP_INTERCEPTORS, HttpBackend, HttpClient, HttpClientModule, HttpEvent, HttpEventType, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
-import {Injectable} from '@angular/core';
+import {FetchBackend, HTTP_INTERCEPTORS, HttpBackend, HttpClient, HttpClientModule, HttpEvent, HttpEventType, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse, provideHttpClient, withFetch} from '@angular/common/http';
+import {importProvidersFrom, Injectable} from '@angular/core';
 import {TestBed, waitForAsync} from '@angular/core/testing';
 import {HttpClientBackendService, HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api';
 import {Observable, zip} from 'rxjs';
@@ -565,6 +565,34 @@ describe('HttpClient Backend Service', () => {
                  failRequest);
        }));
   });
+
+  describe('when using the FetchBackend', () => {
+    it('should be the an InMemory Service', () => {
+      TestBed.configureTestingModule({
+        providers: [
+          provideHttpClient(withFetch()),
+          importProvidersFrom(
+              HttpClientInMemoryWebApiModule.forRoot(HeroInMemDataService, {delay})),
+          {provide: HeroService, useClass: HttpClientHeroService}
+        ]
+      });
+
+      expect(TestBed.inject(HttpBackend)).toBeInstanceOf(HttpClientBackendService);
+    });
+
+    it('should be a FetchBackend', () => {
+      // In this test, providers order matters
+      TestBed.configureTestingModule({
+        providers: [
+          importProvidersFrom(
+              HttpClientInMemoryWebApiModule.forRoot(HeroInMemDataService, {delay})),
+          provideHttpClient(withFetch()), {provide: HeroService, useClass: HttpClientHeroService}
+        ]
+      });
+
+      expect(TestBed.inject(HttpBackend)).toBeInstanceOf(FetchBackend);
+    });
+  });
 });