ExpressionChangedAfterItHasBeenCheckedError

[TENDesign]

I am getting an ExpressionChangedAfterItHasBeenCheckedError in my component when using the BreadCrumbService store(); I tried running this on several different lifecycle hooks but all threw the same error.

here is the relevant part of the component.

constructor(
    public contactsrv: ContactsService,
    private router: ActivatedRoute,
    private breadcrumb: BreadcrumbsService
) {
    this.router.params.subscribe(
        params => {
            this.mediaListId = +params['ml'];
            this.contactId = +params['id'];
        }
    );
}

ngOnInit() {

    this.breadcrumb.store([
        {
            label: 'Media Lists',
            url: '/app-media-lists',
            params: []
        },
        {
            label: 'Media List' ,
            url: `/app-media-lists/media-list/list/${this.mediaListId}`,
            params: []
        },
        {
            label: 'Contact Profile',
            url: '',
            params: []
        }
    ]);

    this.getContact();
    this.getTimeline();
    this.getNotes();
    this.getFunnel();
    this.getFunnelCodeTable();

}

the breadcrumb itself is called in the app.component.html:

<ng-progress></ng-progress>
<app-navbar *ngIf="ui" (showEvent)="getToggle($event)"></app-navbar>
<app-sidebar *ngIf="ui" class="main" [ngClass]="{show: show}"></app-sidebar>
<breadcrumb *ngIf="ui" [allowBootstrap]="true"></breadcrumb>
<app-pitching-modal></app-pitching-modal>
<router-outlet></router-outlet>

and in the app.component.ts I have:

ngOnInit() {

    this.breadcrumbs.storePrefixed({label: 'Home' , url: '/', params: []});

    if (screen.width >= 768) {
        this.show = true;
        return this.show;
    } else {
        this.show = false;
        return this.show;
    }

}