我正在尝试使用角度路由设置一个项目。然而，该项目只显示index.html的内容。甚至app.component.html也没有显示。在检查时，它只是显示正文标记中的<app-root></app-root>，而不是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> 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> 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> 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> My Schedules</a>
</li>
<li class="nav-item myitem">
<a class="nav-link mylink disable" [routerLink]="['/home']"><i class="fa fa-phone"></i> 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> Logout</a>
</li>
</ul>
</div>
</nav>
<h1>welcome</h1>
<div class="container-fluid content">
<router-outlet></router-outlet>
</div>
应用程序组件.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'])
}
}
应用程序模块.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 { }
应用程序路由模块.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 { }
长途汽车路由模块.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
}];
在user-routing.module.ts和coach-routing.module.ts中添加空路径。const routes: Routes = [{ path: '', component: homeComponent }];