ReferenceError: XMLHttpRequest is not defined #41311

rabraghib · 2021-03-19T19:48:10Z

🐞 Bug report

What modules are related to this issue?

Is this a regression?

IDK 😕😕

Description

I am trying to make an http request via a pipe & I get the error below.

🔬 Minimal Reproduction

Here is a repo that show the bug: https://github.com/rabraghib/ng-universal-bug
the app setted up with the minimale possible changes using the CLI.

# generate new angular app
ng new ng-universal-bug --routing
# add angular universal
ng add @nguniversal/express-engine
# generate home module and route
ng g m home --route home --module app.module.ts
# generate http call pipe
ng g pipe home/httpCall

then I made some changes to let the pipe to make an http call to the given url .
& use it in home.component.html

🔥 Exception or Error


ERROR ReferenceError: XMLHttpRequest is not defined
    at BrowserXhr.build (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:150834:9)
    at Observable._subscribe (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:150868:41)       
    at Observable._trySubscribe (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:60530:25)     
    at Observable.subscribe (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:60516:22)
    at innerSubscribe (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:173928:23)
    at MergeMapSubscriber._innerSub (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:42626:105)
    at MergeMapSubscriber._tryNext (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:42620:14)  
    at MergeMapSubscriber._next (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:42603:18)     
    at MergeMapSubscriber.next (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:54386:18)      
    at Observable._subscribe (...\ng-universal-bug\dist\ng-universal-bug\server\main.js:131030:20)

🌍 Your Environment

# ng version
Angular CLI: 11.2.5
Node: 12.18.0
OS: win32 x64

Angular: 11.2.6
... animations, common, compiler, compiler-cli, core, forms    
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------      
@angular-devkit/architect       0.1102.5
@angular-devkit/build-angular   0.1102.5
@angular-devkit/core            11.2.5
@angular-devkit/schematics      11.2.5
@angular/cli                    11.2.5
@nguniversal/builders           11.2.1
@nguniversal/express-engine     11.2.1
@schematics/angular             11.2.5
@schematics/update              0.1102.5
rxjs                            6.6.6
typescript                      4.1.5

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2021-03-22T10:32:26Z

This seems to be a problem with the HttpClientModule.

What is happening here is that in the root injector we are setting XhrFactory to ServerXhr.

angular/packages/platform-server/src/http.ts

Line 140 in 5eb7f34

