🐞 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: angular/zone.js#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 :
angular/zone.js@ac3851e#diff-c87353777ac53dcde41fac9008e56425R492-R496
now at:
|
const fetch = global['fetch']; |
|
if (typeof fetch == 'function') { |
|
global[api.symbol('fetch')] = fetch; |
|
global['fetch'] = zoneify(fetch); |
|
} |
For now in my project, I'm planning to copy this file and remove those lines.
🐞 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: angular/zone.js#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:The application is delivered from the background script to the tab via:
Repo with readme to recreate this issue locally: https://github.com/spaceribs/zonejs-angular-issue
🔥 Exception or Error
🌍 Your Environment
Angular Version:
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/promiserather thancommon/fetchby @JiaLiPassion :angular/zone.js@ac3851e#diff-c87353777ac53dcde41fac9008e56425R492-R496
now at:
angular/packages/zone.js/lib/common/promise.ts
Lines 510 to 514 in bf8ba89
For now in my project, I'm planning to copy this file and remove those lines.