Search code examples
javascriptangularjssyncfusion

Why does this simple Angularjs using syncfusion throws me the error Uncaught TypeError: Cannot read property 'widget' of undefined

I am relatively new to Angularjs and I am trying to use Syncfusion to implement few diagrams so I started with a simple code using the angularjs CDN provided in their website. But it throws me error. I am not sure what I am doing wrong. I could not find any post related to similar thing in SO or in Syncfusion forum. Can anyone please help me? I am really sorry if incase this is duplicate

This the help doc from their website: Help DOC Syncfusion AngularjS

This is the CDN links page: https://help.syncfusion.com/js/cdn#gsc.tab=0

Following is the code:

<!DOCTYPE html>
<html ng-app="DateCtrl">
<head>
    <title>Testing EJAngular</title>
        <!--jQuery Starts-->
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
        <!--jQuery Ends-->
        
        <!-- Angularjs CDN Starts -->
        <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
        <!-- Angularjs CDN Ends -->
        
        <!--EJ Angular Starts-->
        <script src="http://cdn.syncfusion.com/18.2.0.44/js/common/ej.widget.angular.min.js"></script>
        <!--EJ Angular ENDS -->
    </script> 
</head>
<body ng-controller="DatePickerCtrl"> 
    <!--Container for ejDatePicker widget-->
    <input id="datepick" ej-datepicker e-value="dateValue" e-enableStrictMode="true" />
    
    <script type="text/javascript">
        var DateCtrl    =   angular.module('DateCtrl', ['ejangular'])
        
        DateCtrl.controller('DatePickerCtrl', function ($scope) {
            $scope.dateValue = "2/3/2013";
        });
    </script>
</body>
</html>

Error Messages from console:

Solution

  • Posting this answer as it maybe useful for someone in the future. Few more CDN needs to be added. Here is all CDN:

    <link href="http://cdn.syncfusion.com/18.2.0.44/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/18.2.0.44/js/web/ej.web.all.min.js"></script> 

<!-- Angularjs CDN Starts -->
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<!-- Angularjs CDN Ends -->

<!--EJ Angular Starts-->
<script src="http://cdn.syncfusion.com/18.2.0.44/js/common/ej.widget.angular.min.js"></script>
<!--EJ Angular ENDS -->