Search code examples
angularjsgulphygieia

Can't find view of undefined in angular js, module is defined


I'm trying to add a widget to the Hygieia project on github. When I add the widget to the page, it doesn't display and I get this error:

TypeError: Cannot read property 'view' of undefined
    at link (http://localhost:3000/app/dashboard/directives/widget.js:49:64)
    at http://localhost:3000/bower_components/bower.js:9682:44
    at invokeLinkFn (http://localhost:3000/bower_components/bower.js:9688:9)
    at nodeLinkFn (http://localhost:3000/bower_components/bower.js:9198:11)
    at delayedNodeLinkFn (http://localhost:3000/bower_components/bower.js:9446:11)
    at compositeLinkFn (http://localhost:3000/bower_components/bower.js:8547:13)
    at compositeLinkFn (http://localhost:3000/bower_components/bower.js:8550:13)
    at compositeLinkFn (http://localhost:3000/bower_components/bower.js:8550:13)
    at compositeLinkFn (http://localhost:3000/bower_components/bower.js:8550:13)
    at compositeLinkFn (http://localhost:3000/bower_components/bower.js:8550:13) <widget name="aws-status" class="ng-isolate-scope">

I have modeled all the code I have added after the code that already exists for similar modules, but for some reason the widget won't display on the page. Here is where I'm declaring the module, let me know if you need to see any other code sections to determine what I am doing wrong:

(function () {
    'use strict';

    var widget_state,
        config = {
            view: {
                defaults: {
                    title: 'AWS Status' // widget title
                },
                controller: 'awsStatusViewController',
                controllerAs: 'ctrl',
                templateUrl: 'components/widgets/awsstatus/view.html'
            },
            config: {
                controller: 'awsStatusConfigController',
                controllerAs: 'ctrl',
                templateUrl: 'components/widgets/awsstatus/config.html'
            },
            getState: getState
        };

    angular
        .module(HygieiaConfig.module)
        .config(register);

    register.$inject = ['widgetManagerProvider', 'WidgetState'];
    function register(widgetManagerProvider, WidgetState) {
        widget_state = WidgetState;
        widgetManagerProvider.register('aws-status', config);
    }

    function getState(widgetConfig) {
        return HygieiaConfig.local ?
            widget_state.READY :
            (widgetConfig.id ? widget_state.READY : widget_state.CONFIGURE);
    }
});

Solution

  • I've discovered I was missing 2 parentheses at the end of my file. Without these, it appears the code was never executing.

    The correct code looked like this:

    (function () {
        'use strict';
    
        var widget_state,
            config = {
                view: {
                    defaults: {
                        title: 'AWS Status' // widget title
                    },
                    controller: 'awsStatusViewController',
                    controllerAs: 'ctrl',
                    templateUrl: 'components/widgets/awsstatus/view.html'
                },
                config: {
                    controller: 'awsStatusConfigController',
                    controllerAs: 'ctrl',
                    templateUrl: 'components/widgets/awsstatus/config.html'
                },
                getState: getState
            };
    
        angular
            .module(HygieiaConfig.module)
            .config(register);
    
        register.$inject = ['widgetManagerProvider', 'WidgetState'];
        function register(widgetManagerProvider, WidgetState) {
            widget_state = WidgetState;
            widgetManagerProvider.register('aws-status', config);
        }
    
        function getState(widgetConfig) {
            return HygieiaConfig.local ?
                widget_state.READY :
                (widgetConfig.id ? widget_state.READY : widget_state.CONFIGURE);
        }
    })();