{provide: XhrFactory, useClass: ServerXhr}, {

However this is overridden in the child injector when HttpClientModule is used in a lazy module because of https://github.com/angular/angular/blob/master/packages/common/http/src/module.ts#L163

I think the best solution for this would be to move the registration of XhrFactory provider

angular/packages/common/http/src/module.ts

Lines 162 to 163 in 5eb7f34

    
           BrowserXhr, 
        
           {provide: XhrFactory, useExisting: BrowserXhr},

to the BrowserModule, similar to other Browser specific providers

angular/packages/platform-browser/src/browser.ts

Lines 69 to 91 in 5eb7f34

    
           export const BROWSER_MODULE_PROVIDERS: StaticProvider[] = [ 
        
             BROWSER_SANITIZATION_PROVIDERS, 
        
             {provide: INJECTOR_SCOPE, useValue: 'root'}, 
        
             {provide: ErrorHandler, useFactory: errorHandler, deps: []}, 
        
             { 
        
               provide: EVENT_MANAGER_PLUGINS, 
        
               useClass: DomEventsPlugin, 
        
               multi: true, 
        
               deps: [DOCUMENT, NgZone, PLATFORM_ID] 
        
             }, 
        
             {provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true, deps: [DOCUMENT]}, 
        
             HAMMER_PROVIDERS, 
        
             { 
        
               provide: DomRendererFactory2, 
        
               useClass: DomRendererFactory2, 
        
               deps: [EventManager, DomSharedStylesHost, APP_ID] 
        
             }, 
        
             {provide: RendererFactory2, useExisting: DomRendererFactory2}, 
        
             {provide: SharedStylesHost, useExisting: DomSharedStylesHost}, 
        
             {provide: DomSharedStylesHost, useClass: DomSharedStylesHost, deps: [DOCUMENT]}, 
        
             {provide: Testability, useClass: Testability, deps: [NgZone]}, 
        
             {provide: EventManager, useClass: EventManager, deps: [EVENT_MANAGER_PLUGINS, NgZone]}, 
        
             ELEMENT_PROBE_PROVIDERS,

…gular#41313) With this change we move `XhrFactory` to the root entrypoint of `@angular/commmon`, this is needed so that we can configure `XhrFactory` DI token at a platform level, and not add a dependency between `@angular/platform-browser` and `@angular/common/http`. Currently, when using `HttpClientModule` in a child module on the server, `ReferenceError: XMLHttpRequest is not defined` is being thrown because the child module has its own Injector and causes `XhrFactory` provider to be configured to use `BrowserXhr`. Therefore, we should configure the `XhrFactory` at a platform level similar to other Browser specific providers. BREAKING CHANGE: `XhrFactory` has been moved from `@angular/common/http` to `@angular/common`. **Before** ```ts import {XhrFactory} from '@angular/common/http'; ``` **After** ```ts import {XhrFactory} from '@angular/common'; ``` Closes angular#41311 PR Close angular#41313

angular-automatic-lock-bot · 2021-04-29T16:06:22Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

AndrewKushnir · 2021-04-30T22:44:22Z

FYI, reopening this ticket based on #41909.

JoostK · 2021-04-30T22:45:42Z

For the record: the fix in #41313 has only been merged to master as it was a breaking change (although the breakage was mitigated in a follow up change, I believe) so this will only be fixed in v12, which has not yet been released.

AndrewKushnir · 2021-04-30T22:47:55Z

@JoostK great point, thanks for noticing this!

@rabraghib could you please try to use 12.0.0-rc.1 version of Angular packages and see if the problem is resolved?

rabraghib · 2021-04-30T23:43:06Z

yes Its fixed in v12 👌. TY for the swift response!

angular-automatic-lock-bot · 2021-05-31T16:22:30Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

alan-agius4 transferred this issue from angular/universal Mar 22, 2021

alan-agius4 added the area: common/http label Mar 22, 2021

ngbot bot added this to the needsTriage milestone Mar 22, 2021

alan-agius4 mentioned this issue Mar 22, 2021

fix(platform-browser): configure XhrFactory to use BrowserXhr #41313

Closed

alan-agius4 self-assigned this Mar 22, 2021

alan-agius4 added the type: bug/fix label Mar 23, 2021

jelbourn added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Mar 24, 2021

ngbot bot modified the milestones: needsTriage, Backlog Mar 24, 2021

alan-agius4 added the state: has PR label Mar 25, 2021

alxhub closed this as completed in e0028e5 Mar 29, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 29, 2021

rabraghib mentioned this issue Apr 30, 2021

[Reopen] ReferenceError: XMLHttpRequest is not defined #41909

Closed

AndrewKushnir reopened this Apr 30, 2021

angular unlocked this conversation Apr 30, 2021

rabraghib closed this as completed Apr 30, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators May 31, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReferenceError: XMLHttpRequest is not defined #41311

ReferenceError: XMLHttpRequest is not defined #41311

rabraghib commented Mar 19, 2021

alan-agius4 commented Mar 22, 2021 •

edited

angular-automatic-lock-bot bot commented Apr 29, 2021

AndrewKushnir commented Apr 30, 2021

JoostK commented Apr 30, 2021

AndrewKushnir commented Apr 30, 2021 •

edited

rabraghib commented Apr 30, 2021

angular-automatic-lock-bot bot commented May 31, 2021

ReferenceError: XMLHttpRequest is not defined #41311

ReferenceError: XMLHttpRequest is not defined #41311

Comments

rabraghib commented Mar 19, 2021

🐞 Bug report

What modules are related to this issue?

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

alan-agius4 commented Mar 22, 2021 • edited

angular-automatic-lock-bot bot commented Apr 29, 2021

AndrewKushnir commented Apr 30, 2021

JoostK commented Apr 30, 2021

AndrewKushnir commented Apr 30, 2021 • edited

rabraghib commented Apr 30, 2021

angular-automatic-lock-bot bot commented May 31, 2021

alan-agius4 commented Mar 22, 2021 •

edited

AndrewKushnir commented Apr 30, 2021 •

edited