Angular block Ui 0.2.2 showing an error "Cannot read property 'blockUI' of null"

Question

I have added Angular block Ui 0.2.2 version but it is not working. It shows error:

Cannot read property 'blockUI' of null

Error in console

Code

sampleclick()  
{
    this.blockUI.start("My custom message");
    this.$timeout(function()
    {
        this.blockUI.stop(); 
    }, 2000);
}

I am using angular 1.5

You must show us more code. It seems that your code is bundled, maybe you forgot something in your bundler configuration, or in your dependencies injection — Zooly, Jan 23 '18 at 13:36
"dependencies": { "angular": "~1.5.0", "angular-animate": "~1.5.0", "angular-aria": "~1.5.0", "angular-block-ui": "^0.2.2", } Here i have imported the package in my app.js File as given below import ngAria from 'angular-aria'; import blockUI from 'angular-block-ui'; import ngResource from 'angular-resource'; then i have injected blockUI as dependeny angular.module('app', [ uiRouter, ngAnimate, ngCookies, ngTouch, uiSelect, ngSanitize, ngMessages, ngAria, blockUI ]) — A_S, Jan 24 '18 at 05:13

score 0 · Answer 1 · answered Jan 23 '18 at 13:40

0

The problem is very likey in the timeout function:

this.$timeout(function() {
  this.blockUI.stop();
}, 2000);

You are using this within the inner anonymous function scope. There are two ways of solving this:

Use Arrow function (ES6)

this.$timeout(() => {
  this.blockUI.stop();
}, 2000);

Declare the outer scope as variable:

sampleclick() {
  var that = this;

  that.blockUI.start("My custom message");
  that.$timeout(function() { 
    that.blockUI.stop();
  }, 2000); 
}

answered Jan 23 '18 at 13:40

scipper

2,944
3
22
45

i changed ma code to lambda function that error is cleared but still the Ui blocker not working – A_S Jan 24 '18 at 05:02
to solve this, we definitely need some more code. especially according to the blocker – scipper Jan 24 '18 at 06:08
Yes .. I have added angular block UI 0.2.2 using npm after all i get these thing in my code "dependencies": { "angular": "~1.5.0", "angular-animate": "~1.5.0", "angular-aria": "~1.5.0",** "angular-block-ui": "^0.2.2"** } Here i have imported the package in my app.js File as given below import ngAria from 'angular-aria';** import blockUI from 'angular-block-ui';** import ngResource from 'angular-resource'; then i have injected blockUI as dependeny angular.module('app', [ uiRouter, ngAnimate, ngCookies, ngTouch, uiSelect, ngSanitize, ngMessages, ngAria, **blockUI **]) – A_S Jan 24 '18 at 09:12
I ment, you should add, for example, the component controller in general or at least the constructor – scipper Jan 24 '18 at 09:13
class GeographicDefinitionCtrl { constructor( $q, commonSrv, countriesSrv, statesSrv, $window, $timeout, $uibModal, CommonApiSrv,blockUI) { this.$window = $window; this.blockUI=blockUI; this.$timeout=$timeout; sampleclick() { this.blockUI.start("My custom message"); this.$timeout(() => { this.blockUI.stop(); }, 2000); } } export default GeographicDefinitionCtrl; – A_S Jan 24 '18 at 09:25
are you calling the `sampleclick` function from your template? If yes, paste that line too, please. – scipper Jan 24 '18 at 09:27
– A_S Jan 24 '18 at 09:30
Ah! You defined the `sampleclick` function in your constructor. This might be the problem. Remove it from the constructor in declare it as a class function like: `class GeographicDefinitionCtrl { constructor(...) {} sampleclick() {...} }` – scipper Jan 24 '18 at 09:32
And you missed a closing `}` right before `export default GeographicDefinitionCtrl;` – scipper Jan 24 '18 at 09:34
then how can i block my ui from a function which is defined inside the constructor? – A_S Jan 24 '18 at 09:35
assign it to this as well: `constructor(...) { this.sampleclick() {} }` – scipper Jan 24 '18 at 09:36
that was only a fraction of code that i have written in my controller only for your reference. that is a working template and i have to block ui once the controller is pinging with the server using ajax requeasts – A_S Jan 24 '18 at 09:38
written this sampleclick function for testing whether Blocker is working or not – A_S Jan 24 '18 at 09:40
I can't follow you. If this is not the working code, how could I find out, whats not working in your production code? – scipper Jan 24 '18 at 09:41
i need to block my UI once a server request is initiated until i get a response from server – A_S Jan 24 '18 at 09:44
It often help, if you try to produce a working fiddle (https://jsfiddle.net/). Most problems solve if you try to reproduce them in a different environment. – scipper Jan 24 '18 at 09:44

Angular block Ui 0.2.2 showing an error "Cannot read property 'blockUI' of null"

1 Answers1