为什么直接导航到该路线时不匹配? [英] 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
• 工作:如果我通过<a>标记导航到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 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?

编辑，因为现在已经多次建议这样做:我不怀疑这是服务器端的问题.以前通过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标记的值，以使路由器正确解析子路径.这与官方文档不符，但似乎可以正常工作.

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屋！