Unable to load/render Angular 11 Version app in Webview2

[vikrampatil115]

Hi,

We are trying to access the angular web application in webview 2. It is a Webex app internally using webview 2 to render an angular application. The angular app loads successfully for the first time but or reload it ends up on a blank page and I see the following error in the console.

   Uncaught TypeError: Cannot define property iterateEntries, object is not extensible
at Object.defineProperty [as f] (<anonymous>)
at t.exports (polyfills.3b53b434302d0d603af6.js:1)
at t.exports (polyfills.3b53b434302d0d603af6.js:1)
at I+eb.t.exports (polyfills.3b53b434302d0d603af6.js:1)
at Object.zowp (polyfills.3b53b434302d0d603af6.js:1)
at f (runtime.e59c6b7b8880cde1b6f9.js:1)
at Object.nK6O (polyfills.3b53b434302d0d603af6.js:1)
at f (runtime.e59c6b7b8880cde1b6f9.js:1)
at Object./r59 (polyfills.3b53b434302d0d603af6.js:1)
at f (runtime.e59c6b7b8880cde1b6f9.js:1)

t.exports @ polyfills.3b53b434302d0d603af6.js:1
t.exports @ polyfills.3b53b434302d0d603af6.js:1
I+eb.t.exports @ polyfills.3b53b434302d0d603af6.js:1
zowp @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
nK6O @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
/r59 @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
499b @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
/d/1 @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
khwf @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
RDjF @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
r4fA @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
hN/g @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
5 @ polyfills.3b53b434302d0d603af6.js:1
f @ runtime.e59c6b7b8880cde1b6f9.js:1
r @ runtime.e59c6b7b8880cde1b6f9.js:1
a @ runtime.e59c6b7b8880cde1b6f9.js:1
(anonymous) @ polyfills.3b53b434302d0d603af6.js:1

   Error: In this configuration Angular requires Zone.js
at new e (main.e8949703f710a656da9e.js:1)
at e.value (main.e8949703f710a656da9e.js:1)
at main.e8949703f710a656da9e.js:1

Note: Same angular app works absolutely fine in all browsers including the latest version of Microsoft Edge.

We need immediate assistance on this issue as it is blocking one of the major releases.

Angular version: ^11.0.4
Typescript: 4.0.5
Windows 10
Microsoft Edge Webview2 Runtime: 96.0.1054.62

Please let me know if any other details are required.

[RickStrahl]

Just FYI....

Not sure about your error - but I have several Angular 11 (and now 13) apps that run in a WebView locally and it works with no issues.

[vikrampatil115]

@RickStrahl Thank you for your response. Okay cool.

With further investigation, we found that importing core-js in polyfills.ts caused this error in my app. We imported core-js due to dependencies in my app.

Appreciate it if you share more details about how we can run an angular app locally in Webview. The angular app and Webview run on the same machine. This really helps me to debug further and triage the issue.

[RickStrahl]

Frankly I'm not doing antything special - I just run the app as I normally would and it works. It works both online or using a local Web Server (I'm using my LiveReloadServer typically, but the Angular Server should work too).

How are you running the app? Accessing a remote server, or the local Angular:4200 server? Running from disk (that won't work)?

[vikrampatil115]

Frankly I'm not doing antything special - I just run the app as I normally would and it works. It works both online or using a local Web Server (I'm using my LiveReloadServer typically, but the Angular Server should work too).

How are you running the app? Accessing a remote server, or the local Angular:4200 server? Running from disk (that won't work)?

In local using Angular:4200. I am just looking for how to load the local angular app in the Webview2 application.

[fdzatdtv]

Just FYI....

Not sure about your error - but I have several Angular 11 (and now 13) apps that run in a WebView locally and it works with no issues.

@RickStrahl could you please tell me whether the generated index.html from Angular contains <script type="text/javacript"> or <script type="module"> ?

We have an Angular 8 application and the generated index.html contains <script type="module">. With that it doesn't work in WebView2. But if we change index.html manually to have <script type="text/javacript">, then it works.

What is going on?

[jaredperreault-okta]

Any update on this? I am seeing this same error Uncaught TypeError: Cannot define property iterateEntries, object is not extensible from a jQuery/Backbone application with polyfills via [email protected]

[jaredperreault-okta]

Digging into this a little deeper, I was able to point this WebView2 Sample at my app running on localhost and I noticed the following line. It freezes the Object prototype. When the polyfill for interateEntries is applied (which is included in my app as well as angular apps, assuming standard build tooling), it tries to extend the Object prototype, which is now frozen and cannot be extended. I'm not sure why this line is included in a sample, however removing this line caused my app to render as expected in the WebView2 Sample.