Angular 10: Animations not functioning correctly on initial page load

Hi, I’ve run into an interesting bug when on initial page load it seems that animations on node deletion are disabled. Interestingly, after I refresh the page the animations are functioning properly. In both cases even if the animations are not working the nodes will still move to the target location.

This is likely a strange Angular behavior on my end but I wanted to post the behavior here just in case it is GoJS that is causing the problems.

This is the same diagram from my previous post here:

Any insight into what could be causing this would be appreciated.


What happens (i.e. what do you do and what gets executed) when you “refresh the page”?

Good Morning!

I tested two different scenarios:
(1) I navigated to a different page and back to the Visual
(2) I press F5 and the page fully resets

(1) When I navigated to a different page and back the GoJS visual was still functioning where I could move nodes and delete them. Upon deletion the visual changes properly but instead of the change happening gradually with an animation it happens instantly.

(2) When the page fully resets the visual functions normally. Nodes can still be moved and deleted but when a node is deleted the gradual change/move of the nodes as the visual adjusts occurs.

Note: Scenario 1 also reflects the behavior of the website on first load after the website is compiled with “ng serve”

If you set a trace point in your initDiagram code, can you notice a difference in when it is called depending on how you refresh the page? I’m wondering if the component is being re-rendered or not in some circumstances.

I think I just figured out the error. Let me double check and Ill send the details.

public ngAfterViewInit() {
        if (this.observedDiagram) return;
        this.observedDiagram = this.myDiagramComponent.diagram;
        this.cdr.detectChanges(); // IMPORTANT: without this, Angular will throw ExpressionChangedAfterItHasBeenCheckedError (dev mode only)

        const appComp: ComponentName = this;
        // listener for inspector
        this.myDiagramComponent.diagram.addDiagramListener('ChangedSelection', function (e) {
            if (e.diagram.selection.count === 0) {
                appComp.selectedNode = null;
            const node = e.diagram.selection.first();
            if (node instanceof go.Node) {
                appComp.selectedNode = node;
            } else {
                appComp.selectedNode = null;

        //setTimeout(() => {
        //    this.generateData()

    } // end ngAfterViewInit

If you look at the bottom couple lines here I am calling a data generation function to add information to the diagram Node and Link data. The function forces an update by setting the following flag to be false:

this.myDiagramComponent.skipsDiagramUpdate = false

I encapsulate everything in a timeout so that the Diagram can finish loading before the data is generated to somewhat simulate an API call for the data. When I removed that segment everything worked properly on the first page load.

Im guessing there is a different way that I should approach this?

You can call Diagram.delayInitialization if you want to pretend to do a new initialization again but without replacing the Diagram.model.

Looks like using Diagram.delayInitialization instead of setTimeout resolved the issue.