CODEWITHSUNDEEP
angularangular-routing
Jeb
Jeb

Reputation: 517

Angular routing is not showing the component content

I created a sample of my project here: stackblitz

I implemented the routing in my Angular application. As a part of that I have written the above Stackblitz.

On that sample there are two components available:

  1. Appcomponent
  2. LoginComponet

By default it should go to the LoginComponent whenever we give URL as /home then it should render the AppComponent.

app-routing.module.ts

const appRoutes:Routes=[
  { path: '', component: LoginComponent },
  { path: 'home', component: AppComponent },
  { path: '**', redirectTo: '/not-found', pathMatch: 'full' }  
]

App.component.html

<div class="container">
  <h2> Hello App component</h2>
</div>
<router-outlet></router-outlet>

But the problem is that by default it is showing the appcomponent and LoginComponet content in the same page.

Can anyone help?

Thanks

Upvotes: 1

Views: 2426

Answers (2)

ng-hobby
ng-hobby

Reputation: 2199

Ok, based on our comments I got the problem. Remove the <router-outlet></router-outlet> & <app-root></app-root> from the login.component.html and if there is in any other component.html except on the app.component.html.

In your design, Yo have to just have one <router-outlet></router-outlet> in the entire application. In the app.component.html you have to just have <router-outlet></router-outlet> and nothing else. If you have some other content in app.component.html extract them and place into a new component with new route. It should be ok.

Upvotes: 3

William Destain
William Destain

Reputation: 11

When you launch your Angular application, it launches the root component by default which corresponds to AppComponent.

Then it loads all the elements of the corresponding html page. As you have content before the <router-outlet> </router-outlet> it will display them.

You can find a pretty good example on how to add routing into your application angular TOH

So you must put nothing in the default component 'AppComponent', and create another component that you will display with your 'home' route.

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: ${new Component} },
  { path: '', pathMatch: 'full', redirectTo: 'login' },
];

Upvotes: 0

Related Questions