title: Why doesn't this route match when navigating to it directly?
body: <p>For the record: This is using the currently rather new <code>"@angular/router": "3.0.0-alpha.8"</code>, the route definitions are at the bottom of the post.</p>
  
  <p>When attempting to navigate in my application the behaviour is different depending on whether I enter the URL directly or following a link:</p>
  
  <ul>
  <li><strong>Works:</strong> Entering <code>http://localhost:9292</code> in the address-bar, correctly forwards to <code>http://localhost:9292/about</code></li>
  <li><strong>Works:</strong> Navigating directly to <code>http://localhost:9292/about</code> via the address-bar</li>
  <li><strong>Works:</strong> If I navigate to <code>http://localhost:9292/about/projects</code> via an <code>&lt;a&gt;</code> tag, in the context of the <code>FrontComponent</code> and the <code>[routerLink]="['projects']"</code> attribute, the routing works just fine.</li>
  <li><p><strong>Broken:</strong> Directly navigating to <code>http://localhost:9292/about/projects</code> results in the following error message (shortened Stacktrace):</p>
  
  <pre><code>Unhandled Promise rejection: Cannot match any routes: 'projects' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'projects'
  Stack trace:
  applyRedirects/&lt;@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
  </code></pre></li>
  </ul>
  
  <p>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?</p>
  
  <p><strong>Edit</strong> because this has been suggested numerous times now: I don't suspect this is a server-side issue. The previous routing via <code>router-deprecated</code> worked fine and the <code>HTML</code> served from the failing route looks just fine. But just in case, this is the relevant server side routing code (<code>ruby</code> with <code>sinatra</code>):</p>
  
  <pre class="lang-ruby prettyprint-override"><code># 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
  </code></pre>
  
  <p>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:      </p>
  
  <p><em>front/front.routes.ts</em>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>export const FrontRoutes : RouterConfig = [
      {
          path: '',
          redirectTo: '/about',
          terminal: true
      },
      {
          path : 'about',
          component: FrontComponent,
          children : [
              { path: 'projects', component: ProjectListComponent},
              { path: '',         component: AboutComponent},
          ]
      }
  ]
  </code></pre>
  
  <p><em>editor/editor.routes.ts</em>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>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 },
          ]
      }
  ]
  </code></pre>
  
  <p><em>app.routes.ts</em>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>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)
  ]
  </code></pre>