Model-viewer: errors with angular 8

[anupamdas2012]

I am trying to use this component in an angular 8 project and getting the following error:

zone-evergreen.js:651 Unhandled Promise rejection: this[$updateEvaluator] is not a function ; Zone: ; Task: null ; Value: TypeError: this[$updateEvaluator] is not a function

i have set up the project to be able to use google web-components and I do see a 3d model in my viewport but it seems certain features are not working like being able to orbit the model(camera-controls). here is how im using the component:

styles.scss

.mdlview2
{
height: 700px;
width: 500px;
background-color: powderblue;
}

[anupamdas2012]

more info. Currently using @google/model-viewer": "^0.8.1"
polyfills.ts:

---

• Zone JS is required by default for Angular itself.
  */
  import 'zone.js/dist/zone'; // Included with Angular CLI.

angular.json

---

"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "{*/.js}",
"input": "./node_modules/@webcomponents/webcomponentsjs/",
"output": "./node_modules/@webcomponents/webcomponentsjs"
}
],

AppComponent.html

---

import '@google/model-viewer';

Package.json

---

"dependencies": {
......
.....

"@google/model-viewer": "^0.8.1",
}

[elalish]

@anupamdas2012 I don't believe zone-evergreen.js is part of our project, so I'm guessing that error is originating elsewhere. As for camera-controls not working, did you remember to put the camera-controls attribute in your element? It might be helpful if you include your html as well in your description.

[cdata]

@anupamdas2012 this sounds a little bit like it could be a Zone.js bug. Also, we don't do a lot of work with Angular ourselves. Perhaps you would be willing to make a minimal test case on Stackblitz or Glitch?

The error reads to me as though Zone.js has patched an internal detail of <model-viewer> (all our Symbol properties are considered private API) and then becomes upset when its expectations of that detail have changed. I would be able to tell you more if you can give us a live test case that I can poke around in.

[anupamdas2012]

@cdata thanks for your detailed response. It is infact an issue with zone.js and the polyfills functionality in Angular however I have not been able to work around this. I will post a glitch test case for you to take a peek at. ps: im sort of a noob to Angular myself, and the polyfills stuff is a bit confusing to me. so bear with me. Thanks!

[garysb]

I am also getting the exact same error posted above by @anupamdas2012 but am unable to replicate it on Stackblitz. Did you have any luck solving this @anupamdas2012 ?

[cdata]

This this perhaps a case of Stackblitz using a simplified Angular configuration?

[maciejze]

I have similiar problem. I need to load model viewer dynamically from component logic (unfortunately this the case and I have to do this way)

ngOnInit(): void {
    this.loadExternalScript()
      .then(() => {
        this.modelViewerHtml = `<model-viewer style="width: 300px; height: 300px"  src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb"
                          alt="A 3D model of an astronaut"
                          auto-rotate
                          camera-controls
                          background-color="#455A64">
      </model-viewer>`;
        this.isModelViewerVisible = true;
      })
      .catch(() => {});

  }

  loadExternalScript() {
    return new Promise(resolve => {
      const scriptElement = document.createElement('script');
      scriptElement.type = 'module';
      scriptElement.src = this.eclipseViewerUrl;
      scriptElement.onload = resolve;
      document.getElementsByTagName('head')[0].appendChild(scriptElement);
      console.log('1');
    });
  }

Then I try to show it

<ng-container *ngIf="isModelViewerVisible">
<div [innerHTML]="modelViewerHtml | sanitizeHtml"></div>
</ng-container>

Model viewer is rendered, but glitchy - only feet of astronaut are shown (rest is out of the picture) and I'm unable to use camera controls.

Alse there is an error twice

zone-evergreen.js:651 Unhandled Promise rejection: this[$updateEvaluator] is not a function ; Zone: <root> ; Task: null ; Value: TypeError: this[$updateEvaluator] is not a function

I'm using Angular 8.2

[cdata]

@maciejze thanks for the report. It seems plain that there is an issue related to Zone.js here.

As mentioned above, we probably won't be able to investigate this bug until someone can produce a minimal test case that we can run ourselves to debug. If you or someone else can provide us with a test case that demonstrates the issue (maybe even just a minimal Angular project in a throw-away git repo), I would be happy to investigate this issue more deeply.

[jalamprea]

I'm running the same problem and I'm not using that Zone file... I just have Angular 8.2.14 and trying to load model-viewer 1.0.0
The error only appear in the console of Firefox, but the issue is on all browsers... for instance, in Chrome there are no errors on console, but the model is not show :(
Check this temp site

[smalls]

Could you spin up a glitch (or stackblitz or even a little git repo) with a minimal repro for this? We need to be able to run & debug a project in order to dig into the issue.

[idea-lei]

i have created a stackblitz page related to this problem:
stackblitz
@cdata

and the related issue:

1728

[elalish]

@idea-lei Thank you for the stackblitz! I believe I found the problem, but stranger yet, I can only seem to repro the problem in stackblitz. When I start from a fresh local Angular project and add model-viewer the same way you did, everything works fine. Can anyone else confirm or deny that a local angular project works?

[idea-lei]

@elalish i've had the problem locally (and exactly the same way), but I accidentally fixed it and it works well now...
i still have no idea what was wrong, cuz there were no changes in git... :p