Error with a combination of adf-document-list & adf-upload-button

[d_moeyersons]

Hi,

I get an error when i use the adf-document-list and adf-upload-button in a specific way in ADF 2.4.

<adf-toolbar>
  <adf-toolbar-title>
    <adf-breadcrumb
      class="files-breadcrumb"
      root="Personal Files"
      [target]="documentList"
      [folderNode]="documentList.folderNode">
    </adf-breadcrumb>
  </adf-toolbar-title>

  <div class="adf-toolbar--spacer"></div>

  <adf-upload-button
    [rootFolderId]="documentList.currentFolderId"
    [adf-node-permission]="'create'"
    (success)="uploadSuccess($event)">
  </adf-upload-button>

</adf-toolbar>

<adf-document-list
  #documentList
  [currentFolderId]="folderId"
  (preview)="showPreview($event)">
</adf-document-list>

<adf-file-uploading-dialog></adf-file-uploading-dialog>

this is a standard use of the uploadbutton and document list, with a variable folderId.

When I change the folderId variable:

this.folderId = sitecontainerEntry.entry.id;

i get following error:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: '37a263eb-2f39-4e91-8d56-abb7add18b63'.
    at viewDebugError (core.js:9801)
    at expressionChangedAfterItHasBeenCheckedError (core.js:9779)
    at checkBindingNoChanges (core.js:9948)
    at checkNoChangesNodeInline (core.js:14002)
    at checkNoChangesNode (core.js:13976)
    at debugCheckNoChangesNode (core.js:14805)
    at debugCheckDirectivesFn (core.js:14707)
    at Object.eval [as updateDirectives] (SamenwerkingssiteComponent.html:13)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14689)
    at checkNoChangesView (core.js:13814)

It doesn't matter what my initial value was (in this case null, but it can be -root- or something else), i get the same error.

The upload button still works fine after getting the error, but it's just not 'clean'.

Best regards,

David.

[eugenio_romano]

Hi David I suggest you to a fast research on the internet and search for the cause of why this thing can happen in your Angular app: ExpressionChangedAfterItHasBeenCheckedError is a common error.

Angular is checking for the unidirectional data flow from top to bottom. That means that the lower component in the hierarchy should not be allowed to update properties of a parent. Most of the time this error is not reflecting a real issue for real implementation but is difficult to get where it comes from without the rest of your app.Maybe you can give a look to the :

GitHub - Alfresco/alfresco-content-app: Alfresco Example Content Application 

or

https://github.com/Alfresco/alfresco-ng2-components/tree/master/demo-shell

[d_moeyersons]

Hi Eugenio,

I have a simple way to recreate this error in a new app:

• generate a new Alfresco ADF app, set up the proxy
• generate a new component with the name: test
• set up a route to the new component
  

  app.routes.ts
  {         path: 'test',         component: TestComponent,    }

    
• paste the following code in the component:
  

  test.component.ts

  import { Component, OnInit } from '@angular/core'; import {LogService, NodesApiService} from '@alfresco/adf-core'; @Component({   selector: 'app-test',   templateUrl: './test.component.html',   styleUrls: ['./test.component.scss'] }) export class TestComponent implements OnInit {   folderId: string = null;   constructor(     private nodesService: NodesApiService,     private logService: LogService,   ) {   }   ngOnInit() {     this.nodesService.getNode('-my-').subscribe(       (node) => {         this.folderId = node.id;       },       (error) => {         this.logService.error(error);       }      );  } }

• Paste the following code in the component template:
  

  test.component.html
  <adf-toolbar>   <adf-upload-button     [rootFolderId]="documentList.currentFolderId"     [adf-node-permission]="'create'">   </adf-upload-button> </adf-toolbar> <adf-document-list   #documentList   [currentFolderId]="folderId"> </adf-document-list>

Best regards,

David.

[dvuika]

Good article to get more details: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbee... 

Please note that you won't see this error in production mode. So while it is definitely good to eliminate it over time for "clean" results, it should not block you from working on other features.