Angular routing is not showing the component content

Question

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:

Appcomponent

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

Angular inserts components in the <router-outlet>, which in your case is inside of the login component. That means that the content of the login component will be shown in addition to the routed component. — user13258211
– user13258211, Commented Sep 17, 2020 at 12:39
@MikeS. you are correct, but here it is just showing the URL as /login but the content is showing the app.component.html — Jeb
– Jeb, Commented Sep 17, 2020 at 12:50
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 app.component.html. ` <router-outlet></router-outlet>` Should be only in the app.component.html. Check it works now? — ng-hobby
– ng-hobby, Commented Sep 17, 2020 at 15:45
@ng-hobby I have removed <router-outlet></router-outlet> in Login component and kept in app.component.html. it is showing the login page along with the app.component.html content — Jeb
– Jeb, Commented Sep 18, 2020 at 2:59
@Jeb Can you add your code to stackblitz ? It will be easier for people to fork it from there and find the issue. — Supun De Silva
– Supun De Silva, Commented Sep 18, 2020 at 3:34

ng-hobby · Accepted Answer · 2020-09-18 07:03:02Z

3

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.

answered Sep 18, 2020 at 7:03

ng-hobby

2,2092 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

William Destain · Accepted Answer · 2020-09-18 04:52:45Z

0

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' },
];

answered Sep 18, 2020 at 4:52

William Destain

113 bronze badges

Collectives™ on Stack Overflow

Angular routing is not showing the component content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related