Why doesn't this route match when navigating to it directly?

Question

For the record: This is using the currently rather new "@angular/router": "3.0.0-alpha.8", the route definitions are at the bottom of the post.

When attempting to navigate in my application the behaviour is different depending on whether I enter the URL directly or following a link:

• Works: Entering http://localhost:9292 in the address-bar, correctly forwards to http://localhost:9292/about
• Works: Navigating directly to http://localhost:9292/about via the address-bar
• Works: If I navigate to http://localhost:9292/about/projects via an <a> tag, in the context of the FrontComponent and the [routerLink]="['projects']" attribute, the routing works just fine.

• Broken: Directly navigating to http://localhost:9292/about/projects results in the following error message (shortened Stacktrace):

  Unhandled Promise rejection: Cannot match any routes: 'projects' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'projects'
  Stack trace:
  applyRedirects/<@http://localhost:9292/node_modules/@angular/router/apply_redirects.js:29:34
  Observable.prototype.subscribe@http://localhost:9292/node_modules/rxjs/Observable.js:52:57
  

What could I possibly be doing wrong here? Is there possibly any way to see all routes that have been rejected in the error message?

Edit because this has been suggested numerous times now: I don't suspect this is a server-side issue. The previous routing via router-deprecated worked fine and the HTML served from the failing route looks just fine. But just in case, this is the relevant server side routing code (ruby with sinatra):

# By now I have too often mistakenly attempted to load other assets than
# HTML files from "user facing" URLs, mostly due to paths that should have
# been absolute but weren't. This route attempts to catch all these
# mistakes rather early, so that the show up as a nice 404 error in the
# browsers debugging tools
get /^\/(about|editor)\/.*\.(css|js)/ do
  halt 404, "There are no assets in `editor` or `about` routes"
end

# Matching the meaningful routes the client knows. This enables navigation
# even if the user submits a "deep link" to somewhere inside the
# application.
index_path = File.expand_path('index.html', settings.public_folder)
get '/', '/about/?*', '/editor/*' do
  send_file index_path
end

# Catchall for everything that goes wrong
get '/*' do
  halt 404, "Not found"
end

I do not suspect that this is due to wrong route definitions (the routing does work via the link), but for the sake of completeness these are the routes:

front/front.routes.ts:

export const FrontRoutes : RouterConfig = [
    {
        path: '',
        redirectTo: '/about',
        terminal: true
    },
    {
        path : 'about',
        component: FrontComponent,
        children : [
            { path: 'projects', component: ProjectListComponent},
            { path: '',         component: AboutComponent},
        ]
    }
]

editor/editor.routes.ts:

export const EditorRoutes : RouterConfig = [
    {
        path: "editor/:projectId",
        component : EditorComponent,
        children : [
            { path: '', redirectTo: 'settings', terminal: true},
            { path: 'settings', component : SettingsComponent },
            { path: 'schema', component : SchemaComponent },
            { path: 'query/create', component : QueryCreateComponent },
            { path: 'query/:queryId', component : QueryEditorComponent },
            { path: 'page/:pageId', component : PageEditorComponent },
        ]
    }
]

app.routes.ts:

import {EditorRoutes}                   from './editor/editor.routes'
import {FrontRoutes}                    from './front/front.routes'

export const routes : RouterConfig = [
    ...FrontRoutes,
    ...EditorRoutes,
]

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
]

Answer 1

Set "/" as value to the base tag of the index.html to make the router resolve child paths correctly. This is not in line with the offical docs but seems to work.