Nativescript: [Angular 10] Cannot call a class constructor without |new|

[alexgritton]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.8.0
• Cross-platform modules:7.0.0-rc.50
• Android Runtime:6.5.3
• iOS Runtime:6.5.2
• Plugin(s): @Nativescript/firebase 11.0.0-rc.0

Describe the bug
When attempting to update to Angular 10 I get this error from the @Nativescript/firebase plugin.

JavaScript error:
file: node_modules/@nativescript/core/data/observable/index.js:17:4: JS ERROR TypeError: Cannot call a class constructor without |new|
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: Cannot call a class constructor without |new|
at
s(file: node_modules/@nativescript/core/data/observable/index.js:17:4)
at t(file: node_modules/nativescript-shared-notification-delegate/shared-notification-delegate.common.js:7:47)
at t(file: node_modules/nativescript-shared-notification-delegate/shared-notification-delegate.ios.js:23:32)
at ../node_modules/nativescript-shared-notification-delegate/shared-notification-delegate.js(file: node_modules/nativescript-shared-notification-delegate/shared-notification-delegate.ios.js:181:19)
at k(file: src/webpack/bootstrap:753:26)
at r(file: src/webpack/bootstrap:120:31)
at ../node_modules/@nativescript/firebase/messaging/messaging.js(file: node_modules/@nativescript/firebase/messaging/messaging.ios.js:4:58)
at k(file: src/webpack/bootstrap:753:26)
at r(file: src/webpack/bootstrap:120:31)
at ../node_modules/@nativescript/firebase/firebase.js(file: node_modules/@nativescript/firebase/firebase.ios.js:8:32)

[farfromrefug]

The firebase plugin needs to be updated for 7.0

[alexgritton]

So should I wait to upgrade to Angular 10 until the firebase plugin has been updated?

[NathanWalker]

@alexgritton its already updated. Just use @nativescript/firebase “rc”

And use as follows:

import { firebase } from @nativescript/firebase

[NathanWalker]

You are using rc.0 - latest is rc.5 but if using just “rc” in your package is best as will grab latest rc always- just clean/rebuild

[alexgritton]

@NathanWalker That worked for firebase, however, now it's failing on nativescript-local-notifications with the same error. Is there a workaround for plugins that haven't been updated, or do we have to wait for the plugins to be updated before we can fully update to Angular 10?

[NathanWalker]

We want to avoid something like ngcc which was an approach angular team took with similar things and given we’ve already updated a large number of plugins already we’d rather just finish updating any remaining. Can you drop your package.json here and we’ll update local notifications and any others there.

[alexgritton]

Here is my package.json. Note this is web and nativescript. I haven't finished updating the dependencies for the web yet as I was trying to get nativescript working first.

