routing system it works not used angular 12-CodePudding

I am a beginner in angular, I followed a training, I reached routing system, I created routing system by command ng g m routes --routing, I declared routes, I changed tag <home></home> by <router-outlet></router-outlet> Nothing to show.

home.component.html

<sliders [rowOfSliders]="rowSliders"></sliders>
<div >
    <h2 >Nos Services</h2>
    <hr>
    <services [rowOfServices]="rowServices"></services>
    
    <h2 >Nos Actualites</h2>
    <hr>
    <posts [rowsOfPosts]="rowPosts"></posts> 
</div>

app.component.html

<menu></menu>
<router-outlet></router-outlet>

app.module.ts

import { RoutesModule } from './routes/routes.module';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { AcceuilComponent } from './components/acceuil/acceuil.component';
import { BlogComponent } from './components/blog/blog.component';
import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
import { ContactComponent } from './components/contact/contact.component';
import { FooterComponent } from './components/footer/footer.component';
import { MenuComponent } from './components/menu/menu.component';
import { MessageComponent } from './components/message/message.component';
import { PostsComponent } from './components/posts/posts.component';
import { ServiceComponent } from './components/service/service.component';
import { ServicesComponent } from './components/services/services.component';
import { ShowPostComponent } from './components/show-post/show-post.component';
import { ShowServiceComponent } from './components/show-service/show-service.component';
import { SlidersComponent } from './components/sliders/sliders.component';

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    AcceuilComponent,
    BlogComponent,
    BreadcrumbComponent,
    ContactComponent,
    FooterComponent,
    MenuComponent,
    MessageComponent,
    PostsComponent,
    ServiceComponent,
    ServicesComponent,
    ShowPostComponent,
    ShowServiceComponent,
    SlidersComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    MDBBootstrapModule.forRoot(),
    RoutesModule
  ],
  providers: [

  ],
  bootstrap: [AppComponent],
  schemas:[NO_ERRORS_SCHEMA]
})
export class AppModule { }

CodePudding user response：

Angular routing routes a url path to a component like so:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComponentToRoute } from './myComponentPath/myComponent.component';

const routes: Routes = [
  { path: "ComponentPath", component: ComponentToRoute }
];

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

When navigating to the localhost:4200/ComponentPath the <router-outlet> will output the component listed on that url path.

If this is how your Routing Module looks like it might be missing references in your app.module.ts it should look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { ComponentToRoute } from './myComponentPath/myComponent.component';

@NgModule({
  declarations: [
    AppComponent,
    ComponentToRoute 
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }