title: Angular routing from one component to another
body: <p>I have one component called <code>main</code> that has <code>main.routing.ts</code> as defined here:</p>
  
  <pre><code>@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 { }
  </code></pre>
  
  <p>And I'm have another <code>content-toolbar</code> component where I wanna create a link to <code>main</code> component. <code>content-toolbar</code> imports <code>router</code> at content-<code>toolbar.module.ts</code> and at <code>content-toolbar.component.ts</code>. I have at <code>content-toolbar.component.html</code> this piece of code:</p>
  
  <pre><code>&lt;span&gt;
      &lt;a routerLink="/main"&gt;
        &lt;img src="/assets/icons/logo_white.svg" class="logo"&gt;
      &lt;/a&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>But this code doesn't turn this image into a link to the other component. How should I reference <code>main</code> component to be router(ed) to from  <code>content-toolbar</code>?</p>