admin管理员组

文章数量:1310283

I am trying to setup a project using angular routing. However, the project is displaying only the contents of index.html. Even the appponent.html is not being displayed. On inspecting, it just shows <app-root></app-root> in the body tag instead of the content of appponent.html. The pilation is error free. There is an error in the console:

error: Invalid configuration of route ''. One of the following must be provided: ponent, redirectTo, children or loadChildren

index.html

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

appponent.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>wele</h1>
<div class="container-fluid content">
  <router-outlet></router-outlet>
</div>

appponent.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.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/mon/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './appponent';
import { HomeComponent } from './home/homeponent';
import { LoginComponent } from './login/loginponent';
import { SignupComponent } from './signup/signupponent';
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/homeponent';
import { LoginComponent } from './login/loginponent';
import { SignupComponent } from './signup/signupponent';

const routes: Routes = [
  { path: 'home', ponent: HomeComponent },
  { path: 'login/:role', ponent: LoginComponent },
  { path: 'signup/:role', ponent: 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 { }

Where am I going wrong which is causing this issue ?

I am trying to setup a project using angular routing. However, the project is displaying only the contents of index.html. Even the app.ponent.html is not being displayed. On inspecting, it just shows <app-root></app-root> in the body tag instead of the content of app.ponent.html. The pilation is error free. There is an error in the console:

error: Invalid configuration of route ''. One of the following must be provided: ponent, redirectTo, children or loadChildren

index.html

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

app.ponent.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>wele</h1>
<div class="container-fluid content">
  <router-outlet></router-outlet>
</div>

app.ponent.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.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/mon/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.ponent';
import { HomeComponent } from './home/home.ponent';
import { LoginComponent } from './login/login.ponent';
import { SignupComponent } from './signup/signup.ponent';
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.ponent';
import { LoginComponent } from './login/login.ponent';
import { SignupComponent } from './signup/signup.ponent';

const routes: Routes = [
  { path: 'home', ponent: HomeComponent },
  { path: 'login/:role', ponent: LoginComponent },
  { path: 'signup/:role', ponent: 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 { }

Where am I going wrong which is causing this issue ?

  • javascript
  • angular
  • angularjs
Share Improve this question edited Feb 23, 2022 at 7:43 muskaan sharma asked Feb 23, 2022 at 6:54 muskaan sharmamuskaan sharma 1772 gold badges5 silver badges12 bronze badges 2
  • Can you please add the code snippets showing the child routes in 'user.module' and 'coach.module' – navdbaloch Commented Feb 23, 2022 at 6:59
  • I have added the coach routing file. The user module's routing file is also similar – muskaan sharma Commented Feb 23, 2022 at 7:44
Add a ment  | 

2 Answers 2

Reset to default 4

You must add a route in the child module's route array, usually that route points to some ponent using the the ponent property of Route

Someting like below,

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

Add empty path in user-routing.module.ts and coach-routing.module.ts as well.

const routes: Routes = [{ 
 path: '', 
 ponent: homeComponent
}];

本文标签：

版权声明：本文标题：javascript - Error: Invalid configuration of route &#39;&#39;. One of the following must be provided: component, redirec 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741834651a2400140.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。