window.Zone Already Defined by Other Library

[stevewithington]

I'm including an Angular application within an existing ASP.NET Web Forms application. My primary issue is that the dotnet WebFormsJS scripts have already defined window.Zone.

Loading the Angular application would obviously generate the error Uncaught Error: Zone already loaded.

At this point, the only way I've been able to get around this is to set window.Zone = null just before loading the Angular script files.

Is there a way to either change the scope of Zone or possibly rename it so that Angular can still use it?

[JiaLiPassion]

@stevewithington, which version are you using? the newest version (0.9.1) should work

[stevewithington]

@JiaLiPassion, after updating to 0.9.1 from 0.8.26 (as required by @angular/core@7.2.15), I'm still seeing this issue.

[JiaLiPassion]

Could you post a reproduce repo? thanks

[stevewithington]

@JiaLiPassion,

Sure thing: https://github.com/stevewithington/ng-dotnet-webforms

• Angular App
• package.json reflecting zone.js@0.9.1
• App running inside of dotnet
• dotnet bundles of Ng scripts & styles

Let me know if there's anything else I can do to help.

Thanks!

[JiaLiPassion]

@stevewithington, sorry for the late reply, because zone.js also register to the global object window.Zone, so if other library use the name of Zone already, this issue will occur.

And we have plan to make zone a scoped object, but it will take some time to develop, so for now, your walkaround (set window.Zone = null) is a reasonable solution. rename will not work, because angular will use Zone directly.

[stevewithington]

@JiaLiPassion, I realize this may fall more on the Angular side of things, however what if we could possibly pass in a custom zone object to ngZone? This could solve the issue by essentially allowing us to rename zone.js.

For example, Angular currently only allows for either zone.js or noop to be passed into ngZone. Would be great if we could do this:

// src/app/polyfills.ts
import * as myZone from 'zone.js/dist/zone';

// src/app/main.ts
platformBrowserDynamic()
    .bootstrapModule(AppModule, {
        ngZone: myZone
    });

Or, are you aware of a way to essentially do the same thing some other way? For example, set ngZone: 'noop' and then reset it somewhere else in the lifecycle?

I'm just concerned about potential side effects of setting window.Zone = null.

[JiaLiPassion]

@stevewithington, yeah, I know, make Zone a module instead of a global object will be better, but this will bring a lot of changes to the current ecosystem. So please wait for the developing scoped zone feature. Thanks!

[JiaLiPassion]

I will close this one for now because until we decide to make a scoped zone, this issue will not be able to be fixed.