Cannot read property 'call' of undefined

[kriefsacha]

Hi, i opened the ticket in nativescript-angular but i assume it should be here because it happened after i upgraded from nativescript 6 to 8.1.5. Thank you.

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):

There is my package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "^12.2.5",
    "@angular/common": "^12.2.5",
    "@angular/compiler": "^12.2.5",
    "@angular/core": "^12.2.5",
    "@angular/forms": "^12.2.5",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "^12.2.5",
    "@angular/platform-browser-dynamic": "^12.2.5",
    "@angular/router": "^12.2.5",
    "@nativescript/angular": "^12.2.0",
    "@nativescript/background-http": "~5.0.0",
    "@nativescript/camera": "~5.0.0",
    "@nativescript/core": "~8.1.1",
    "@nativescript/datetimepicker": "^2.1.9",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/geolocation": "~8.0.0",
    "@nativescript/imagepicker": "~1.0.0",
    "@nativescript/theme": "^3.0.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nstudio/nativescript-camera-plus": "^4.1.0",
    "@nstudio/nativescript-loading-indicator": "~4.0.0",
    "@nstudio/nativescript-pulltorefresh": "~3.0.0",
    "@nstudio/nativescript-snackbar": "~2.0.0",
    "nativescript-angular": "^10.0.0",
    "nativescript-imagecropper": "~4.0.0",
    "nativescript-nfc": "~5.0.0",
    "nativescript-permissions": "^1.3.8",
    "nativescript-sound-kak": "^1.2.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-chart": "~9.0.0",
    "nativescript-ui-sidedrawer": "~10.0.0",
    "nativescript-webview-interface": "^1.4.2",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~7.3.0",
    "tns-platform-declarations": "^6.5.15",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^12.2.5",
    "@nativescript/android": "8.1.1",
    "@nativescript/schematics": "~0.5.0",
    "@nativescript/types": "~8.1.0",
    "@nativescript/webpack": "~5.0.0",
    "@ngtools/webpack": "^12.2.5",
    "@types/jasmine": "^3.5.11",
    "typescript": "~4.3.5"
  },
  "readme": "NativeScript Application",
  "main": "./src/main.ts"
}

Angular CLI: 13.1.2
Node: 16.13.1

Describe the bug
I upgraded from nativescript 6 to 8.1.5, and since then, every http call that i do give me the following error:

TypeError: Cannot read property 'call' of undefined

From what i found on the internet it may be related to webpack but i don't know. (references :
https://stackoverflow.com/questions/41549923/angular-cannot-read-property-call-of-undefined-when-bootstrapping
webpack/webpack#959 )

To Reproduce
Upgrade a project from nativescript 6 to 8.1.5 and make an http call.

Expected behavior
HTTP calls to work

Additional context
main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import Theme from "@nativescript/theme";
import { runNativeScriptAngularApp, platformNativeScript } from '@nativescript/angular';

import { AppModule } from "./app/app.module";
import 'zone.js';
runNativeScriptAngularApp({
    appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
  });

Theme.setMode(Theme.Light);

webpack.config.js

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
	webpack.init(env);

	// Learn how to customize:
	// https://docs.nativescript.org/webpack

	return webpack.resolveConfig();
};

tnsconfig.tns.json

{
    "extends": "./tsconfig",
    "compilerOptions": {
        "module": "esNext",
        "moduleResolution": "node"
    }
}

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule, NativeScriptHttpClientModule, NativeScriptFormsModule, ModalDialogService, NativeScriptRouterModule, NativeScriptCommonModule } from "@nativescript/angular";
import { HttpClient, HttpHeaders } from "@angular/common/http";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NfcService } from "./services/nfc/nfc.service";
import { Auth0Service } from "./services/auth0/auth0.service";
import { LoginComponent } from './login/login.component';

import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { HomeComponent } from './home/home.component';
import { ScanComponent } from './scan/scan.component';
import { ParentsViewComponent } from './parents-view/parents-view.component';
import { SupportComponent } from './support/support.component';
import { ConvertService } from "./services/convert/convert.service";
import { DisableOnTapDirective } from "./disableOnTap-directive/disable-on-tap.directive";
import { PictureService } from "./services/picture/picture.service";


