Unable to use lazy loading for wildcard route

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Add a wildcard route for handling 404’s as described in documentation - https://angular.io/docs/ts/latest/guide/router.html. It works. Change the PageNotFoundComponent to be lazy loaded (exactly as any other lazy loaded component - which are working in same application) and instead of navigation you get an error on an unmatched route:

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: segment.hasChildren is not a function
TypeError: segment.hasChildren is not a function
    at serializeSegment (http://localhost:4200/main.bundle.js:8576:17)
    at serializeSegment (http://localhost:4200/main.bundle.js:8578:13)
    at DefaultUrlSerializer.serialize (http://localhost:4200/main.bundle.js:8565:29)
    at Router.serializeUrl (http://localhost:4200/main.bundle.js:14731:80)
    at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:14827:231)
    at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:11011:27)
    at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:11001:18)
    at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:2737:18)
    at CatchSubscriber.Subscriber._next (http://localhost:4200/main.bundle.js:2773:26)
    at CatchSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:2737:18)

Making no changes other then changing the route path from ‘**’ to ‘foo’ and navigating to ‘foo’, the component lazy loads as expected, so it only the wildcard path that’s causing the issue.

Expected behavior

Page should navigate to the correct lazy loaded component.

Minimal reproduction of the problem with instructions

Simple to reproduce. See https://github.com/slubowsky/wildcard-lazy-load-issue. Didn’t even have to add a separate component. Just reused one lazy loaded component. On start up, the lazy loaded component shows as the default route. Click “Foo”. Instead of loading same exact lazy component for the wildcard route you get an error as described above.

What is the motivation / use case for changing the behavior?

Want to keep app as small as possible. Don’t expect any 404’s but want the component available to be lazy loaded just in case

Please tell us about your environment:

Windows 10, Visual Studio Code, Node 7.0.0, Angular-cli 1.0.0-beta.20-4 ng serve

• Angular version: 2.0.X

2.2.1, router 3.2.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Only tried in Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript 2.0.10

• Node (for AoT issues): node --version =

[slubowsky]

@felipedrumond I didn’t. Doesn’t break anything for me to make it eagerly loaded for now, and will be simple for me to switch to lazy whenever this bug is fixed, just change component back to loadChildren and remove the import

[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.}