无法匹配任何路线 [英] Cannot match any routes
问题描述
我的组件出现了，但在页面加载时我收到一条错误消息.看了一堆资源好像根本解决不了错误信息.
错误
例外:错误:未捕获(承诺):无法匹配任何路由.当前段:'index.html'.可用路由:['/login'].main.component.ts 在 index.html 中，一旦页面加载，它就会显示上述错误消息.
import { Component } from '@angular/core';从@angular/router"导入 { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS };从 './login/login.component' 导入 { LoginComponent };@成分({选择器:'主要组件'，模板:' <标题><h1>预算计算器</h1><a id='login' [routerLink]="['/login']">登录</a><路由器插座></路由器插座></标题>'指令:[ROUTER_DIRECIVES]，提供者:[ROUTER_PROVIDERS]})@路由([{路径:'/登录'，组件:登录组件}])导出类 MainComponent {}login.component.ts 是通过 main.component.ts 路由的，尽管有错误消息，但当我单击链接时确实会显示.现在我将它的样式设置为在 main.component 中的其他元素上弹出，但希望它成为页面上显示的唯一组件.如果可能的话，基本上用 login.component 替换 index.html 中的 main.component 而不是做一大堆样式来显示:none.
import { Component } from '@angular/core';@成分({选择器:'登录'，模板:' <div id="登录弹出窗口"><h6 class="header_title">登录</h6><div class="login-body">一些花哨的登录内容在这里'})导出类 LoginComponent {}
- 这可能是因为您的服务器需要针对 HTML5 pushState 进行配置，如Angular 2.0 路由器无法重新加载浏览器
还要确保在 标签的开头有一个 boostrap(...) 提供，如 Angular 2 路由器没有基本的 href 集
- 如果您没有
/的路线，您可能需要让应用程序导航到初始路线，如 Angular2 路由器(@angular/router)，如何设置默认路由?
提示:@angular/router 路由器也被弃用为 @angular/router-deprecated，新的路由器将再次发货:-/如果您要切换到 @angular/router，最好推迟到新的和希望最终的路由器可用.
My component shows up but i get an error message when the page is loaded. I can't seem to solve the error message at all after looking at a bunch of resources.
Error
EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].
main.component.ts is in index.html and as soon as the page loads it shows the above error message.
import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { LoginComponent } from './login/login.component';
@Component({
selector: 'main-component',
template:
' <header>
<h1>Budget Calculator</h1>
<a id='login' [routerLink]="['/login']">Login</a>
<router-outlet></router-outlet>
</header> '
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@Routes([
{path: '/login', component: LoginComponent}
])
export class MainComponent {}
login.component.ts is routed through the main.component.ts and does show when I click on the link despite the error message. Right now I have it styled to popup over the other elements in main.component but would like it to be the only component that shows on the page. Basically replace main.component in index.html with login.component if this possible instead of doing a whole bunch of styling to display: none.
import { Component } from '@angular/core';
@Component({
selector: 'login',
template:
' <div id="login-pop-up">
<h6 class="header_title">Login</h6>
<div class="login-body">
Some fancy login stuff goes here
</div>
</div> '
})
export class LoginComponent {}
- This might be because your server needs to be configured for HTML5 pushState like explained in Angular 2.0 router not working on reloading the browser
Also ensure you have a <base href="/"> tag at the beginning of the <head> tag or provided by boostrap(...) as explained in Angular 2 router no base href set
- If you don't have a route for
/you might need to make the app navigate to an initial route imperatively like explained in Angular2 router (@angular/router), how to set default route?
Hint: The @angular/router router also is deprecated as @angular/router-deprecated and a new router will be shipped again :-/ If you are about to switch to @angular/router it's probably better to postpone until the new and hopefully final router is available.
这篇关于无法匹配任何路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