import { SettingsComponent } from './settings/settings.component';
import { SettingsIconComponent } from './settings-icon/settings-icon.component';
import { ScanQuestionsService } from "./services/ScanQuestionsService/ScanQuestions.service";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { EnterExitHistoryComponent } from "./enter-exit-history/enter-exit-history.component";
import { NativeScriptDateTimePickerModule  } from "@nativescript/datetimepicker/angular";
import { SchoolService } from "./services/school/school.service";
import { CreateEditAccessComponent } from "./create-edit-access/create-edit-access.component";
import { StatisticsComponent } from "./statistics/statistics.component";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { StatisticsDetailsViewComponent } from "./statistics-details-view/statistics-details-view.component";
import { DocumentViewComponent } from "./document-view/document-view.component";
import { AddDocumentComponent } from "./add-document/add-document.component";
import { EnterExitPictureComponent } from "./enter-exit-picture/enter-exit-picture.component";
import { CustomCameraComponent } from "./custom-camera/custom-camera.component";
import { SearchProfilModalComponent } from "./search-profil-modal/search-profil-modal.component";
import { SearchIconComponent } from "./search-icon/search-icon.component";
import { VolumeComponent } from "./volume/volume.component";
import { SnackbarService } from "./services/snackbar/snackbar.service";


@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptRouterModule,
        NativeScriptHttpClientModule,
        NativeScriptFormsModule,
        NativeScriptUISideDrawerModule,
        NativeScriptCommonModule,
        NativeScriptDateTimePickerModule,
        NativeScriptUIChartModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        ForgotPasswordComponent,
        HomeComponent,
        ScanComponent,
        ParentsViewComponent,
        SupportComponent,
        DisableOnTapDirective,
        SettingsComponent,
        SettingsIconComponent,
        EnterExitHistoryComponent,
        CreateEditAccessComponent,
        StatisticsComponent,
        StatisticsDetailsViewComponent,
        DocumentViewComponent,
        AddDocumentComponent,
        EnterExitPictureComponent,
        CustomCameraComponent,
        SearchProfilModalComponent,
        SearchIconComponent,
        VolumeComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ],
    providers: [
        NfcService,
        Auth0Service,
        ConvertService,
        PictureService,
        ModalDialogService,
        ScanQuestionsService,
        SchoolService,
        SnackbarService
    ],
    entryComponents: [ParentsViewComponent,StatisticsDetailsViewComponent,EnterExitPictureComponent,CustomCameraComponent,SearchProfilModalComponent]
})
export class AppModule { }

[edusperoni]

You should probably remove old dependencies:

nativescript-angular
@angular/http
reflect-metadata
rxjs
tns-platform-declarations // replace it with @nativescript/types in your devDependencies

Also, make sure your src/polyfills.ts looks like this:

/**
 * NativeScript Polyfills
 */

// Install @nativescript/core polyfills (XHR, setTimeout, requestAnimationFrame)
import '@nativescript/core/globals';
// Install @nativescript/angular specific polyfills
import '@nativescript/angular/polyfills';

/**
 * Zone.js and patches
 */
// Add pre-zone.js patches needed for the NativeScript platform
import '@nativescript/zone-js/dist/pre-zone-polyfills';

// Zone JS is required by default for Angular itself
import 'zone.js';

// Add NativeScript specific Zone JS patches
import '@nativescript/zone-js';

You could get more details about the error by using a custom error handler and logging console.log(error?.stack || error)

https://angular.io/api/core/ErrorHandler#example (do this in your app module)

I can say with confidence that http requests are working as we have plenty of migrated production apps with angular 12+.

[kriefsacha]

@edusperoni thank you sooo much for your fast answer.

I'm quite new so i just have two questions.

About the polyfills i just realized i don't have such a file, i just create it myself ?

And just about the tns-platform-declarations, i saw you changed this into one line but when i tried i had an issue and i had to change it to:

/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android-24.d.ts" />

to make it work

Again, thank you very much

[kriefsacha]

Okay you made it work @edusperoni , i removed all the dependencies beside the tns-platform-declarations and added the pollyfils and it worked. Thank you soooo much !