RouterLink not working in child components

user3642173

I have a simple app with the following structure in my main app.html file.

    <navigation-list [unreadEmailCount]="unreadEmailCount| async"></navigation-list>
    <router-outlet></router-outlet>

In my navigation-list component I can easily create routerLinks as follows:

<a routerLink="/starred" routerLinkActive='active'>link</a>

However, when I go into a component rendered within the router-outlet I cannot use routerLink. Using Router.route.nagive['path'] however, works. Any clues why this is?

EDIT:

App router module:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {AuthGuard} from "./auth/auth-guard";
import {UnauthGuard} from "./auth/unauth-guard";

const routes: Routes = [
  { path: '', redirectTo: '/inbox', pathMatch: 'full', canActivate: [UnauthGuard] }
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  providers: [AuthGuard, UnauthGuard],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

Photos router module (this is where the routerLink is not working)

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {PhotosComponent} from './photos/photos.component';
import { CreateAlbumComponent } from './album/create-album/create-album.component';
import { AlbumComponent } from './album/album/album.component'

const routes: Routes = [
  { path: 'photos',  component: PhotosComponent},
  { path: 'photos/:filter', component: PhotosComponent},
  { path: 'create-album', component: CreateAlbumComponent},
  { path: 'albums', component: AlbumComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})

export class PhotosRoutingModule {}

EDIT: photosModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import {PhotoListComponent} from "./photo-list/photo-list.component";
import {PhotosService} from './shared/photos.service';
import { PhotogroupListComponent } from './photogroup-list/photogroup-list.component';
import { PhotogroupItemComponent } from './photogroup-item/photogroup-item.component';
import { PhotosComponent } from './photos/photos.component';
import {FileUploadComponent} from "./shared/file-upload";
import {FileUploadService} from './shared/file-upload.service';
import { ImageSearchComponent } from './image-search/image-search.component';
import {ImageSearchService} from "./image-search/image-search.service";
import {AlbumSelectComponent} from './album/album-select.component';
import { AlbumSelectBarComponent } from './album/album-select-bar/album-select-bar.component';
import { CreateAlbumComponent } from './album/create-album/create-album.component';
import { CreateAlbumService } from './album/create-album/create-album.service';
import { AlbumService } from "./shared/album.service";
import { AlbumListComponent } from './album/album-list/album-list.component';
import { AlbumItemComponent } from './album/album-item/album-item.component';
import { AlbumComponent } from './album/album/album.component';
import { PhotoNavBarComponent } from './photo-nav-bar/photo-nav-bar.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    PhotoListComponent,
    PhotogroupListComponent,
    PhotogroupItemComponent,
    PhotosComponent,
    FileUploadComponent,
    ImageSearchComponent,
    AlbumSelectComponent,
    AlbumSelectBarComponent,
    CreateAlbumComponent,
    AlbumListComponent,
    AlbumItemComponent,
    AlbumComponent,
    PhotoNavBarComponent
  ],
  providers: [
    PhotosService,
    FileUploadService,
    ImageSearchService,
    CreateAlbumService,
    AlbumService
  ]
})

export class PhotosModule { }

export {PhotosService, FileUploadService, ImageSearchService, CreateAlbumService, AlbumService}
Günter Zöchbauer

If the child component is from a different module then you need to ensure this module has RouterModule in imports

@NgModule({
  imports: [CommonModule, RouterModule],
  declarations: [NavigationListComponent],
  exports: [NavigationListComponent],
})
export class SomeSharedModule{}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Some Child React Components not working

MapStateToProps and MapDispachToProps in parent and child components not working

routerLink error in child route

routerLink with singleline if and child route

routerLink not working in Angular 6

RouterLink is not working in Angular 6

routerLink is not working in angular 2

Bootstrap Grid System not working in Angular Components communicating from parent to child

Working with several Generic parameters and multiple parent/child components in Blazor

RouterLink to navigate back in child route

How to not apply [routerLink] on a child element?

Vue components: $emitting not working for parent-child components. What I'm doing wrong?

Angular routerlink not working with lazyloading modules

Vue 3 Props is not working on child components after binding it correctly. It returns undefined in child component

React styled components - target first-child and last-child not working

Angular 2 unit testing components with routerLink

How to provide routerLink in Parent component for shared components

Passing parent component data to child via routerLink

How to prevent overriding of parent routerLink over child

routerLink to load a page of a nested parent->child->child

Angular mat-list-item routerLink not working

Ionic 4 RouterLink not working on app with tabs and sidemenu

Angular routerLink directive in modal component not working as expected

Routing is not working when routerLink has data

Angular Routerlink is not working and I did everything right

RouterLink stops working once more declarations are added

Access to ngSanitize in child components

count child components programmatically

How to listen to child components?