how to use ng-croppie without npm?

I have to implement the ng-croppie (i.e;not by installing npm).So, I have taken js and css files of ng-croppie,but it is not working.

Here is the code that I used for ng-croppie implemenrtation.

HTML:

<ng-croppie src="inputImage"
                ng-model='outputImage'>
    </ng-croppie>

    <!-- WITH OPTIONS -->
    <ng-croppie src="inputImage"
                ng-model='outputImage'
                update='onUpdate'
                boundry="{w: 400, h: 400}"
                viewport="{w: 300, h:300}"
                mousezoom="true"
                zoom="true"
                type="circle">
    </ng-croppie>

JAVA SCRIPT:

      var app = angular.module('myApp',[]);
     app.controller('basicController', ['$scope', function ($scope) {

      $scope.inputImage = null;
      $scope.outputImage = null;
      $scope.onUpdate = function (data) {
        //console.log(data)
      }
       }]);
        app.directive('ngCroppie', [function ($compile) {
         return {
          restrict: 'AE',
          scope: {
            src: '=',
            rotation: '=',
            viewport: '=',
            boundry: '=',
            type: '@',
            zoom: '@',
            mousezoom: '@',
            zoomslider: '@',
            exif: '@',
            orientation: '@',
            update: '=',
            ngModel: '='
        },
          link: function (scope, elem, attr) {
            // defaults
            if (scope.viewport == undefined) {
                scope.viewport = { w: null, h: null };
            }
            if (scope.boundry == undefined) {
                scope.boundry = { w: null, h: null };
            }

            // catches
            scope.viewport.w = (scope.viewport.w != undefined) ? 
           scope.viewport.w : 300;
            scope.viewport.h = (scope.viewport.h != undefined) ? 
          scope.viewport.h : 300;
            scope.boundry.w = (scope.boundry.w != undefined) ? scope.boundry.w : 
           400;
            scope.boundry.h = (scope.boundry.h != undefined) ? scope.boundry.h : 
            400;

            // viewport cannot be larger than the boundaries
            if (scope.viewport.w > scope.boundry.w) {
                scope.viewport.w = scope.boundry.w
            }
            if (scope.viewport.h > scope.boundry.h) {
                scope.viewport.h = scope.boundry.h
            }

            // convert string to Boolean
            var zoom = (scope.zoom === 'true' || typeof scope.zoom == 
          'undefined'),
                mouseZoom = (scope.mousezoom === 'true' || typeof 
              scope.mousezoom == 'undefined'),
                zoomSlider = (scope.zoomslider === 'true' || typeof 
             scope.zoomslider == 'undefined');

            // define options
            var options = {
                viewport: {
                    width: scope.viewport.w,
                    height: scope.viewport.h,
                    type: scope.type || 'square'
                },
                boundary: {
                    width: scope.boundry.w,
                    height: scope.boundry.h
                },
                enableZoom: zoom,
                mouseWheelZoom: mouseZoom,
                showZoomer: zoomSlider,
                enableExif: scope.exif,
                enableOrientation: scope.orientation
            };

            if (scope.update != undefined) {
                options.update = scope.update;
            }

            // create new croppie and settime for updates
            var c = new Croppie(elem[0], options);
            // get Croppie elements for further calculations
            var croppieBody = angular.element(elem[0])[0];
            var croppieCanvas = 
          angular.element(elem[0].getElementsByClassName('cr-boundary'))[0];

            var intervalID;

            var croppieCanvasRectangle = croppieCanvas.getBoundingClientRect();

            // initialize interval only if action regitered within ngCroppie 
            container
            croppieBody.addEventListener("mousedown", function () {
                intervalID = window.setInterval(function () {
                    c.result('canvas').then(function (img) {
                        scope.$apply(function () {
                            scope.ngModel = img;
                        });
                    });
                }, 250);
            }, false);

            // check mouseZoom property to avoid needless event listener initialization
            if (mouseZoom) {
                // separated "wheel" event listener to prevent conflict with Croppie default "wheel" event listener
                croppieBody.addEventListener('wheel', function (evt) {
                    console.log('Wheel event called');
                    evt.preventDefault();
                    if ((evt.clientX > croppieCanvasRectangle.left) && (evt.clientX < croppieCanvasRectangle.right) && (evt.clientY < croppieCanvasRectangle.bottom) && (evt.clientY > croppieCanvasRectangle.top)) {
                        c.result('canvas').then(function (img) {
                            scope.$apply(function () {
                                scope.ngModel = img;
                            });
                        });
                    }
                }, false);
            }

            // destroy all created intervals
            croppieBody.addEventListener('mouseup', function () {
                clearInterval(intervalID);
            }, false);
            croppieBody.addEventListener('mouseleave', function () {
                clearInterval(intervalID);
            }, false);
            croppieBody.addEventListener('mouseout', function () {
                clearInterval(intervalID);
            }, false);

            scope.$on('$destroy', function (event) {
                clearInterval(intervalID);
            });

            // image rotation
            scope.$watch('rotation', function (newValue, oldValue) {
                if (scope.orientation === 'false' || scope.orientation == 
        undefined) {
                    throw 'ngCroppie: Cannot rotate without \'orientation\' 
          option';
                } else {
                    c.rotate(newValue - oldValue);
                }
            });

            // respond to changes in src
            scope.$watch('src', function (newValue, oldValue) {
                if (scope.src != undefined) {
                    c.bind(scope.src);
                    c.result('canvas').then(function (img) {
                        scope.$apply(function () {
                            scope.ngModel = img;
                        });
                    });
                }
            });
        }
    };
     }]);

Iam getting this type of error:

Any help would be appreciated.

via bpbsr