Erro no ap-card

Sistema está apresentando o seguinte erro

compiler.js:215 Uncaught Error: Template parse errors:
'ap-card' is not a known element:
1. If 'ap-card' is an Angular component, then verify that it is part of this module.
2. If 'ap-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("of rows" class="row no-gutters">
        <div *ngFor="let photo of cols" class="col-4">
            [ERROR ->]<ap-card></ap-card>
                <ap-photo 
                    [url]="photo.url" 
"): ng:///PhotosModule/PhotosComponent.html@7:12
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
    at compiler.js:22639
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
    at compiler.js:22549
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

Segue meu card.componente.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'ap-card',
    templateUrl: './card.component.html'
})
export class CardComponent { 
    @Input() title: string = '';
}

card.component.html

<div class="card border-light text-center">
    <h4 class="card-header">{{ title }}</h4>
    <div class="card-block text-justify">
        <!-- aqui entra o conteúdo -->
    </div>
</div>

car.module.ts

import { NgModule } from '@angular/core';
import { CardComponent } from './card.component';
import { CommonModule } from '@angular/common';

@NgModule({
    declarations: [CardComponent],
    exports: [CardComponent],
    imports: [CommonModule]
})
export class CardModule { }

photo-list.module.ts

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

import { PhotoListComponent } from './photo-list.component';
import { PhotosComponent } from './photos/photos.component';
import { LoadButtonComponent } from './load-button/load-button.component';
import { FilterByDescription } from './filter-by-description.pipe';
import { PhotoModule } from '../photo/photo.module';
import { CardModule } from 'src/app/shared/components/card/card.model';

@NgModule({
    declarations: [
        PhotoListComponent,
        PhotosComponent,
        LoadButtonComponent,
        FilterByDescription
    ],
    imports: [ 
        CommonModule,
        PhotoModule,
        CardModule   
    ]
})
export class PhotoListModule {}

photos.component.ts

<p class="text-center text-muted" *ngIf="!photos.length"> 
    Sorry, no photos
</p>

<ol class="list-unstyled">
    <li *ngFor="let cols of rows" class="row no-gutters">
        <div *ngFor="let photo of cols" class="col-4">
            <ap-card>
                <ap-photo 
                    [url]="photo.url" 
                    [description]="photo.description">
                </ap-photo>
                <div class="text-center" p-1>
                    <i aria-hidden="true" class="fa fa-heart-o fa-1x mr-2"></i>{{ photo.likes }}
                    <i aria-hidden="true" class="fa fa-comment-o fa-1x mr-2 ml-2"></i>{{ photo.comments }}
                </div>
            </ap-card>            
        </div>
    </li>
</ol>