Firefox Add-on TypeError: "fetch" is read-only

[saiumesh-apty]

I've developed Extension using Angular 4 which works well on Chrome but not on firefox, result in TypeError: "fetch" is read-only

The stack of error as follows

var global = module.exports = typeof window != 'undefined' && window.Math == Math
  ? window : typeof self != 'undefined' && self.Math == Math ? self
  // eslint-disable-next-line no-new-func
  : Function('return this')();

function zoneify(fn) {
        return function () {
            var resultPromise = fn.apply(this, arguments);
            if (resultPromise instanceof ZoneAwarePromise) {
                return resultPromise;
            }
            var ctor = resultPromise.constructor;
            if (!ctor[symbolThenPatched]) {
                patchThen(ctor);
            }
            return resultPromise;
        };
    }
    if (NativePromise) {
        patchThen(NativePromise);
        var fetch_1 = global['fetch'];
        if (typeof fetch_1 == 'function') {
            global['fetch'] = zoneify(fetch_1); // **error line**
        }
    }

[JiaLiPassion]

@saiumesh-letznav, in firefox extension environment, a lot of window global object can't be monkey patched, so you can disable the errored one, in this case, you can add this line before import zone.js.

(window as any).__Zone_disable_fetch = true;

[saiumesh-apty]

Thanks for response @JiaLiPassion . unfortunately it didn't work. I still get same error **TypeError: "fetch" is read-only polyfills.bundle.js:8719:31 **

polyfills.browser.ts as follows

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es7/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
(window as any).__Zone_disable_fetch = true;
// import 'zone.js'; // tried both of these imports
import 'zone.js/dist/zone';

[JiaLiPassion]

@saiumesh-letznav, yeah, the fetch is still not a module in 0.8.26, currently, you have to wait for the next version of zone.js and try this flag until then.

[saiumesh-apty]

@JiaLiPassion I did try with your flag. still I get the same error.

[SerkanSipahi]

@JiaLiPassion will this issue really fixed in the next version of zone.js and when will you deploy the next version? :)

[SerkanSipahi]

@JiaLiPassion why patching on developer console of firefox is working without any error (fetch is read-only)?

window.fetch = function() {console.log('xxx')}
fetch(); // logs: xxx

[JiaLiPassion]

@SerkanSipahi, console is different with Extension, extension is like a limited environment, a lot of behaviors are not allowed there.

[SerkanSipahi]

@JiaLiPassion Thank you for the quick answer. Do you have plan when will this issue (the fetch is still not a module) fill be fixed?

[SerkanSipahi]

@JiaLiPassion i wonder how will that work in Firefox (extension) without patching it? As i know the core idea of zone.js is to patch all async function/class (setInterval, fetch, promise)! The only way to do that is, to provide the native async functions/classes over modules which acts as proxy e.g. something like this:

import { setInterval, fetch, Promise } from 'zone.js'

I think we need two kind of zone.js packages. The default behavior is patch one and the other is module based where the function/classes (setInterval, etc) acts as proxy!

Maybe im wrong, i dont know!

[SerkanSipahi]

Update: i found a way to run the angular 6 app in firefox extension but that is a really really bad solution. The error "fetch is read-only" appears only in "strict mode". What i have done? Well, i removed from compiled pollyfills.js the "strict mode" function headers.

Now i get some different error which comes from AsyncAction (RxJs). In that function rxjs try to call clearInterval but it seems to be undefined. I guess for some reasons the patch which was applied from zone.js is lost in that place.

ERROR TypeError: "'clearInterval' called on an object that does not implement interface Window."
Error: macroTask 'setInterval': can not transition to 'running', expecting state 'scheduled', was 'unknown'.

[SerkanSipahi]

@saiumesh-letznav @JiaLiPassion now i have found a cleaner way to run the angular app in firefox without any errors. It has one downside but this ok! You have to trigger the rendering engine detectChanges() or tick() by your self.

in main.ts pass {ngZone: 'noop'} to bootstrapModule:

platformBrowserDynamic()
  .bootstrapModule(AppModule, {ngZone: 'noop'})

then remove from pollyfills:

import 'zone.js/dist/zone';  // Included with Angular CLI.

and in the app.module.ts (angular app) which will bootstrap by main.ts override the Testability class:

import { Testability } from '@angular/core';
  ...
  ...
  providers: [
    ...
    { provide: Testability, useValue: {} }
    ...
  ],
  ...
  ...

but finally add this to your karma.conf.js:

...
files: [
   {pattern: 'path/to/your/node_modules/zone.js/dist/zone.js'},
],
...

The question now is: what is the purpose of Testability? (will check that)

[saiumesh-apty]

Hello There, with new version of Angular this issue will be resolved. Thanks!!

[SerkanSipahi]

really? :) which new version? v7.x or v8?

[saiumesh-apty]

Yes. with Angular 7.1.0