Thingsboard Dashboard Custom Action NullInjectorError

Question

I try to configure Custom action for “On row click ”, but both Firefox and Chromium fails with NullInjectorError. I don't know how to locate root problem and fix it.

Even if I repeat "ThingsBoard Dashboard development guide. Part 2" video tutorial code example (code on video: https://youtu.be/mqWEGs1Z2BQ?t=589) it fails with the same error.

My code:

var $injector = widgetContext.$scope.$injector;

$injector.get('deviceService').getDevice(entityId.id).then(function(device){
    if(device.type == 'energy sensor'){
        openDashboardState('energy_state');
    } else if(device.type == 'water sensor'){
        openDashboardState('water_state');
    } else if(device.type == 'temperature sensor'){
        openDashboardState('temperature_state');
    } else {
        // fallback here if I mistaken with device.types
        openDashboardState('temperature_state');
    }
});

function openDashboardState(stateId){
    var params = {
        entityId: entityId,
        entityName: entityName
    };

    widgetContext.stateController.openState(stateId, params, false);
}

My error from Chromiun:

NullInjectorError: R3InjectorError(e)[deviceService -> deviceService -> deviceService -> deviceService]: 
  NullInjectorError: No provider for deviceService!
    at e.get (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:692603)
    at e.get (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:764401)
    at e.get (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:764401)
    at e.get (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:764401)
    at e.get (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:764401)
    at t.get (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:862099)
    at Object.get (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:846305)
    at Qn (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:706656)
    at e.get (http://my-server-addr:8880/polyfills.e5ed3e112692f855567f.js:1:708213)
    at eval (eval at e.handleWidgetAction (http://my-server-addr:8880/1.22c948d0d38c2bc05630.js:1:584011), <anonymous>:5:11)
e.handleWidgetAction @ 1.22c948d0d38c2bc05630.js:1
e.onRowClick @ 1.22c948d0d38c2bc05630.js:1
e_mat_row_25_Template_mat_row_click_0_listener @ template.html:87
gl @ polyfills.e5ed3e112692f855567f.js:1
i @ polyfills.e5ed3e112692f855567f.js:1
(anonymous) @ polyfills.e5ed3e112692f855567f.js:1
e.invokeTask @ polyfills.e5ed3e112692f855567f.js:1
onInvokeTask @ polyfills.e5ed3e112692f855567f.js:1
e.invokeTask @ polyfills.e5ed3e112692f855567f.js:1
t.runTask @ polyfills.e5ed3e112692f855567f.js:1
t.invokeTask @ polyfills.e5ed3e112692f855567f.js:1
h @ polyfills.e5ed3e112692f855567f.js:1
f @ polyfills.e5ed3e112692f855567f.js:1

Answer 1

I checked the same problem. and I found a solution.

var $injector = widgetContext.$scope.$injector;

$injector.get(widgetContext.servicesMap.get('deviceService')).getDevice(entityId.id).subscribe(function(device) {
        if (device.type == 'energy sensor') {
            openDashboardState('energy_state')
        }
        else if(device.type == 'water sensor') {
            openDashboardState('water_state')
        }
        else {
            openDashboardState('temperature_state')
        }
});

function openDashboardState(stateId) {
    var params = {
        entityId: entityId,
        entityName: entityName
    }

    widgetContext.stateController.openState(stateId, params,
        false);
}

I hope it helped you. Good luck! :)