RouteLink annotation throws an exception

[robwormald]

From @ElsewhereGames on June 20, 2016 16:11

Tried to switch from the deprecated router to alpha 7 of this one, but I am not able to use routeLinks in on my child routes. I have a list of routes like this:

<a [routerLink]="['inputs']">Inputs</a>
<a [routerLink]="['outputs']">Test</a>

When I first open the page with these links, none of them appear to be clickable (in other words, no hand cursor on mouse-over). When I do click any of the links, the console shows an error:

Uncaught EXCEPTION: Error in ./NavigationLinkComponent class NavigationLinkComponent - inline template:0:0
ORIGINAL EXCEPTION: TypeError: Cannot read property 'length' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'length' of undefined
    at UrlParser.parseSegmentChildren (http://127.0.0.1:8181/scripts/vendors.js:76681:28)
    at UrlParser.parseRootSegment (http://127.0.0.1:8181/scripts/vendors.js:76677:56)
    at DefaultUrlSerializer.parse (http://127.0.0.1:8181/scripts/vendors.js:76554:42)
    at Router.navigateByUrl (http://127.0.0.1:8181/scripts/vendors.js:75894:47)
    at RouterLink.onClick (http://127.0.0.1:8181/scripts/vendors.js:75718:22)
    at DebugAppView._View_NavigationLinkComponent0._handle_click_0_0 (NavigationLinkComponent.template.js:67:36)
    at http://127.0.0.1:8181/scripts/vendors.js:41217:25
    at http://127.0.0.1:8181/scripts/vendors.js:66297:37
    at http://127.0.0.1:8181/scripts/vendors.js:67190:112
    at ZoneDelegate.invoke (http://127.0.0.1:8181/scripts/vendors.js:19012:30)

My source maps point me to this line:

if (this.remaining.length == 0) {
  return {};
}

I looked around for a demo project or starting plunker, but I was not able to find one yet (the documentation uses alpha 3). Any help is appreciated!

Copied from original issue: angular/vladivostok#91

[robwormald]

From @zoechi on June 20, 2016 16:12

Can you please provide a Plunker?

[robwormald]

From @ElsewhereGames on June 20, 2016 16:17

I looked around for a demo project or starting plunker, but I was not able to find one yet (the documentation uses alpha 3).

[robwormald]

From @zoechi on June 20, 2016 16:19

http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview Just change alpha.6 to alpha.7

[robwormald]

From @brandonroberts on June 20, 2016 16:56

The documentation including the plunker will be updated to alpha 7 soon. There is already a PR in for the changes here: https://github.com/angular/angular.io/pull/1691

[robwormald]

From @ElsewhereGames on June 20, 2016 17:0

I can get it to work with Angular2 RC1. Perhaps it is related to the RC2 release, but the CDN does not appear to have RC2 packages yet. I will just rely on the deprecated router for now.

[robwormald]

From @ElsewhereGames on June 20, 2016 19:1

Updated the plunker to Angular RC2 and it still works. Perhaps there is a difference due to the use of webpack, not sure.

As best as I can tell, undefined is passed as the url argument on line 14 of url_serializer.js. Where would I look to investigate this further?

[robwormald]

This issue was moved to angular/angular#9498

[ElsewhereGames]

Update: When I remove most of the code from my app, I basically end up with the following:

• A routerLink outside of a <router-outlet> works fine.
• A routerLink inside of a <router-outlet> doesn't seem to get processed.

What I mean by this is that the link in the outlet does not the ng-reflect-router-link or ng-reflect-href attributes assigned.

I still am not able to reproduce this behavior with a plunkr.

[ElsewhereGames]

So, the issue I describe in my previous comment only occurs when I include the angular 2 shims in my project?

[zacharyclaysmith]

@robwormald I'm also getting a very similar error when trying to use routeLink. Not sure of the current status of this issue. Here's the error as output in the browser:

ORIGINAL EXCEPTION: TypeError: Cannot read property 'startsWith' of undefined ORIGINAL STACKTRACE: TypeError: Cannot read property 'startsWith' of undefined at UrlParser.parseRootSegment (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1743:2), <anonymous>:303:27) at DefaultUrlSerializer.parse (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1743:2), <anonymous>:200:30) at Router.navigateByUrl (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1545:2), <anonymous>:243:46) at RouterLinkWithHref.onClick (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1539:2), <anonymous>:89:21) at DebugAppView._View_LeftNavComponent0._handle_click_10_0 (LeftNavComponent.template.js:504:45) at eval (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:674:2), <anonymous>:375:24) at eval (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1333:2), <anonymous>:254:36) at eval (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1345:2), <anonymous>:27:111) at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2671:2), <anonymous>:323:29) at Object.onInvoke (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:500:2), <anonymous>:53:41)

I'm using webpack, and get this for any/all routeLinks used within templates that are nested within a parent <router-outlet>. Let me know what other info you need. For now, I'm doing a work-around using click events and manual routing.

I just did a quick test, and this tag "works" on a root level template: <a [routerLink]="['/hello']">hello</a>

but breaks with the above error on child templates (i.e. templates rendered within a router-outlet component).

*Snippet of current Angular dependencies from package.json: "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", "@angular/forms": "^0.2.0", "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-beta.2", "@angular/upgrade": "2.0.0-rc.4",

