topic Re: Error with a combination of adf-document-list & adf-upload-button in Alfresco Forum

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

d_moeyersons — Tue, 10 Jul 2018 08:56:14 GMT

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"

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

eugenio_romano — Tue, 10 Jul 2018 09:40:58 GMT

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

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

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

d_moeyersons — Tue, 10 Jul 2018 12:11:26 GMT

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,
   }

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); } ); } }

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>

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.

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

dvuika — Tue, 10 Jul 2018 12:20:49 GMT

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

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.