Angular Jasmine testing: ion-avatar is not a known element

I am a complete beginner in testing angular applications, so please be forgiven if I made dumb mistakes and feel free to point them out. If there is already a solution on stackoverflow which explains my problem, I probably didn't understand it, so it would be nice if you could explain it again.

So the thing is I am trying to write a really simple jasmine test for my avatar-view.component, which just tests if the component is created. But the test fails with following error:

error properties: Object({ ngSyntaxError: true, ngParseErrors: [ 'ion-avatar' is not a known element:
1. If 'ion-avatar' is an Angular component, then verify that it is part of this module.
2. If 'ion-avatar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<ng-template #loadProfileImage>
  [ERROR ->]<ion-avatar class="avatar">
    <img class="avatar-pic" [src]="'data:image/jpg;base64,'+profile.image"): ng:///DynamicTestModule/AvatarViewComponent.html@3:2, 'ion-avatar' is not a known element:
1. If 'ion-avatar' is an Angular component, then verify that it is part of this module.
2. If 'ion-avatar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<ng-template #loadDefaultImage>
  [ERROR ->]<ion-avatar class="avatar">
    <img class="avatar-pic" src="assets/profilbild.jpg">
  </ion-avatar>
"): ng:///DynamicTestModule/AvatarViewComponent.html@9:2 ] })
    at <Jasmine>
    at syntaxError (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:2420:1)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:11987:1)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:27259:1)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:27246:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:27189:48
    at <Jasmine>
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:27189:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:27107:1
    at Object.then (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:2411:33)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm5/compiler.js:27105:1)

My avatar-view.component.ts:

import { Component, OnInit, Input, NgModule } from '@angular/core';
import { Profile } from 'src/app/models/profile';


@Component({
  selector: 'app-avatar-view',
  templateUrl: './avatar-view.component.html',
  styleUrls: ['./avatar-view.component.scss'],
})
export class AvatarViewComponent implements OnInit {
  @Input() profile: Profile;

  constructor() { }

  ngOnInit() {}

}

avatar-view.component.html:

<ng-container *ngIf="profile.image; then loadProfileImage; else loadDefaultImage;"></ng-container>

<ng-template #loadProfileImage>
  <ion-avatar class="avatar">
    <img class="avatar-pic" [src]="'data:image/jpg;base64,'+profile.image | SanitizeImage"/>
  </ion-avatar>
</ng-template>

<ng-template #loadDefaultImage>
  <ion-avatar class="avatar">
    <img class="avatar-pic" src="assets/profilbild.jpg">
  </ion-avatar>
</ng-template>

avatar-view.component.spec.ts:

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';

import { AvatarViewComponent } from './avatar-view.component';
import { PipesModule } from 'src/app/pipes/pipes.module';

describe('AvatarViewComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        PipesModule,
      ],
      providers: [
      ],
      declarations: [
        AvatarViewComponent,
      ]
    });
  });

  it('should create', inject([AvatarViewComponent], component=> {
    expect(component).toBeTruthy();
  }));

Would be nice if you could explain me the problem like you would explain it to your mother.