{
  "scripts": {
    "android": "tns run android",
    "ios": "tns run ios",
    "mobile": "tns run",
    "preview": "tns preview",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "clean": "npx rimraf hooks node_modules package-lock.json platforms",
    "ngcc": "ngcc --properties es2015 module main --first-only",
    "postinstall": "npm run ngcc"
  },
  "private": true,
  "dependencies": {
    "@alexgritton/nativescript-audio": "^1.0.0",
    "@alexgritton/nativescript-exoplayer": "^1.0.0",
    "@alexgritton/nativescript-facebook": "^1.0.1",
    "@angular/animations": "~10.0.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~10.0.0",
    "@angular/compiler": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/material": "^8.2.3",
    "@angular/material-moment-adapter": "^10.0.2",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@aspnet/signalr": "^1.1.4",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-pro": "^5.13.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/pro-duotone-svg-icons": "^5.13.0",
    "@fortawesome/pro-light-svg-icons": "^5.13.0",
    "@fortawesome/pro-regular-svg-icons": "^5.13.0",
    "@nativescript/angular": "rc",
    "@nativescript/core": "rc",
    "@nativescript/firebase": "rc",
    "@nativescript/schematics": "^0.7.3",
    "@nativescript/theme": "~2.3.0",
    "@nstudio/nativescript-cardview": "^1.0.0",
    "@proplugins/nativescript-azure-notification-hubs": "^2.1.0",
    "@proplugins/nativescript-imagecropper": "^3.0.0",
    "@proplugins/nativescript-platform-css": "file:../../nativescript-platform-css/src",
    "@proplugins/nativescript-purchase": "^4.0.1",
    "@proplugins/nativescript-themes": "^2.2.1",
    "hammerjs": "^2.0.8",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "nativescript": "^6.7.8",
    "nativescript-email": "^1.6.0",
    "nativescript-imagepicker": "^7.1.0",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-local-notifications": "^4.2.1",
    "nativescript-pulltorefresh": "^2.3.0",
    "nativescript-signalr-core": "^1.0.13",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-vibrate": "^3.0.0",
    "nativescript-videoplayer": "^4.2.1",
    "nativescript-websockets": "^1.5.5",
    "ngx-image-cropper": "^3.1.9",
    "reflect-metadata": "~0.1.12",
    "rx-player": "^3.20.1",
    "rxjs": "^6.5.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.9",
    "@angular/cli": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@nativescript/types": "rc",
    "@nativescript/webpack": "rc",
    "@ngtools/webpack": "~10.0.0",
    "@angular/language-service": "~8.2.9",
    "@nativescript/schematics": "~0.7.0",
    "@nativescript/tslint-rules": "~0.0.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.9.0"
  },
  "nativescript": {
    "id": "com.basixfitness.basixfitness",
    "tns-android": {
      "version": "6.5.3"
    },
    "tns-ios": {
      "version": "6.5.2"
    }
  }
}

[NathanWalker]

Excellent thanks @alexgritton - I'll post back here as some in your list are updated starting with a few that were just updated now and scoped as well as some already updated (same usage on these, just update your package to use these and update your imports to use them):

@nativescript/local-notifications: "~5.0.0",
@nstudio/nativescript-cardview: "~2.0.0",
@nativescript/email: "~2.0.0",
@nativescript/imagepicker: "~1.0.0",
@nativescript/iqkeyboardmanager: "~2.0.0",
@nstudio/nativescript-pulltorefresh: "~3.0.0",

"nativescript-signalr-core": "file:nativescript-signalr-core-2.0.0.tgz" -- There was a pr that was merged last week here and just awaiting an update publish from the author but you can download a tgz pack of the changes needed here:
https://drive.google.com/file/d/11dbrKGCDLplFpKBWurvShsBTqwHBPmBs/view?usp=sharing

After updating all those and just updating your imports to use those lemme know how things are looking for ya to see what's left 👍

[alexgritton]

@NathanWalker I'll test these new ones right now and let you know. Thanks for the hard work, you guys are killing it!

[alexgritton]

@NathanWalker So far so good on the recently updated plugins. I'm getting the error on nativescript-vibrate now though.

[NathanWalker]

Ok good to know - I’ll handle vibrate tomorrow - you may comment that one out to see if you encounter any others and feel free to drop here and I’ll check tomorrow.

[alexgritton]

@NathanWalker After commenting out vibrate it runs on my phone, but with a lot of issues.

• I get an error for Cannot call a class constructor without |new| from exoplayer.
• I had to wrap my page-router-outlet in my app.component.tns.html file with a GridLayout, otherwise I was getting an error.
• Almost all screens have layouts out of order
• (tap) events on buttons aren't firing, but (tap) events on labels are working.
• [(ngModel)] on TextFields isn't updating the model.
• hint on TextView is editable like it's the text.
• css with var(--main-color) on modals is not working

If I bypass the login screen I get this error coming from the bottom-navigation

UPDATE:
If I wrap all page-router-outlets in my bottom-navigation-component.ts file with GridLayout then this error goes away.

