Uncaught (in promise) TypeError: this[h] is not a function

[idea-lei]

Description

model-viewer in Angular 8

the model will be loaded, but no operation possible. the error below in console:

model-viewer.min.js:510 Uncaught (in promise) TypeError: this[h] is not a function
at HTMLElement.value (model-viewer.min.js:510)
at HTMLElement.updated (model-viewer.min.js:893)
at HTMLElement.updated (model-viewer.min.js:893)
at HTMLElement.value (model-viewer.min.js:510)
at HTMLElement.updated (model-viewer.min.js:893)
at HTMLElement.performUpdate (model-viewer.min.js:81)
at HTMLElement._enqueueUpdate (model-viewer.min.js:81)

Live Demo

https://stackblitz.com/edit/angular-ivy-onjfwt?file=src/app/app.component.html

Version

• model-viewer: v1.3.0

Browser Affected

• Chrome (only tested with chrome)
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows (only tested with win)

[karol-depka]

I have the same error.

model-viewer.js:59368 Uncaught (in promise) TypeError: this[h] is not a function
    at HTMLElement.value (model-viewer.js:59368)
    at HTMLElement.updated (model-viewer.js:60605)
    at HTMLElement.updated (model-viewer.js:64282)
    at HTMLElement.value (model-viewer.js:59371)
    at HTMLElement.updated (model-viewer.js:64107)
    at HTMLElement.performUpdate (model-viewer.js:787)
    at HTMLElement._enqueueUpdate (model-viewer.js:721)
value @ model-viewer.js:59368
updated @ model-viewer.js:60605
updated @ model-viewer.js:64282
value @ model-viewer.js:59371
updated @ model-viewer.js:64107
performUpdate @ model-viewer.js:787
_enqueueUpdate @ model-viewer.js:721
async function (async)
_enqueueUpdate @ model-viewer.js:715
requestUpdateInternal @ model-viewer.js:687
requestUpdate @ model-viewer.js:704
[onResize] @ model-viewer.js:60443
[onResize] @ model-viewer.js:58351
[updateSize] @ model-viewer.js:58030
(anonymous) @ model-viewer.js:57800

[elalish]

See if anything in this thread helps: #969 (comment)

It seems like something in Angular is sensitive perhaps to the order of loading modules. It's a bit strange, but please post your workaround if you find one.

[karol-depka]

Hi.

@elalish - thank You.

How I solved it:

First, non-final, attempt (promising, but dead-end in my case) :

First I disabled zone.js in main.ts and polyfills.ts .
That fixed the model-viewer.js:59368 Uncaught (in promise) TypeError: this[h] is not a function (You can also use the non-minified version https://unpkg.com/@google/model-viewer/dist/model-viewer.js to see a better error).

But it broke Angular (v7) templates in any module other than AppModule. At first I thought it had to do with change detection. But even if I put smth like {{2+2}}, it would stop showing anything after this line. Which seems like a bug to me, or perhaps some deeper knowledge is required to fix this.

Final attempt that worked for me:

Then I decided to upgrade angular to v8, as per https://update.angular.io/ .
Everything works now, but zone.js is enabled.

My package.json:

{
  "name": "inno-topic-website",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prepare-icons": "npm --prefix ../svg-conversions start ../InnoTopicWebsite/src/assets/images/logos ../InnoTopicWebsite/src/assets/images/logos-c"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^7.3.6",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^7.3.6",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "angular2-fontawesome": "^5.2.1",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.11",
    "log4js": "^4.1.0",
    "rxjs": "~6.6.3",
    "rxjs-compat": "^6.4.0",
    "tslib": "^1.9.0",
    "winston": "^3.2.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.29",
    "@angular/cli": "~8.3.29",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.5.3"
  }
}

About order of loading modules - I did not explicitly change anything related to this, I think. Maybe the Angular upgrade changed something [internally].

I shall link to a specific version of model-viewer.js (or better yet, download it and put in my own hosting), to ensure a working setup.

I hope that helps.

[karol-depka]

In index.html:
(code is a bit dirty, after a lot of experiments)
(note model-viewer is not minified, for better debugging)

  <script type="module"
          src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
  </script>

</head>
<body>

  <model-viewer
    src="assets/3d/Scene5.glb"
    ios-src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.usdz?v=1569545377878"

    alt="A 3D model of an astronaut"
    style="height: 1000px; outline: none; opacity: 20%"
    camera-orbit="calc(-1.5rad + env(window-scroll-y) * 4rad) calc(0deg + env(window-scroll-y) * 180deg) calc(3m - env(window-scroll-y) * 1.5m)"
    camera-target="0m 0m 0m"
    disable-zoom
    disable-orbit
    data-js-focus-visible=""
  >
    <!-- https://github.com/google/model-viewer/issues/969 -->
  </model-viewer>

If anyone needs more details, feel free to contact me.

[karol-depka]

Zone.js is enabled (although I tried to get rid of it, but I've run into show-stopper problems) :

polyfills.ts:

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

main.ts:

import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(
    AppModule,
    // {
    //     ngZone: 'noop'
    // }
  )
  .catch(
    err =>
      console.error(err)
  );

[karol-depka]

As I suspect it might have something to do with exact versions of dependencies (e.g. zone.js), here is package-lock.json :
https://gist.github.com/karol-depka/48f40ad2d5287f8592239f33c274446f

    "zone.js": {
      "version": "0.9.1",
      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.9.1.tgz",
      "integrity": "sha512-GkPiJL8jifSrKReKaTZ5jkhrMEgXbXYC+IPo1iquBjayRa0q86w3Dipjn8b415jpitMExe9lV8iTsv8tk3DGag=="
    }

[karol-depka]

For posteriority: model-viewer url redirects to this specific version:

https://unpkg.com/@google/model-viewer@1.4.1/dist/model-viewer.js

[MattijnP]

Hello, I've been struggling with this error for a few days now.
Upgrading to the latest angular 8 had no effect.

One possible solution is like @karol-depka importing model-viewer in index.html:

<head>
    <!-- ... -->
    <script type="module"
            src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
    </script>
</head>

Or, if you'd rather use the NPM package instead of CDN you can import model-viewer before zone.js in polyfill.ts:

import '@google/model-viewer/dist/model-viewer.min'
import 'zone.js/dist/zone';  // Included with Angular CLI.

[sdbarrington]

As above, adding import model-viewer before zone.js in polyfill.ts: fixed it for me!

import '@google/model-viewer/dist/model-viewer.min'
import 'zone.js/dist/zone'; // Included with Angular CLI.