Skip to content

Nativescript with Angular - Http call gives error - 'JS: ReferenceError: URL is not defined' #9998

@najmabegum

Description

@najmabegum

Issue Description

I have a NativeScript with angular project. The backend is a rest api written in .NET CORE. I'm trying to make a HTTP call fom the nativescript frontend using angular following the post method as described in the link: https://v6.docs.nativescript.org/angular/ng-framework-modules/http#http-post

Whenever I make a call, I get error 'JS: ReferenceError: URL is not defined'

Reproduction

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptHttpClientModule } from "@nativescript/angular";
import { NativeScriptModule } from '@nativescript/angular'
import { NativeScriptCommonModule } from "@nativescript/angular";
import { NativeScriptRouterModule } from "@nativescript/angular";
import { NativeScriptFormsModule } from "@nativescript/angular";
import { AppRoutingModule } from './app-routing.module'

@NgModule({
bootstrap: [AppComponent],
imports: [
NativeScriptModule,
NativeScriptHttpClientModule,
NativeScriptCommonModule,
NativeScriptRouterModule,
NativeScriptFormsModule,
AppRoutingModule,
],
declarations: [AppComponent],
providers: [],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

authservice.ts :

import { Injectable } from '@angular/core';
import { RouterExtensions } from "@nativescript/angular";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { CommonCodeService } from "./common-code-service";
import { LoginRequestDTO, LoginResponseDTO} from "../data-models/login-model";

@Injectable({
providedIn: 'root'
})
export class AuthenticationService {

loginModelData: LoginRequestDTO = {
Username:"",
Password:""
}

loginResponseData: LoginResponseDTO = {
isLoginSuccess:false,
responseMessage:"",
userId:"",
token:"",
firstname:""
};

isLoginValid: boolean = false;

constructor(
private router: RouterExtensions,
private http: HttpClient,
private commonCodeService: CommonCodeService) { }

private createRequestOptions() {
let headers = new HttpHeaders({
"Content-Type": "application/json"
});
return headers;
}

login(username: string, password:string){
  this.loginModelData.Username=username;
  this.loginModelData.Password=password;
  let apiURL = "http://10.0.2.2:4001/api/Login/Login";  //Since api runs on localhost, i use 10.0.2.2 from android emulator to invoke localhost
  let options = this.createRequestOptions();
  this.http.post(apiURL, {this.loginModelData}, {headers: options} )
  .subscribe(res => {
    const result = <LoginResponseDTO>res;
    if(result!=null)
    {
      this.loginResponseData = <LoginResponseDTO>result;
      if(this.loginResponseData.isLoginSuccess)
      {
        this.isLoginValid=true;
        this.router.navigate(["home"], { clearHistory: true });
      }
      else
      {
        this.isLoginValid=false;
      }
    }
    else
    {
      this.commonCodeService.alert('User data not found. Please try again');
    }
  },
  (e) => {
    console.log(e);
  });
}

}

Relevant log output (if applicable)

JS: ReferenceError: URL is not defined

Environment

pacjage.json

{
"name": "ns-myapp",
"main": "./src/main.ts",
"version": "1.0.0",
"private": true,
"dependencies": {
"@angular/animations": "~13.2.0",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"@auth0/angular-jwt": "^5.0.2",
"@nativescript/angular": "^14.0.4",
"@nativescript/core": "~8.2.0",
"@nativescript/theme": "~3.0.2",
"crypto-js": "^3.3.0",
"nativescript-audio": "^6.2.6",
"nativescript-gif": "^5.0.0",
"nativescript-ui-gauge": "^8.0.1",
"nativescript-vibrate": "^4.0.1",
"nativescript-videoplayer": "^5.0.1",
"rxjs": "~7.5.0",
"zone.js": "~0.11.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.2.0",
"@angular/compiler-cli": "~13.2.0",
"@nativescript/android": "8.2.3",
"@nativescript/types": "~8.2.0",
"@nativescript/webpack": "~5.0.6",
"@ngtools/webpack": "~13.2.0",
"typescript": "~4.5.5"
}
}

tsconfig.json

{
"compilerOptions": {
"module": "esnext",
"target": "es2017",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"importHelpers":true,
"noEmitOnError": true,
"skipLibCheck": true,
"lib": ["es2017", "dom"],
"baseUrl": ".",
"paths": {
"~/": ["src/"],
"@/": ["src/"]
}
},
"include": ["src/tests//*.ts", "src//.ios.ts", "src/**/.android.ts"],
"files": ["./src/main.ts", "./references.d.ts", "./src/polyfills.ts"],
"exclude": ["node_modules", "platforms", "e2e"]
}

Please accept these terms

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug-pending-triageReported bug, pending triage to confirm.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions