Getting "ej.navigations is undefined" error

Question

I'm getting getting "ej.navigations is undefined" error when I'm using "https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.js"

When I try to use "https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" I get this error "Uncaught TypeError: r is undefined"

But everything works when I use "https://cdn.syncfusion.com/ej2/dist/ej2.min.js"

Since ej2 in itself is a big file I'm trying to only use the resources I need. I'm loading the js in the following order

And my usage for the ej.navigations is something like

modifierTree = new ej.navigations.TreeView({
        fields: { id: 'nodeId', text: 'nodeText', child: 'nodeChild' },
        showCheckBox: true,
        nodeChecked: function() {
            if (!modifierCheckedAuto) {
                updateGraph();
            }
        },
    });

Thank you in advance for the help

Sowmiya Padmanaban · Accepted Answer

Hi Sudipta Biswas, Greetings from Syncfusion support. We have checked your reported issue with TreeView component and found that dependent package are not properly defined in your application. So, your reported problem occurs. Please, refer the below link for dependent package for TreeView component. Please, refer the sample link below. https://www.syncfusion.com/downloads/support/forum/164718/ze/treeview-1049229353.zip Please, refer to the below links for TreeView component. UG Documentation- https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started/ Demo link- https://ej2.syncfusion.com/javascript/demos/#/material/treeview/default.html API reference- https://ej2.syncfusion.com/javascript/documentation/api/treeview/ Please let us know, if you need any further assistance. Regards, Sowmiya.P

Sudipta Biswas · Answer

Thank You so much for the quick response, adding in the additional dependencies solved my problem.

I was using a custom js generated by CRG EJ2 with the following setting

{
    "components": [
        "button",
        "check-box",
        "treeview"
    ],
    "minified": "true",
    "themes": [
        "material"
    ],
    "version": "19.1.56",
    "name": "ej2.custom",
    "isMinified": true,
    "injectables": {}
}

This worked great for me, Since I do not have CDN for my site. I thought of using the individual components. Then ran into this issue. While the individual components work great after resolving the dependencies issues. The total size still exceed the custom js. Out of curiosity I just wanted to know why is that so. I've added some screenshots.

Attachment: screenshots_ac82fba2.zip

Shalini Maragathavel · Answer

Hi Sudipta,   
  
Thanks for the update.We checked your query and would like to let you know that the navigation files have group of components (i.e, TreeView, Toolbar, Sidebar…) this is the reason for the large size of the script file while referring the CDN individual dependencies in the application. In CRG, we have used tree shaking functionality in order to reduce the file size (i.e, it contains only the required component script files). 
  
Please let us know, if you have any concerns. 
  
Regards,   
Shalini M.