1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cannot invoke an object which is possibly 'undefined'

Cannot invoke an object which is possibly 'undefined'

In using Angular 12.0.2 and the diagram component. In my template html file I have:

<ejs-diagram #diagram id="diagram" width="100%" height="580px" (created) = 'created($event)' [getNodeDefaults]='getNodeDefaults' [getCustomTool]='getCustomTool' [selectedItems]='selectedItems' >
</ejs-diagram>


In my component class I have:

  public created(args: Object): void {
    //Add Node
    if (this.diagram) {
      this.diagram.add(this.textNode);
      this.diagram.add(this.imageNode);
      this.diagram.add(this.htmlNode);
      this.diagram.add(this.group);
    }
  }

When I try to compile my project I get the following error:


Build at: 2021-05-30T01:58:32.648Z - Hash: c45e38d248b57599a9d7 - Time: 209ms

Error: src/app/app.component.html:1:201 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

1 <ejs-diagram #diagram id="diagram" width="100%" height="580px" [layout]='layout' [dataSourceSettings]='dataSourceSettings' [getNodeDefaults]='nodeDefaults' [getConnectorDefaults]='connectorDefaults' (created) = 'created($event)' >
                                                                                                                                                                                                          ~~~~~~~

  src/app/app.component.ts:19:16
    19   templateUrl: './app.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


To get past the error I have added the following to my tsconfig.json:


  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictOutputEventTypes": false
  }

This  seems like a bug.

9 Replies 1 reply marked as answer
GG Gowtham Gunashekar Syncfusion Team May 31, 2021 12:26 PM UTC

Hi Anthony, 
 
We have created a diagram with shared information and added some nodes at the created event and found it working fine. We cannot be able to replicate the reported issue at our end. We request you to share with us more details about the reported issue like share a simple sample for replicate the reported issue with replication procedure or replicate the reported issue in the shared sample link, that will help us to serve you better.  
 
 
Regards, 
Gowtham. 


BM Bruno Martens June 23, 2021 06:14 PM UTC

Hi,

You're using Angular 11 in the StackBlitz demo

Think this may be related to either Angular 12 or Typescript 4.2.

I'm having a similar issue with a treeview event:

<div><ejs-treeview id='treeelement' [fields]='fields' (nodeSelected)='treeNodeSelected($event)'></ejs-treeview></div>

throws same error on (nodeSelected)

Could you verify using Angular 12 and Typescript 4.2?


GG Gowtham Gunashekar Syncfusion Team June 24, 2021 01:30 PM UTC

Hi Anthony,  
 
We checked the reported problem but unfortunately we are unable to reproduce it from our end. The created  event in diagram component and the nodeSelected event of TreeView component is working fine in Angular 12 and Typescript 4.2 version. You can check the below sample for reference,  
 

If the issue persists, please share your complete code block or else try reproducing it in the above sample(if possible). So that we can check from our end and provide a prompt solution based on that.  

Please let us know, if you have any concerns.  
 
Regards, 
Gowtham 


Marked as answer
AD adrian July 17, 2021 12:23 AM UTC

Hi,

I was having the same issue with the Grid component. When I added a call to the databound in the HTML then I got the error:

error TS2722: Cannot invoke an object which is possibly 'undefined'.

The way to fix it was to disable TypeScript template strict mode in the tsconfig.json (set 'strictTemplates' to false)

"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": false
}


My question is if there is a way to use the Syncfusion components with TypeScript strict mode enable?
The strict mode is a great feature and I hate to be adding workarounds like using the '!' non-null assertion operator like here:

@ViewChild('accountsGrid') public accountsGrid!: GridComponent;

AR Aravind Ravi Syncfusion Team July 19, 2021 12:03 PM UTC

Hi Adrian, 
 
Currently we does not have full compatibility support for the Syncfusion components in Angular 12. We have already logged feature for this request and it will be included with our Volume 2, 2021 SP release which is tentatively scheduled to release at mid of the august. You can track the status using the below feedback. 
  
 
Regards 
Aravind Ravi 


GG Gowtham Gunashekar Syncfusion Team August 13, 2021 04:09 AM UTC

Hi Adrian,      
 
Sorry for the inconvenience caused . due to complexity of the feature we are not able to include the fix for the Volume 2 SP release We will provide the full compatibility support for the diagram 25th August, 2021, weekly patch release. We appreciate your patience until then.    
   
   
Regards,    
Gowtham.    


GG Gowtham Gunashekar Syncfusion Team August 26, 2021 12:32 PM UTC

Hi Adrian,    
 
We deeply regret the inconvenience caused. Due to the complexity of the feature, we are not able to include the fix in weekly patch release. We will provide full compatibility support for the diagram on the upcoming volume 3 release which is scheduled for the end of September. We appreciate your patience until then.     
 
   
    
Regards,    
Gowtham.    


ZA Zachary August 27, 2021 12:38 AM UTC

What is the workaround?


GG Gowtham Gunashekar Syncfusion Team August 30, 2021 04:03 AM UTC

Hi Adrian,     
  
We deeply regret the inconvenience caused. We don’t have any workaround for compatibility support for Angular 12. We are working on it.  We will provide full compatibility support for the diagram on the upcoming volume 3 release which is scheduled for the end of September. We appreciate your patience until then.      
  
    
     
Regards,     
Gowtham.    



Loader.
Up arrow icon