angular – 为什么这条路线在直接导航时不匹配?

前端之家收集整理的这篇文章主要介绍了angular – 为什么这条路线在直接导航时不匹配?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于记录:这是使用当前相当新的“@ angular / router”:“3.0.0-alpha.8”,路由定义位于帖子的底部.

尝试在我的应用程序中导航时,行为会有所不同,具体取决于我是直接输入URL还是跟随链接

> Works:在地址栏中输入http:// localhost:9292,正确转发到http:// localhost:9292 / about
> Works:通过地址栏直接导航到http:// localhost:9292 / about
> Works:如果我通过< a>导航到http:// localhost:9292 / about / projects tag,在FrontComponent和[routerLink] =“[‘projects’]”属性的上下文中,路由工作正常.
> Broken:直接导航到http:// localhost:9292 / about / projects会导致以下错误消息(缩短Stacktrace):

@H_301_8@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

我可能在这里做错了什么?有可能有任何方法可以查看错误消息中已拒绝的所有路由吗?

编辑,因为现在已多次建议:我不怀疑这是服务器端问题.以前通过路由器弃用的路由工作正常,从失败路由提供的HTML看起来很好.但为了以防万一,这是相关的服务器端路由代码(与sinatra的ruby):

@H_301_8@# 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

我不怀疑这是由于错误的路由定义(路由确实通过链接工作),但为了完整起见,这些是路由:

前/ front.routes.ts:

@H_301_8@export const FrontRoutes : RouterConfig = [ { path: '',redirectTo: '/about',terminal: true },{ path : 'about',component: FrontComponent,children : [ { path: 'projects',component: ProjectListComponent},{ path: '',component: AboutComponent},] } ]

编辑/ editor.routes.ts:

@H_301_8@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:

@H_301_8@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的基本标记的值,以使路由器正确解析子路径.这是 not in line with the offical docs但似乎有效.

猜你在找的Angularjs相关文章