Error: Cannot match any routes. URL Segment: ''

smartmouse picture smartmouse · Oct 19, 2016 · Viewed 30.6k times · Source

I'm trying to reproduce my problem with Angular2 router but i cannot create a working copy of my project in Plunker.

Here is my try: https://plnkr.co/edit/1lpoYP4qlBZLuqZHW7Ft

I used the following line of code in the index.html file to make the routes paths working with the run environment of Plunker and with my '' default paths.

<script>document.write('<base href="' + document.location + '" />');</script>

Why i'm stilling get this error?

Answer

Philipp Kief picture Philipp Kief · Oct 19, 2016
  1. You have a small typo in your plnkr:

    loadChildren: 'app/fist-section.module#FirstSectionModule' }

    might be first ;)

  2. There's still another problem: Even childrens need an empty ''-path. So instead of writing

children: [ { path: 'first-section', loadChildren: 'app/first-section.module#FirstSectionModule' } ] you should add an empty path and redirect to the first-section-path like this:

children: [
    { path: '', redirectTo: 'first-section'},
    { path: 'first-section', loadChildren: 'app/fist-section.module#FirstSectionModule' }
]

Here is the corrected plnkr:

https://plnkr.co/edit/9fMwx0?p=preview


Update Angular 2.4.1:

I noticed that with the latest version of angular (2.4.1) it is not necessary any more to use an empty path for the children routes.

I updated the plunker with the latest angular 2.4.1 version: PLUNKER. The sample is running without an empty path right now.