component url shows is the home page with any url address in the app-CodePudding

I have two components app.component.html and app-success-component,in my routing i have :

        import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { SuccessComponenetComponent } from './success-componenet/success-componenet.component';

    const routes: Routes = [{ path:'success-componenet', component: SuccessComponenetComponent
    }];

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

the problem is when i browse :

http://localhost:4200/success-componenet

the url is http://localhost:4200/success-componenet but it shows also my homepage,i need this page to be empty,it does not contain anything in its html but why its showing my http://localhost:4200/ page even though the url is http://localhost:4200/success-componenet,any idea?

CodePudding user response：

Angular app are SPAs (Single Page Apps). All routes e.g. /fred OR /success-component serve up index.html

index.html serves up app.component.html

In app.component.html you should have:

<div>header here</div> <!-- optional: if you want a header on every page -->
<router-outlet></router-outlet>
<div>footer here</div> <!-- optional: if you want a footer on every page -->
<!-- you can use components here too if you want -->

And router-outlet serves up the correct component from routes based on the URL. So your routes should be:

const routes: Routes = [
  { path: 'success-componenet', component: SuccessComponenetComponent },
  { path: 'home', component: HomeComponent }
];

And home-component.html should be your index page.

All the best.