无法匹配任何路线 [英] Cannot match any routes
问题描述
我的组件出现了，但是在加载页面时出现错误消息.查看大量资源后，我似乎根本无法解决该错误消息.
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.
错误
EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].
main.component.ts在index.html中，并且在页面加载后立即显示以上错误消息.
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通过main.component.ts进行路由，尽管出现错误消息，但单击链接时它的确显示.现在，我将其样式设置为弹出main.component中的其他元素，但希望它是页面上显示的唯一组件.如果可能的话，基本上将index.html中的main.component替换为login.component，而不是进行大量样式显示:无.
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 {}
推荐答案
- 这可能是因为您的服务器需要配置为 HTML5 pushState ，如
- 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
- 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?
还要确保您在
<head>标记的开头或boostrap(...)提供的<base href="/">标记中，如Also ensure you have a
<base href="/">tag at the beginning of the<head>tag or provided byboostrap(...)as explained in Angular 2 router no base href set提示:
@angular/router路由器也已弃用为@angular/router-deprecated，并且新的路由器将再次发货:-/如果您要切换到@angular/router，最好推迟一下直到有新的路由器(希望是最终的路由器)问世为止.Hint: The
@angular/routerrouter also is deprecated as@angular/router-deprecatedand a new router will be shipped again :-/ If you are about to switch to@angular/routerit's probably better to postpone until the new and hopefully final router is available.这篇关于无法匹配任何路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
