ExpressionChangedAfterItHasBeenCheckedError /角4角7

Question

I updated my code from Angular 4 to Angular 7 and suddenly this error started emerging. There are soo many articles on the internet about this but non seems to work. Can someone please point me out why I am getting this error? Error comes in the Breadcrums

My Error

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'showBreadcrumbsSiteMetaData: false'. Current value: 'showBreadcrumbsSiteMetaData: true'.

at viewDebugError (core.js:20342)
at expressionChangedAfterItHasBeenCheckedError (core.js:20330)
at checkBindingNoChanges (core.js:20432)
at checkNoChangesNodeInline (core.js:23307)
at checkNoChangesNode (core.js:23292)
at debugCheckNoChangesNode (core.js:23896)
at debugCheckDirectivesFn (core.js:23824)
at Object.eval [as updateDirectives] (HomeComponent.html:6)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23813)
at checkNoChangesView (core.js:23191)

Home.Component.html

<div class="wrapper" >
  <navbar [metaData]="navBarMetadata" [userInfo]="navbarUserInfo" [helpButtonRoute]="navbarHelpButtonRoute"
        [menuItems]="sidebarRoutes" [settingsMenuItems]="settingsMenuItems"
        [languagesMenuItems]="languagesMenuItems"
        [rs_logo]="rs_logo"></navbar>
    <details-bar [breadscrumbsMetaData]="breadscrumbsMetaData" [breadcrumbsSiteMetaData]="breadcrumbsSiteMetaData"
             [showBreadcrumbsSiteMetaData]="showBreadcrumbsSiteMetaData"></details-bar>

  <div class="main-panel" #mainPanel (scroll)="onScroll($event)">
    <div class="container ">
      <div class="current-component">
        <simple-notifications [options]="notificationOptions"></simple-notifications>
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

Home.Component.ts

 export class HomeComponent implements OnInit, AfterViewInit {

    notificationOptions: any = AppConstants.NOTIFICATION_OPTIONS;
    sidebarRoutes: NavbarRouteInfo[];
    settingsMenuItems: NavbarRouteInfo[];
    navBarMetadata: NavBarMetadata[];
    navbarUserInfo: NavBarUserInfo;
    navbarHelpButtonRoute: string;
    rs_logo: string;
    languagesMenuItems: LanguageInfo[];
    breadscrumbsMetaData: BreadscrumbMetadata[];
    breadcrumbsSiteMetaData: BreadscrumbMetadata[];
    showBreadcrumbsSiteMetaData: boolean;
    entityTypeList: RSEntityType[];
    @ViewChild('mainPanel') mainPanelDiv: ElementRef;
    activeAppKey: string;
    protected alive = true;
    private notificationTitles: { error: string };

    constructor(public notificationsManager: NotificationsManager,
          private authGuard: AppAuthGuard,
          private homeEventBus: HomeEventBus,
          private userManagementService: UserManagementService,
          private homeService: HomeService,
          private authService: AuthService,
          private activatedRoute: ActivatedRoute,
          private translate: TranslateService,
          private dataService: DataService) {
          this.breadcrumbsSiteMetaData = [];
          this.showBreadcrumbsSiteMetaData = false;
          this.activeAppKey = '';
          this.entityTypeList = [];
          this.initMessages();}

          initMessages() {
             this.translate.stream('home.msg').subscribe((res) => {
             this.notificationTitles = {
             'error': res['error']
             }
          }
     );

}

ngOnInit() {

    this.notificationsManager.showSpinner();
    this.translate.setDefaultLang
    (sessionStorage.getItem(AppConstants.LANGUAGE));
    this.subscribeEvents();
    this.initNavBar();
    this.initSideBar();
    this.initLanguageBar();
    this.notificationsManager.hideSpinner();
}

ngAfterViewInit() {
    this.initNavBar();
    if (((this.activeAppKey) === undefined || (this.activeAppKey) === null) || 
    this.activeAppKey.trim().length === 0) {
    this.activeAppKey = sessionStorage.getItem(AppConstants.APP_KEY);
    }

    if (this.authGuard.isAccessTokenDefined()) {
    this.dataService.loadUserIdEmailList(this.activeAppKey);
    }
}

initNavBar() {
    this.rs_logo = environment.API_BASE_URL + '/' + 'resources/internal-assets/images?name=rs-logo.png';
    this.setNavBarMetaData();
    this.navbarHelpButtonRoute = AppConstants.HELP_ROUTE;
    this.navbarUserInfo = new NavBarUserInfo('assets/img/default-avatar.png', '');
    this.loadUserImg();
 }

 setNavBarMetaData() {
     this.translate.stream('navbar').subscribe((res) => {
         this.navBarMetadata = [{
             path: 'profile',
             params: {},
             title: res['profile'],
             index: -1
         }];
     });
 }


this.homeEventBus.breadcrumbsSiteMetaDataUpdateEvent$.subscribe(data => {
  if (data) {
    // this.fetchEntityTypes();
    this.showBreadcrumbsSiteMetaData = true;
  } else {
    // this.breadcrumbsSiteMetaData = [];
    this.showBreadcrumbsSiteMetaData = false;
  }
});

Answer 1

Usually this indicates a design flow, however, there are cases which the asynchronous pattern forces you to change things after angular checked it.

In order to re-initiate a change detection cycle, you have to

Import ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

Inject it in your component,

public constructor(private readonly changeDetectorRef: ChangeDetectorRef) {
}

When you are certain to have completed the changes, mark your component as changed, and trigger the change

this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();

Please, be aware that you know control the detection cycle, therefore you must be sure you are not looping yourself asking to continuously to force the detection, otherwise you defeat the purpose of the all thing.

Answer 2

Update

  this.homeEventBus.breadcrumbsSiteMetaDataUpdateEvent$
      .pipe(
          delay(0),
          tap(data => {
              if (data)
                this.showBreadcrumbsSiteMetaData = true;
              else
                this.showBreadcrumbsSiteMetaData = false;
            })
      ).subscribe();

or

setTimeout(() => {
    this.homeEventBus.breadcrumbsSiteMetaDataUpdateEvent$.subscribe(data => {
      if (data) {
        // this.fetchEntityTypes();
        this.showBreadcrumbsSiteMetaData = true;
      } else {
        // this.breadcrumbsSiteMetaData = [];
        this.showBreadcrumbsSiteMetaData = false;
      }
    });
  });

---

your code might having issue as it modifying value of property in ngAfterViewInit , that might be cause of issue

so you should put you code of ngAfterViewInit as bel

ngAfterViewInit() {
   setTimeout(() => {
    this.initNavBar();
    if (((this.activeAppKey) === undefined || (this.activeAppKey) === null) || 
    this.activeAppKey.trim().length === 0) {
    this.activeAppKey = sessionStorage.getItem(AppConstants.APP_KEY);
    }

    if (this.authGuard.isAccessTokenDefined()) {
    this.dataService.loadUserIdEmailList(this.activeAppKey);
    }
  }
}

for detail check : https://blog.angular-university.io/angular-debugging/