CODEWITHSUNDEEP
angular2-routingnativescript
JBR
JBR

Reputation: 136

anguar2 nativescript error "TypeError: undefined is not an object (evaluating 'this.router')"

I am new to Angular2 Native script Programming... i need to navigate one page to another. i am stuck with the typeError:"undefined is not an object (evaluating 'this.router')" plz help me out.. my code is given..

//page1.ts

public constructor(private router: Router) { }
getMyDrawing(args) {
    let pad = this.DrawingPad.nativeElement;
    let img: Image = this.signImage.nativeElement;
    let drawingImage;
    pad.getDrawing().then
    (
        (data) => {
            console.log(data);
            drawingImage = data;
            img.src=data;
            this.router.navigate(['page2']);
        }

    );
}

//routing.ts

import { DrawingPadExample } from "./app.component";
import { Page2Component } from "./app.page2";

export const routes = [
  {   path: "drawing-pad-example", component: DrawingPadExample},
   {   path: "page2", component: Page2Component }
];

 export const navigatableComponents = [
 DrawingPadExample,
 Page2Component
 ];

//module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-
angular/nativescript.module";
import { DrawingPadExample } from "./app.component";
import { routes, navigatableComponents } from "./app.routing";
import { NativeScriptRouterModule } from "nativescript-
angular/router";
@NgModule({
    bootstrap: [
        DrawingPadExample
    ],
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes)
    ],
    declarations: [
        DrawingPadExample,
        ...navigatableComponents
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

Upvotes: 2

Views: 1507

Answers (4)

Darrow Hartman
Darrow Hartman

Reputation: 4383

I got this bug when I was passing a function between two components.

In the first component, I imported Router, but in the second I didn't. Make sure that you import all necessary libraries when you are using callback functions.

Upvotes: 0

jogboms
jogboms

Reputation: 612

When you say navigation is not working, do you nothing at all happens and no errors are generated?

I would advice you try putting the callback within a zoneCallback.

public constructor(private ngZone: NgZone, private router: Router){
}

public getMyDrawing(args) {
    let pad = this.DrawingPad.nativeElement;
    let img: Image = this.signImage.nativeElement;
    let drawingImage;

    pad.getDrawing().then((data) => {
        this.ngZone.run(() => { 
            console.log(data);
            drawingImage = data;
            img.src=data;
            this.router.navigate(['page2']);
        });
    });
}

Upvotes: 1

slesh
slesh

Reputation: 2007

@JBR, No, I mean dependency injection using constructor, for example,

constructor(private router: Router) {}

add that line to you page1 component.

Update

replace this 

function(data) {
        console.log(data);
        drawingImage = data;
        img.src=data;
        this.router.navigate(['page2']);
    }

with arrow function

(data) => {
        console.log(data);
        drawingImage = data;
        img.src=data;
        this.router.navigate(['page2']);
    }

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86730

Add instance in constructor for router.

constructor(private router : Router){}

because as error stated typeError:"undefined is not an object (evaluating 'this.router')" you are trying to access this.router which is not initilized yet

Upvotes: 0

Related Questions