Why don't components in same module load with router.navigate?

Question

Before someone marks this question duplicate, i have tried the following questions:

router.navigate is not working (Angular6, lazy loading)

router navigate doesn't redirect to other page

I tried the solutions given the these questions and nothing worked. So i came here to ask my own question. Now to the question:

I have created a new app where i am trying to route to Home.Component from the App.Component with router.navigate(). Below are the files for reference:

App Component.html

<p>App component works</p>
<button (click)="onClick()">Click Home</button>

App.component.ts

import { Router, ActivatedRoute } from '@angular/router';
export class AppComponent {
  constructor(private router:Router){}
  onClick(){
    console.log("Button clicked!!");
    this.router.navigate(['home']);
  }
}

app-routing.module.ts

const routes: Routes = [
  { path:'', component: AppComponent, pathMatch:'full'},
  {path:'home', component:HomeComponent},
];

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

app.module.ts

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

I am not understanding why the home.component.html is not loading when clicking the Click Home button.

Also, i tried creating another component Second.component and tried loading the same from the Home.component on button click(button inside the Home.component).

The components are not lazy-loaded(they are in the same module). Whenever i click the button, the url changes. So why doesn't the associated component load? Have i missed some part of the configuration? Here is the demo

@silentsudo i am updating the question. Please find the stackblitz url in it. — Samarth Saxena, Jun 14 '20 at 08:10

score 1 · Accepted Answer · edited Dec 12 '20 at 17:58

The app component you see when your app starts is there because its the bootstrapped component, not because its on the activated route. You will need to have o <router-outlet> element to render the component matched by the current path.

Depending on what you want to achieve, in order to not duplicate the elements on the page you may need to split the AppComponent. One part should be bootstrapped and contain only the router outlet. The other part should only contain the button.

I'm guessing you are trying to add a menu that will be shown on all pages, and a couple of pages you can navigate to. In that case you can (for example) leave the AppComponent as the bootstrap component and add the <router-outlet> and the menu there:

<p>App component works</p>
<button (click)="onClick()">Home</button>
<button (click)="goToSomeOtherPage()">Some other page</button>
<router-outlet></router-outlet>

Then, edit your routes definition so that the user cannot actually see the empty path:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch:'full'},
  { path: 'home', component: HomeComponent },
  { path: 'some/other/page', component: SomeOtherComponent },
];

As the menu grows in complexity you can split it out to a separate component (say MainMenuComponent) using child routes.

so do i need to add a `````` to every component that re-directs to any other component? And how do i split the AppComponent since adding ```router-outlet``` does indeed duplicate the elements? — Samarth Saxena, Jun 14 '20 at 08:40
In most cases you need a single router outlet in the whole application. It will be placed in one of the top level components. Its contents will show whatever component is matched to the current path. — Apokralipsa, Jun 14 '20 at 08:43

Why don't components in same module load with router.navigate?

1 Answers1