直接导航到这条路线时,为什么这条路线不匹配? [英] Why doesn't this route match when navigating to it directly?
问题描述
记录:这是使用当前相当新的"@angular/router": "3.0.0-alpha.8"
,路由定义位于帖子底部.
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.
尝试在我的应用程序中导航时,行为会有所不同,具体取决于我是直接输入 URL 还是按照链接输入:
When attempting to navigate in my application the behaviour is different depending on whether I enter the URL directly or following a link:
- 工作:在地址栏中输入
http://localhost:9292
,正确转发到http://localhost:9292/about代码>
- 有效:通过地址栏直接导航到
http://localhost:9292/about
- 有效:如果我通过
标签导航到
http://localhost:9292/about/projects
,在FrontComponent
和[routerLink]="['projects']"
属性的上下文,路由工作得很好. 损坏:直接导航到
http://localhost:9292/about/projects
会导致以下错误消息(缩短的 Stacktrace):
- 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?
编辑,因为这已经被多次建议:我不怀疑这是服务器端问题.之前通过 router-deprecated
的路由工作正常,从失败的路由提供的 HTML
看起来很好.但以防万一,这是相关的服务器端路由代码(ruby
和 sinatra
):
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)
]
推荐答案
将 "/"
设置为 index.html<的
base
标签的值/code> 使路由器正确解析子路径.这是不符合官方文档,但似乎有效.
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.
这篇关于直接导航到这条路线时,为什么这条路线不匹配?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!