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 tohttp://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 theFrontComponent
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)
]