Angular routing displaying the same app.component.html

Question

I'm currently using Angular version 13.

As stated by the official documentation, routing should be done by creating a component and routing it like this in the app-routing.module.ts

const routes: Routes = [
{ path: 'first-component', component: 
FirstComponent },
{ path: 'second-component', component: 
SecondComponent },
];

but doing so will render my app.comoponent.html file without actually changing anything. I can see that the url changed, but that's about it. Other newer sources consider doing something like

{
path:'mainpage',
loadChildren: () => import('./mainpage/mainpage.module').then(m 
=> m.MainpageModule)
}

and, as the solution above, does not work for me. I've also added the <router-outlet></router-outlet> directive, (which was actually already added) but nothing changed. What is currently happening? Thanks!

side note, the last line can be written loadChildren: async () => (await import('./mainpage/mainpage.module')).MainpageModule — Jeremy Thille
– Jeremy Thille, Commented Dec 5, 2021 at 13:08

Ran Turner · Accepted Answer · 2021-12-05 13:01:16Z

2

The RouterOutlet Acts as a placeholder that Angular dynamically fills based on the current router state so in most cases you'll probably have the <router-outlet></router-outlet> directive in your app.component.html. This element actually informs Angular to update the application view with the component for the selected route.

Each route in routes array is a JavaScript object which contains two properties. The first property is the path which defines the URL path for the route. The second one is the component which defines the component Angular should use for the corresponding path.

loadChildren is a different issue. By default, Angular NgModules are eagerly loaded, which means that as soon as the application loads, so does all of the NgModules, even if they are not immediately necessary. If you wish to use lazy loading for Angular modules, you can use the loadChildren (instead of component like in your first example) in your AppRoutingModule routes.

answered Dec 5, 2021 at 13:01

Ran Turner

18.7k9 gold badges60 silver badges60 bronze badges

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

4 Comments

DDave Over a year ago

Ok, perfect explanation, I'm starting to get the gist of it. So actually loadchildren woudl employ lazyloading, which is something that i don't currently want. But basically you're telling me that everything is at is should be right? If i would user the router-outlet + the first routing i SHOULD see my component? If so thanks, my problem is elsewhere :)

DDave Over a year ago

Thank you for shedding some light on the matter. I was using the app.component.html as an introduction page, and it would overlap any page i was trying to route. The Routing effectively worked, but it displayed stuff from the app component. Hope to help some beginners! Ty very much again

Ran Turner Over a year ago

Most welcome my friend

JanBrus Over a year ago

I have accidentally deleted <router-outlet></router-outlet> from app.component.ts and that was the exact reason why every route was simply displaying app component

Collectives™ on Stack Overflow

Angular routing displaying the same app.component.html

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related