Why does this route not coincide with navigating to it directly?

Question

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

When I try to navigate in my application, the behavior is different depending on whether I enter the URL directly or via a link:

• Works: Enter http://localhost:9292 in the address bar, correctly go to http://localhost:9292/about
• Works: Navigation directly to http://localhost:9292/about via the address bar
• Works:. If I go to http://localhost:9292/about/projects using the <a> tag, in the context of the FrontComponent attribute and [routerLink]="['projects']" , the routing will work fine.

• Broken: Direct navigation to http://localhost:9292/about/projects leads to the following error message (abbreviated 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 can I do wrong here? Is there a way to view all routes that were rejected in the error message?

Change , because it has been suggested many times now: I do not suspect that this is a server-side problem. Previous routing through router-deprecated worked fine, and the HTML served along the route looked just fine. But just in case, this is the appropriate 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 incorrect route definitions (routing works by reference), but for completeness, these are 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 the value of the base index.html tag so that the router correctly resolves child paths. This is not consistent with official docs , but seems to work.