[r14c]

@zacharyclaysmith I'm seeing the same error:

browser_adapter.ts:82 TypeError: Cannot read property 'startsWith' of undefined
    at UrlParser.parseRootSegment (url_tree.ts:301)
    at DefaultUrlSerializer.parse (url_tree.ts:196)
    at Router.navigateByUrl (router.ts:242)
    at RouterLinkWithHref.onClick (router_link.ts:87)
    at DebugAppView._View_GetStartedComponent0._handle_click_68_0 (GetStartedComponent.template.js:335)
    at view.ts:406
    at dom_renderer.ts:274
    at dom_events.ts:20
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.ts:72)

{
  "@angular/common": "2.0.0-rc.4",
  "@angular/compiler": "2.0.0-rc.4",
  "@angular/core": "2.0.0-rc.4",
  "@angular/forms": "^0.2.0",
  "@angular/http": "2.0.0-rc.4",
  "@angular/platform-browser": "2.0.0-rc.4",
  "@angular/platform-browser-dynamic": "2.0.0-rc.4",
  "@angular/router": "3.0.0-beta.2",
  "@angular/upgrade": "2.0.0-rc.4"
}

---

Some investigation:

// @angular/router/src/directives/router_link.ts

export class RouterLinkWithHref implements OnChanges {
  /* ... */
  urlTree: UrlTree;
  /* ... */
  ngOnChanges(changes: {}): any { this.updateTargetUrlAndHref(); }
  onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean {
    if (button !== 0 || ctrlKey || metaKey) {
      return true;
    }

    if (typeof this.target === 'string' && this.target != '_self') {
      return true;
    }

    this.router.navigateByUrl(this.urlTree); // this.urlTree = undefined
    return false;
  }
}

// @angular/router/src/router.ts
class Router {
  /* ... */
  navigateByUrl(url: string|UrlTree): Promise<boolean> { // url = undefined
    if (url instanceof UrlTree) {
      return this.scheduleNavigation(url, false);
    } else {
      const urlTree = this.urlSerializer.parse(url);
      return this.scheduleNavigation(urlTree, false);
    }
  }
  /* ... */
}

RouterLinkWithHref updates its urlTree property when ngOnChanges() fires, but that isn't happening before onClick() fires so we end up being unable to schedule navigation properly.

[brandonroberts]

@tokyo-jesus are you providing the routerLink array dynamically?

[r14c]

No, my links are variations of:

<a [routerLink]="['/dashboard']" role="button" class="btn btn-primary btn-lg">
  Dashboard
</a>

[brandonroberts]

@tokyo-jesus Will you reproduce this in a plunker?

[r14c]

Looks like my problem is elsewhere, this plunker is a stripped down reproduction of my app and it works fine. I'll have to see what is interrupting the change detection process.

[zacharyclaysmith]

@tokyo-jesus are you using webpack?

[r14c]

Yes

[zacharyclaysmith]

I think that's the commonality between you, me, and @ElsewhereGames

[r14c]

@zacharyclaysmith Where is zone.js in your load order?

[nasreddineskandrani]

I am using 2.0.0-rc.4

anything new about this guys? i got the same error yesterday night when using browser back button. My <a> inside <router-outlet> loose all href tag when i comeback to a page with the browser back button. The error shows if i try to navigate with this <a>links after the back action.

cause: ROUTER_DIRECTIVES has a problem with browser back button.

solution: (just find another way to use router) I had to inject router and handle the routing in a click (i changed my <a> to <span>) as in app/heroes/hero-list.component.ts under this plunker: http://plnkr.co/edit/OpSVApr9snxKZh61BzR6?p=preview

[ElsewhereGames]

Here is my working load order:

1. webcomponentsjs (for Polymer)
2. core-js shims (shim.min)
3. reflect-metada
4. rxjs
5. zone.js (/dist/zone)
6. angular libraries

[tiboprea]

I am having the same issue with the <a> tag not working inside the <router-outlet> in 2.0.0-rc.3 version. Do you have any updates on this issue?

<a [routerLink]="['/contact']">

[geangu]

use 2.0.0-rc.4

2016-08-07 12:38 GMT-05:00 tiboprea notifications@github.com:

I am having the same issue with the tag not working inside the

in 2.0.0-rc.3 version. Do you have any updates on this issue? This is my syntax: — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/9499#issuecomment-238096356, or mute the thread https://github.com/notifications/unsubscribe-auth/ADmgeIT82yDlR0DQcVpLWyTvN68GUpFEks5qdhgogaJpZM4I8Hsg .

---

Gerardo Andres Gutierrez RodriguezTecnólogo en Sistematización de Datos UDFJC Ingeniero en Telemática UDFJC

The issue has been fixed in master.

[artuska]

I have startsWith type errors in iOS 8.4.1 in Safari 8.0

vendor.js:

message: "undefined is not a function (evaluating 'this.remaining.startsWith(t)')"

polyfills.js

message: "Uncaught (in promise): TypeError: undefined is not a function (evaluating 'this.remaining.startsWith(t)'…"

Not sure it is related to the router though.

[Delagen]

@artuska https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith Support of String.prototype.startsWith started in Safari 9. So you simply need some sort of polyfill RTM: https://angular.io/guide/browser-support#polyfill-libs

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}