*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: null is not an object (evaluating 'item.content.ios')
at
getViewController(file: node_modules/@nativescript/core/ui/bottom-navigation/index.ios.js:443:0)
at file: node_modules/@nativescript/core/ui/bottom-navigation/index.ios.js:472:0
at forEach([native code])
at setViewControllers(file: node_modules/@nativescript/core/ui/bottom-navigation/index.ios.js:471:0)
at file: node_modules/@nativescript/core/ui/bottom-navigation/index.ios.js:646:0
at applyAllNativeSetters(file: node_modules/@nativescript/core/ui/core/properties/index.js:1078:0)
at initNativeView(file: node_modules/@nativescript/core/ui/core/properties/index.js:1021:0)
at onResumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:694:22)
at _resumeNativeUpdates(file: node_modules/@nativescript/core/ui/core/view-base/index.js:258:0)
at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:213:0)
at onLoaded(file: node_modules/@nativescript/core/ui/bottom-navigation/index.ios.js:255:0)
at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:290:0)
at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:296:0)
at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:436:0)
at file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0
at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0)
at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0)
at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:214:0)
at callFunctionW<\M-b\M^@\M-&>
NativeScript caught signal 6.
Native Stack:
1   0x10546f018 sig_handler(int)
2   0x19f79d404 <redacted>
3   0x19f7a0948 pthread_kill
4   0x19f72fba4 abort
5   0x19f853f60 <redacted>
6   0x19f84592c <redacted>
7   0x19f7aefa8 <redacted>
8   0x19f85340c <redacted>
9   0x19f855ecc __cxa_get_exception_ptr
10  0x19f855e84 <redacted>
11  0x19f7aedf0 <redacted>
12  0x105426820 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
13  0x105460434 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
14  0x105fcb388 ffi_closure_SYSV_inner
15  0x105fcc1b4 .Ldo_closure
16  0x1a3559b7c <redacted>
17  0x1a355a22c <redacted>
18  0x1a34c3cf8 <redacted>
19  0x1a34c492c <redacted>
20  0x1a34c5c1c <redacted>
21  0x1a34a8900 <redacted>
22  0x1a40932bc <redacted>
23  0x1a66e4978 <redacted>
24  0x1a66e4db8 <redacted>
25  0x1a66f721c <redacted>
26  0x1a663be10 <redacted>
27  0x1a66668c4 <redacted>
28  0x1a3bd9770 <redacted>
29  0x19fa14b30 <redacted>
30  0x19fa142a0 <redacted>
31  0x19fa0f210 <redacted>
JS Stack:
UIApplicationMain([native code])
at run(file: node_modules/@nativescript/core/application/index.ios.js:331:0)
at bootstrapNativeScriptApp(file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:733:19)
at bootstrapApp(file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:624:0)
at bootstrapModule(file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:605:0)
at file:///app/bundle.js:15596:136
at ./main.tns.ts(file:///app/bundle.js:15601:34)
at __webpack_require__(file: src/webpack/bootstrap:753:0)
at checkDeferredModules(file: src/webpack/bootstrap:43:0)
at webpackJsonpCallback(file: src/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation
at
at asyncFunctionResume
at
at promiseReactionJob

[NathanWalker]

@alexgritton possible to invite NathanWalker username as contributor and I'd be happy to have a look. Working on updating vibrate and few others today and if I can submit a PR to your project can probably address the others.

[alexgritton]

@NathanWalker let me see if I can get a repository setup for the NS piece to invite you to.

[alexgritton]

@NathanWalker I've invited you to the repository. Check the readme for details on how to run it. Thanks again for your help.

[NathanWalker]

Excellent @alexgritton thanks! will do - It may be early next week before I have a PR posted given wife and I's 4 year anniversary tomorrow but will check it out and let ya know.

[alexgritton]

@NathanWalker no rush, I'm just starting the process. Congrats on 4 years! My wife and I just hit that last week.

[NathanWalker]

@alexgritton is there a temporary way i can get around this with the project? perhaps can push up some .tgz packs of those?

npm ERR! code E401
npm ERR! Unable to authenticate, need: Basic realm="GitHub Package Registry"

[alexgritton]

@NathanWalker Ahh I forgot about the proplugins. I'll try and put them in there right now.

[alexgritton]

@NathanWalker I just committed those packages.

[fubaydullaev]

Hello !
I've recently updated to nativescript-angular: 11.0.0. The same issue appears for some plugins:
nativescript-image-cache-it: v6.0.0
nativescript-downloader: v2.1.5

What's the problem actually, can you please recommend how to solve it ?