Search code examples
angularangular4-router

ERROR TypeError: Cannot read property 'startsWith' of null in angular4


I have got below error when I am login into my angular4 application. In my application, I am using local storage concept for sessions. When we are logging into my app it will checking local storage is null or not if its null its going one route other wise it will be going default route, Can any one could you please suggest me, Thank you advance for answering.

Error:

 core.js:1448 ERROR TypeError: Cannot read property 'startsWith' of null
        at UrlParser.peekStartsWith (router.js:1553)
        at UrlParser.consumeOptional (router.js:1563)
        at UrlParser.parseRootSegment (router.js:1357)
        at DefaultUrlSerializer.parse (router.js:1204)
        at Router.parseUrl (router.js:5214)
        at Router.navigateByUrl (router.js:5113)
        at SafeSubscriber.eval [as _next] (login.component.ts:130)
        at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
        at SafeSubscriber.next (Subscriber.js:187)
        at Subscriber._next (Subscriber.js:128)
    defaultErrorLogger @ core.js:1448
    ErrorHandler.handleError @ core.js:1509
    next @ core.js:5493
    schedulerFn @ core.js:4327
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:240
    SafeSubscriber.next @ Subscriber.js:187
    Subscriber._next @ Subscriber.js:128
    Subscriber.next @ Subscriber.js:92
    Subject.next @ Subject.js:56
    EventEmitter.emit @ core.js:4307
    (anonymous) @ core.js:4767
    ZoneDelegate.invoke @ zone.js:388
    Zone.run @ zone.js:138
    NgZone.runOutsideAngular @ core.js:4693
    onHandleError @ core.js:4767
    ZoneDelegate.handleError @ zone.js:392
    Zone.runTask @ zone.js:191
    ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1517
    globalZoneAwareCallback @ zone.js:1543
    error (async)
    customScheduleGlobal @ zone.js:1643
    ZoneDelegate.scheduleTask @ zone.js:407
    onScheduleTask @ zone.js:297
    ZoneDelegate.scheduleTask @ zone.js:401
    Zone.scheduleTask @ zone.js:232
    Zone.scheduleEventTask @ zone.js:258
    (anonymous) @ zone.js:1808
    (anonymous) @ http.js:1639
    Observable._trySubscribe @ Observable.js:172
    Observable.subscribe @ Observable.js:160
    MapOperator.call @ map.js:57
    Observable.subscribe @ Observable.js:157
    LoginComponent.login @ login.component.ts:107
    (anonymous) @ LoginComponent.html:96
    handleEvent @ core.js:13542
    callWithDebugContext @ core.js:15051
    debugHandleEvent @ core.js:14638
    dispatchEvent @ core.js:9957
    (anonymous) @ core.js:10582
    (anonymous) @ platform-browser.js:2628
    ZoneDelegate.invokeTask @ zone.js:421
    onInvokeTask @ core.js:4736
    ZoneDelegate.invokeTask @ zone.js:420
    Zone.runTask @ zone.js:188
    ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1517
    globalZoneAwareCallback @ zone.js:1543

Solution

  • Finally I got the solution, As I mentioned previous I am using local storage for maintaining sessions and all, So in that I wrote below condition for checking local storage is null or not but its not working so its going to the true condition when local storage is null. That time its directly assigning null to the route so we are getting this error like above, Then I replaced with the perfect condition I mentioned below it's working fine. Thank you.

    Wrong Condition:

    if(localStorage.getItem("userRoute") !== null || localStorage.getItem("userRoute") !== "" ){
          const route = localStorage.getItem("userRoute");
          this.router.navigateByUrl(route);
          localStorage.removeItem("userRoute");
        } else {
          this.router.navigateByUrl('/home/DashBoard');
        }
    

    Perfect Condition:

     if(localStorage.getItem("userRoute") === null || localStorage.getItem("userRoute") === ""){
           this.router.navigateByUrl('/home/DashBoard');
        } else {
          const route = localStorage.getItem("userRoute");
          this.router.navigateByUrl(route);
        }