Angular routing from one component to another

Question

I have one component called main that has main.routing.ts as defined here:

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: 'main',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [{ path: '', component: AccountMainComponent },
      { path: 'financial-accounts', component: FinancialAccountsComponent },
      { path: 'system-config', component: ConfigSysComponent },
      { path: 'conciliacao', component: ConciliacaoContabilComponent },
      { path: 'report', component: ReportComponent },
      ]}
    ])
  ]
 })
 export class MainRouting { }

And I'm have another content-toolbar component where I wanna create a link to main component. content-toolbar imports router at content-toolbar.module.ts and at content-toolbar.component.ts. I have at content-toolbar.component.html this piece of code:

<span>
    <a routerLink="/main">
      <img src="/assets/icons/logo_white.svg" class="logo">
    </a>
</span>

But this code doesn't turn this image into a link to the other component. How should I reference main component to be router(ed) to from content-toolbar?

Do you have a router-outlet somewhere? Without it, there will be no navigation. — LordAlpaca, May 08 '18 at 12:11
@LordAlpaca, where I should add router-outlet tag? My tries ended up not rendering the website — rado, May 08 '18 at 12:14
can you add the module where you declare the `content-toolbar.component`? — Jota.Toledo, May 08 '18 at 12:23
@GabrielRado, you should have router-outlet somewhere high in your hierarchy, maybe app.component.html. Simply put `` and try it out. — LordAlpaca, May 08 '18 at 12:43

score 2 · Accepted Answer · answered May 08 '18 at 12:28

Ill take my guess and state the following:

Most likely you declare ContentToolbarComponent in a module that looks like this

@NgModule({
imports: [..., MainRoutingModule,...],
declarations: [..., ContentToolbarComponent, ...]
})
export class FooModule {}

The problem is that you probably dont import the RouterModule, which exports the RouterLinkDirective, into FooModule. Thats why angular is not generating anchor elements with hyperlinks.

The solution would be to add the RouterModule into the exports of your MainRoutingModule as follows:

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: 'main',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [{ path: '', component: AccountMainComponent },
      { path: 'financial-accounts', component: FinancialAccountsComponent },
      { path: 'system-config', component: ConfigSysComponent },
      { path: 'conciliacao', component: ConciliacaoContabilComponent },
      { path: 'report', component: ReportComponent },
      ]}
    ])
  ],
  exports: [RouterModule]
 })
 export class MainRouting { }

The important thing is that, the module that declares the toolbar component has to import the RouterModule directly or through the exports of another imported module, so that the toolbar component can use the directive.

Although your answer makes lots of sense, I didn't get to make this work. I noticed that my `content-toolbar.module` doesn't import `MainRoutingModule` and doesn't declare `ContentToolbarComponent` as you stated. Sorry for my lack of knowledge, but these are obligatory? — rado, May 08 '18 at 13:38
You need to import the `RouterModule` into the module that declares the `ContentToolbarComponent`, thats all. You only have to import MainRoutingModule into your root module. If you update your answer with the information that I requested in the comments, I could be more specific. — Jota.Toledo, May 08 '18 at 14:01
I succeeded after noticing a mistake at the module that declares `ContentToolbarComponent`. Thanks for your patience — rado, May 08 '18 at 14:26

score 0 · Answer 2 · answered Jun 21 '20 at 14:40

So for Angular Routing to work correctly below things needs to be taken care of

Import RouterModule in your routing module or app.module.ts.
Declare/configure your routes in the imports section using the forroot.
Export the RouteModule so that it is available throughout the application.
Import your components in your Routing Module or app.module.ts.

import { RouterModule } from '@angular/router';
//import your components

@NgModule({
  declarations:[your components],//your components needs to declared here.
  imports: [
    RouterModule.forRoot([
      { path: 'main',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [{ path: '', component: AccountMainComponent },
      { path: 'financial-accounts', component: FinancialAccountsComponent },
      { path: 'system-config', component: ConfigSysComponent },
      { path: 'conciliacao', component: ConciliacaoContabilComponent },
      { path: 'report', component: ReportComponent },
      ]}
    ]) //this defines/configures all the routes of the application
  ],
exports: [RouterModule] //this will export RouterModule through which we will be able to discover our routes
 })
 export class MainRouting { }

Now our routing Module is ready for handling the requests. Now we still have 2 things pending.

Calling the route

<span>
    <a routerLink="/main">
      <img src="/assets/icons/logo_white.svg" class="logo">
    </a>
</span>

Specifying where the route needs to be loaded using router-outlet. In Angular, we have 2 pages to understand first is the index.html. This is the landing page or page where everything will be loaded.

Next, the app.component.html is our root component which is ideal for loading the routes. Simply add the below code in the file anywhere will work as long as it is in the file.

<router-outlet></router-outlet>

Now we should be good navigating b/w components.

Reference: https://angular.io/tutorial/toh-pt5#add-routeroutlet

Learning Angular try this project first: https://angular.io/tutorial

N. Richli · Answer 3 · 2018-05-08T12:14:00.350

-1

You have to add routerLinkActive="active" to the a tag like this:

<span>
    <a routerLink="/main" routerLinkActive="active">
      <img src="/assets/icons/logo_white.svg" class="logo">
    </a>
</span>

edit the router object should also have pathmatch: 'full':

children: [{ path: '', component: AccountMainComponent, pathMatch: 'full' }

edited May 08 '18 at 12:14

answered May 08 '18 at 11:57

N. Richli

102
1
10

I did but it didn't work. Do you have any idea on what I could be missing or any extra code I should show? – rado May 08 '18 at 11:59
@GabrielRado you have to add "pathMatch: 'full'" to the children path: ' ' – N. Richli May 08 '18 at 12:11
No, inspecting the element I get ` `. Should tags be lowerCase? – rado May 08 '18 at 12:21
Try with uppercase like this: "routerLink", "routerLinkActive" – N. Richli May 08 '18 at 12:24
I did upperCase at source code, but when I inspected code them turned out lowerCase – rado May 08 '18 at 12:29
Just wondering, @N.Richli why do you think that the `RouterLinkActive` directive has anything to do with this issue? – Jota.Toledo May 08 '18 at 12:30
1

@Jota.Toledo my bad, isn't needed – N. Richli May 08 '18 at 12:31

Angular routing from one component to another

3 Answers3