Zone.js attempts to patch "fetch" even when "common/fetch" is not imported.

🐞 bug report

Affected Package

The issue is caused by package @angular/zone.js

Is this a regression?

Based on previous issue history, no.

Description

I am using angular in a web extension injected content script context. When the script is injected by the background page, the following error appears in Firefox:

This looks to be the same issue tracked by: https://github.com/angular/zone.js/issues/1115 which was resolved by them through configuring NgZone: 'noop' and manually implementing change detection. The issue was closed as “resolved in angular 7” but that doesn’t appear to be the case.

🔬 Minimal Reproduction

Here is my abbreviated polyfills.ts:

import 'zone.js/lib/zone';
import 'zone.js/lib/common/promise';

The application is delivered from the background script to the tab via:

browser.tabs.executeScript({
      file: 'content-script/polyfills.js',
      allFrames: true
});

Repo with readme to recreate this issue locally: https://github.com/spaceribs/zonejs-angular-issue

🔥 Exception or Error

ERROR Error: ""fetch" is read-only" core.js:6189:19
    Angular 2
        defaultErrorLogger
        handleError
    error app.component.ts:145
    RxJS 13
        __tryOrUnsub
        error
        _error
        error
        _error
        error
        notifyError
        _error
        error
        notifyError
        _error
        error
        subscribeToPromise
    Angular 10
        invoke
        onInvoke
        invoke
        run
        scheduleResolveOrReject
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        drainMicroTaskQueue

🌍 Your Environment

Angular Version:

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/cdk                      9.2.0
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant? This is on Firefox 75

I decided to dig a little deeper as well as compile zone.js myself in order to understand it a little better 😄.

The following lines appear to be the culprit, but I have little knowledge as to why fetch is being patched in common/promise rather than common/fetch by @JiaLiPassion : https://github.com/angular/zone.js/commit/ac3851ee31193a608a5bd12fbba90079e7328aca#diff-c87353777ac53dcde41fac9008e56425R492-R496 now at: https://github.com/angular/angular/blob/bf8ba89394ffd6d2047261e89d9f41e6ef66be3e/packages/zone.js/lib/common/promise.ts#L510-L514

For now in my project, I’m planning to copy this file and remove those lines.

[JiaLiPassion]

@spaceribs, sure, you can take a look the folder here https://github.com/angular/angular/tree/master/packages/zone.js/lib/browser, there are several standalone API patches source code here, depends on what kind of APIs you want to patch, you can find samples in this folder, feel free to contact me if you need any help!

[JiaLiPassion]

@spaceribs, thank you for the repo, I just confirmed, this has been fixed in https://github.com/angular/angular/pull/36311, but this PR is not included in the 0.10.3 release, so please wait for the next release. I will try to take a look about the ZoneAwarePromise has been overwritten issue later.