Angular6 - Where to import RouterModule to prevent "Can't bind to 'routerLink' since it isn't a known property of 'a"

Question

I'm having difficulty in placing the RouterModule to prevent a router link html error.

Category Component

• Displays a list of categories
• Displays a list of albums in those categories by adding the albums element to the categories html: <app-albums></app-albums>
• Clicking on a category will show the associated content within <app-albums>

Albums Component

• Clicking on an album will change the routing and display a different component

• Now the left will be a list of albums

• The right will show album details when clicking on an album by having the <app-album-detail></app-album-detail> html element added to 'import' the album detail component

Issue

I have added the RouterModule to the categories module which allows me to use [RouterLink] in my HTML. However, when I try to use [RouterLink] in my albums component, I get the error:

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

The albums component and albums detail component are in a 'SharedModule'. This allows me to export the album list and album detail components and import the shared module into my categories module to use them.

Where should the RouterModule be imported to? My albums module, or shared module? Or can RouterModule be declared higher up (appModule) to cover all components?

Categories Module

note: this one seems to work fine. The category html can use routerLink fine

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CategoriesComponent } from './categories.component';
import { MatProgressSpinnerModule } from '@angular/material';
import { SharedModule } from '../shared/shared.module'
import { RouterModule } from '@angular/router';


@NgModule({
  imports: [
    CommonModule,
    MatProgressSpinnerModule,
    SharedModule,
    RouterModule
  ],
  declarations: [
    CategoriesComponent,
  ]
})
export class CategoriesModule { }

Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatProgressSpinnerModule } from '@angular/material';
import { AlbumsListComponent } from '../albums/albums-list/albums-list.component';
import { AlbumDetailComponent } from '../albums/album-detail/album-detail.component';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    MatProgressSpinnerModule
  ],
  declarations: [
    AlbumsListComponent,
    AlbumDetailComponent,
  ],
  exports: [
    AlbumsListComponent,
    AlbumDetailComponent,
    RouterModule
  ]
})
export class SharedModule { }

Albums Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatProgressSpinnerModule } from '@angular/material';
import { SharedModule } from '../shared/shared.module'
import { RouterModule } from '@angular/router';


@NgModule({
   imports: [
      CommonModule,
      MatProgressSpinnerModule,
      RouterModule,
      SharedModule
   ],
   declarations: [],
   exports: []
})
export class AlbumsModule { }

app.router.ts

// Modules
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Components
import { CategoriesComponent } from '../categories/categories.component';
import { AlbumsListComponent } from '../albums/albums-list/albums-list.component'


const appRoutes: Routes = [

  {
      path: 'categories',
      component: CategoriesComponent,
  },
  {
      path: 'categories/:categoryId/albums',
      component: CategoriesComponent,
  },
  {
      path: 'categories/:categoryId/album/:albumId',
      component: AlbumsListComponent,
  },
  {
      path: '',
      redirectTo: 'categories',
      pathMatch: 'full'
  },
  {
      path: '**',
      redirectTo: 'categories',
      pathMatch: 'full'
  }
];


export const AppRouting: ModuleWithProviders =   RouterModule.forRoot(appRoutes);