The error message "Error: Unable to access property '_router' when null in NativeScript"

Question

The error message "Error: Unable to access property '_router' when null in NativeScript"

Currently, I am developing an android application using a combination of NativeScript, AngularJS2, and TypeScript. To guide my development process, I have been following the documentation provided by NativeScript, which can be found at this link.

However, I have encountered an issue while trying to implement a redirect functionality after a successful user login that should direct them to a page called List. In order to resolve this, I followed the instructions outlined in the Routing section, available at this URL.

Despite diligently following the documentation, I am facing challenges with the implementation. Below are snippets of the relevant code:

app.component.ts

[Code snippet for app component]

user.service.ts

[Code snippet for user service]

login.component.ts

[Code snippet for login component]

Although most aspects of the application are functioning correctly, I am encountering an error when attempting to execute this._router.navigate(["List"]) from the file login.component.ts. The specific error message received is:

JS: EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property '_router' of null

At present, I am struggling to comprehend the root cause of this error.

Warm regards,

typescript angular2-routing nativescript

Answer 1

Answer №1

It seems like the issue might be related to problems with context scope. My suggestion is to first ensure that you capture the scope before delving into your subsequent actions. Typically, I save this information in a variable named that, as shown below (along with accompanying comments):

login() {

    var result = this._userService.login(this.user,this.config);
    var that = this; //saving the current context 
    result.then(
        function (result) { //context (this) has changed
            console.log("Login Successs");
            // The result object contains properties such as uid, provider, expiresAtUnixEpochSeconds, profileImageURL, and token
            var response = JSON.stringify(result);
            console.log('Login Response : '+response);

            // Redirect to the list page
            that._router.navigate(["List"]); //referring to _router from the original scope
        },
        function (errorMessage) {
            console.log("Login Error");
            console.log(errorMessage);
        }
    );
}

Answer 2

It seems like the issue might be related to problems with context scope. My suggestion is to first ensure that you capture the scope before delving into your subsequent actions. Typically, I save this information in a variable named that, as shown below (along with accompanying comments):

login() {

    var result = this._userService.login(this.user,this.config);
    var that = this; //saving the current context 
    result.then(
        function (result) { //context (this) has changed
            console.log("Login Successs");
            // The result object contains properties such as uid, provider, expiresAtUnixEpochSeconds, profileImageURL, and token
            var response = JSON.stringify(result);
            console.log('Login Response : '+response);

            // Redirect to the list page
            that._router.navigate(["List"]); //referring to _router from the original scope
        },
        function (errorMessage) {
            console.log("Login Error");
            console.log(errorMessage);
        }
    );
}

Answer 3

Answer №2

A method to dynamically bind this was suggested by George Edwards in an earlier response. Another approach is to utilize arrow functions, which maintain the scope of the caller within the function; eliminating the need to constantly write var that = this.

authenticate() {

    var result = this._userService.authenticate(this.user,this.config);
    result.then(
        // Using an arrow function ensures that 'this' refers to the lexical context instead of changing based on how the function is called.
        (result) => {
            console.log("Authentication Successful");
            // The result object includes properties such as uid, provider, expiresAtUnixEpochSeconds, profileImageURL, and token
            var response = JSON.stringify(result);
            console.log('Authentication Response : '+response);

            // Redirect to the list page
            this._router.navigate(["List"]); 
        },
        // Alternatively clearer
        (errorMessage) => {
            console.log("Authentication Error");
            console.log(errorMessage);
        }
    );
}

Answer 4

A method to dynamically bind this was suggested by George Edwards in an earlier response. Another approach is to utilize arrow functions, which maintain the scope of the caller within the function; eliminating the need to constantly write var that = this.

authenticate() {

    var result = this._userService.authenticate(this.user,this.config);
    result.then(
        // Using an arrow function ensures that 'this' refers to the lexical context instead of changing based on how the function is called.
        (result) => {
            console.log("Authentication Successful");
            // The result object includes properties such as uid, provider, expiresAtUnixEpochSeconds, profileImageURL, and token
            var response = JSON.stringify(result);
            console.log('Authentication Response : '+response);

            // Redirect to the list page
            this._router.navigate(["List"]); 
        },
        // Alternatively clearer
        (errorMessage) => {
            console.log("Authentication Error");
            console.log(errorMessage);
        }
    );
}

The error message "Error: Unable to access property '_router' when null in NativeScript"

Answer №1

Answer №2

Similar questions

Leveraging CustomPipe with ngModel in Angular 7 and beyond

Unable to change the directory for angular2/core - having issues with updating

I need help with querying the date format in Mongoose and MongoDB. The specific date I am trying to query is stored in the field "ticketTimeStartDate" and is in the format: "Mon Oct 18 2021 12:28:59 GMT+0000 (

Tips for identifying the load window in Ionic 2 RC3 Angular 2

Tips for retrieving a reactive variable from a setup() method?

Unable to successfully generate work item through VSO SDK

Retrieve the IDs of all children and grandchildren within a parent ID using Typescript

Is there a way for me to obtain the full error message after a failed fetch request?

What is the best way to initialize a value asynchronously for React context API in the latest version of NextJS, version

When attempting to open a form in edit mode, data binding fails to work across multiple form controls

How to Connect to Printer in Ionic 2

Leveraging CDK Context Variables in C# Lambda Initialization Code

Using Kendo's Angular Grid to link data sources

Using createStyles in TypeScript to align content with justifyContent

``Is it possible to iterate through a collection of objects using a loop?

New Entry failing to appear in table after new record is inserted in CRUD Angular application

What are the steps to send a Firebase cloud message using typescript?

Checking for duplicates in a TypeScript array of objects

Incorporating interactive buttons within Leaflet popups

Tips for Effectively Declaring a Variable with React's useState