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

JeanMeche · thePunderWoman · commit 291ba38623cf · 2023-11-08T18:42:20.000Z
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 #52425
diff --git a/packages/common/http/src/private_export.ts b/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';
diff --git a/packages/misc/angular-in-memory-web-api/src/http-client-in-memory-web-api-module.ts b/packages/misc/angular-in-memory-web-api/src/http-client-in-memory-web-api-module.ts
@@ -7,7 +7,7 @@
  */
 
 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';
@@ -31,6 +31,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]
@@ -49,7 +51,8 @@ export class HttpClientInMemoryWebApiModule {
           provide: HttpBackend,
           useFactory: httpClientInMemBackendServiceFactory,
           deps: [InMemoryDbService, InMemoryBackendConfig, XhrFactory]
-        }
+        },
+        {provide: PRIMARY_HTTP_BACKEND, useExisting: HttpBackend}
       ]
     };
   }
diff --git a/packages/misc/angular-in-memory-web-api/src/in-memory-web-api-module.ts b/packages/misc/angular-in-memory-web-api/src/in-memory-web-api-module.ts
@@ -7,7 +7,7 @@
  */
 
 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';
@@ -23,6 +23,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]
@@ -41,7 +43,8 @@ export class InMemoryWebApiModule {
           provide: HttpBackend,
           useFactory: httpClientInMemBackendServiceFactory,
           deps: [InMemoryDbService, InMemoryBackendConfig, XhrFactory]
-        }
+        },
+        {provide: PRIMARY_HTTP_BACKEND, useExisting: HttpBackend}
       ]
     };
   }
diff --git a/packages/misc/angular-in-memory-web-api/test/http-client-backend-service_spec.ts b/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);
+    });
+  });
 });
 
 
