CODEWITHSUNDEEP
angulartypescriptionic-framework
Misael Vergara
Misael Vergara

Reputation: 3

RouterLink stops working once more declarations are added

I'm developing an early sample of an Ionic application based on Angular. It should navigate between different pages and show a variety of content according to the context.

I assigned a routerLink dynamic property to an object of the home page. Everything was working accordingly, the browser was redirecting to the target page every time the object was clicked.

The target page is an Ionic Page called "component".

Once I added a component called "BottombarComponent" to the target page, the objected linked to the routerLink stopped redirecting to the page. However, you can still access it through its path.

I've tried everything I can possibly imagine. I'm still new to Angular.

This is the module for the "component" page.

//[...]
import { ComponentPage } from './component.page';
import { BottombarComponent } from '../dependency/bottombar/bottombar.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ComponentPage
      }
    ])
  ],
  declarations: [
    ComponentPage,
    BottombarComponent // this line is what throws the issue
  ]
})

This is the HTML object refering to the "component" page:

<ion-card [routerLink]="['/component']">
    <ion-card-header>
      <ion-card-title>Guia de Conceitos</ion-card-title>
    </ion-card-header>
    <ion-item>
      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
      <ion-label>Índice de todos os conceitos abrangidos</ion-label>
      <ion-button fill="outline" slot="end">ABRIR</ion-button>
    </ion-item>

    <ion-card-content>
      Descrição...
    </ion-card-content>
  </ion-card>

Could anyone help me understand what's wrong?

Github project reference: https://github.com/misaelvergara/Syntaxe

Upvotes: 0

Views: 105

Answers (1)

ram12393
ram12393

Reputation: 1258

You have been declaring BottombarComponent and TopbarComponent in two different modules. So, it causing error.

Note: You should declare a component in a single module.

If you suppose to reusing the component in different modules, you should wrap them into single module and export them in a export array.

here In your case you should create dependency module like below

@NgModule({
  declarations: [TopbarComponent, BottombarComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [
    BottombarComponent,
  ]
})
export class DependencyModule { }

after that what are the components you are reusing in a module, just import the dependency module. That's all about it, it will solve your problems

Upvotes: 1

Related Questions