Angular 获取错误无法匹配任何路由。URL段：“主页”

我收到如下错误消息：

错误：未捕获承诺：错误：无法匹配任何路由。URL段：“主页” 错误：无法匹配任何路由。URL段：“主页” 在ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError router.js:2469 在CatchSubscriber.selector router.js:2450 在CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error catchError.js:34 在MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.\u error Subscriber.js:80 在MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error Subscriber.js:60 在MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.\u error Subscriber.js:80 在MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error Subscriber.js:60 在MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.\u error Subscriber.js:80 在MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error Subscriber.js:60 在TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber.\u error tap.js:61 在resolvePromise zone.js:831 在resolvePromise zone.js:788 在zone.js:892 在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask zone.js:423 位于Object.onInvokeTask core.js:17290 在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask zone.js:422 在Zone.push../node_modules/Zone.js/dist/Zone.js.Zone.runTask Zone.js:195 在drainMicroTaskQueue区域。js:601

app.component.html

请注意我的导航栏的外观，主页选项卡仍被按下，我不在主页组件上。我如何解决此问题？我是否错误地设置了routes.ts？图片如下：

要将localhost:4200重定向到home，您可以在路由中进行以下配置：

导出常数批准：路由=[ { 路径：， 儿童：[ {path:，重定向到：'home'，路径匹配：'full'}， {path:'home'，component:HomeComponent}， ... ]

---

你能分享你的html代码吗？在你的html中做一个：[routerLink]=['home']，对于你的路由，做一个：{path:'home'，component:HomeComponent}，你能更具体地指定一点吗，我不知道放在哪里，替换成什么吗？让我试试看，如果它能正常工作，它能正常工作，但是如果它只是localhost:4200，home不是更合法吗？

<div id="container">
  <div class="my-custom-container" [style.margin-top.px]="routerOutput">
  <router-outlet></router-outlet>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav #navbar class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
    <div class="container">
    <a class="navbar-brand">Kumo Store</a>    

      <ul class="navbar-nav mr-auto">
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['']" mdbWavesEffect>Home</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['/log-in']" mdbWavesEffect>Login</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['/sign-up']" mdbWavesEffect>Register</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
            <a class="nav-link waves-light" [routerLink]="['/order']" mdbWavesEffect>Order</a>
          </li>
        <li class="nav-item" routerLinkActive="active">
            <a class="nav-link waves-light" [routerLink]="['/cart']" mdbWavesEffect>Cart</a>
          </li>
         <li class="nav-item" routerLinkActive="active" style="float:right" *ngIf="role == '2'" >
            <a class="nav-link waves-light" [routerLink]="['/store']" mdbWavesEffect>Store</a>
        </li>
        <li class="nav-item" routerLinkActive="active" style="float:right" *ngIf="role == '1'" >
          <a class="nav-link waves-light" [routerLink]="['/profile']" mdbWavesEffect>Profile</a>
      </li>
      </ul>
    </div>
  </nav>

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { LogInComponent } from './log-in/log-in.component';
import { ProductComponent } from './product/product.component';
import { CartComponent } from './cart/cart.component';
import { OrderComponent } from './order/order.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { LogoutComponent } from './logout/logout.component';
import { AdminComponent } from './admin/admin.component';
import { AdminLoginComponent } from './admin-login/admin-login.component';
import { StoreComponent } from './store/store.component';
import { ProfileComponent } from './profile/profile.component';
import { AddCartComponent } from './add-cart/add-cart.component';
import { EditCartComponent } from './edit-cart/edit-cart.component';
import { FinanceChartComponent } from './finance-chart/finance-chart.component';

export const appRoutes: Routes = [
  {
    path: '', 
    children: [
      { path: '', component: HomeComponent},
      { path: 'sign-up', component: SignUpComponent},
      { path: 'log-in', component: LogInComponent},
      { path: 'order', component: OrderComponent},
      { path: 'cart', component: CartComponent},
      { path: 'product', component: ProductComponent},
      { path: 'admin', component: AdminComponent},
      { path: 'checkout', component: CheckoutComponent},
      { path: 'logout', component: LogoutComponent},
      { path: 'profile', component: ProfileComponent},
      { path: 'store', component: StoreComponent},
      { path: 'admin/login', component: AdminLoginComponent},
      { path: 'add-cart', component: AddCartComponent },
      { path: 'edit-cart', component: EditCartComponent },
      { path: 'finance-chart', component: FinanceChartComponent }
    ]
  },
  { path: '', redirectTo: '', pathMatch: 'full'},
]; 



//export class AppRoutingModule { }