个人中心
gpt4 book ai didi

javascript - 错误 : Invalid configuration of route '' . 必须提供以下之一 : component, redirectTo, children or loadChildren at validateNode

转载 作者：行者123 更新时间：2023-12-05 04:34:26 25 4
gpt4 key购买 nike

我正在尝试使用 Angular 路由设置项目。但是，该项目仅显示 index.html 的内容。甚至没有显示 app.component.html。在检查时，它只是显示 <app-root></app-root>在 body 标签中，而不是 app.component.html 的内容。编译没有错误。控制台报错:

错误:路由“”的配置无效。必须提供以下其中一项:component、redirectTo、children 或 loadChildren

index.html

<body >
      <app-root></app-root>
    
</body>

app.component.html

<nav class="navbar navbar-expand-md">
  <a class="navbar-brand logo" href="#">WeCare</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['user/profile']" *ngIf="uProfile"><i class="fa fa-user"></i>&nbsp;View Profile</a>
      </li>
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['user/appointments']" *ngIf="uProfile"><i class="fa fa-list"></i>&nbsp;My Appointments</a>
      </li>
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['coach/profile']" *ngIf="cProfile"><i class="fa fa-user"></i>&nbsp;View Profile</a>
      </li>
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['/coach/home']" *ngIf="cProfile"><i class="fa fa-list"></i>&nbsp;My Schedules</a>
      </li>
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['/home']"><i class="fa fa-phone"></i>&nbsp;Call Us : 080 2233447</a>
      </li>
      <li class="nav-item myitem" *ngIf="logout">
        <a class="nav-link mylink" (click)="logoutFn()" [routerLink]=""><i class="fa fa-sign-out" ></i>&nbsp;Logout</a>
      </li>
    </ul>
  </div>  
</nav>
<h1>welcome</h1>
<div class="container-fluid content">
  <router-outlet></router-outlet>
</div>

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from './login/login.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'App';
  logout = false;
  uProfile = false;
  cProfile = false;
  constructor(private router: Router, private loginservice: LoginService) {
    router.events.subscribe((val) => {
      this.logout = false;
      this.uProfile = false;
      this.cProfile = false;
      if (router.url === '/user/home' || router.url === '/user/profile' || router.url === '/user/appointments') {
        this.logout = true;
        this.uProfile = true;
        this.cProfile = false;
      } else if (router.url === '/coach/home' || router.url === '/coach/profile') {
        this.logout = true;
        this.uProfile = false;
        this.cProfile = true;
      } else {
        this.uProfile = false;
        this.logout = false;
        this.cProfile = false;
      }
    });
  }

  logoutFn() {
    this.router.navigate(['/home'])
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { LoginService } from './login/login.service';
import { SignupService } from './signup/signup.service';
import { UserModule } from './user/user.module';
import { CoachModule } from './coach/coach.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    SignupComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    UserModule,
    CoachModule
  ],
  providers: [
    LoginService,
    SignupService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login/:role', component: LoginComponent },
  { path: 'signup/:role', component: SignupComponent },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
  { path: 'coach', loadChildren:()=> import('./coach/coach.module').then(m=>m.CoachModule) },
  { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

coach-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


const coachRoutes: Routes = [

];
@NgModule({
    imports: [RouterModule.forChild(coachRoutes)],
    exports: [RouterModule]
})
export class CoachRoutingModule { }

我哪里出错导致了这个问题？

最佳答案

您必须在子模块的路由数组中添加一个路由，通常该路由使用 Route 的 component 属性指向某个组件

如下所示，

const routes: Routes = [{ 
 path: '', 
 component: SomeComponent
}];

关于javascript - 错误 : Invalid configuration of route '' . 必须提供以下之一 : component, redirectTo, children or loadChildren at validateNode，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71232496/

25 4 0
文章推荐： javascript - 为什么这个撤消逻辑在 p5.js 中不起作用？
文章推荐： c# - 使用内存映射文件 (IOException) 的进程间通信(C++ 到 C#)
文章推荐： javascript - 如何在 VSCode 和 WebStorm 中将 CSS/SCSS/PostCSS 写入 React .tsx 文件作为 JavaScript 字符串？
文章推荐： c# - Ocelot 无法匹配上游路径的路由配置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com