LoadingController not injected in the component and remains undefined

Ionic Framework
1

I have this strange situation where I don’t understand why the LoadingController is not injected.
this is my code:

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor( private loadingController: LoadingController) {
  }

  ngOnInit() {
    this.showLoading(true);
  }

  showLoading(show: boolean) {
      this.loadingController.create({
        message: "Login...",
        animated: true,
        spinner: "circles",
        duration: 5000
      }).then(loadEl => {
        if (show) {
          loadEl.present().then();
        } else {
          loadEl.dismiss().then()
        }
      });
    }
}

When I run my app I have this error:

ERROR TypeError: Cannot read properties of undefined (reading 'create')
    at SafeSubscriber.showLoading [as _next] (login.page.ts:61)

LoadingController is undefined, what am I doing wrong?
Thanks

2

Hmm, can you put this into a quick demo app? Trying this localy I cannot replicate

3

Right, I’ll do it tomorrow it’s 9:30pm here :grin: ! Do I need to import anything special in the LoginModule? Currently IonicModule is well imported so I don’t understand where the issue comes from.

4

That should be all you need, but without more context, it’s hard to know

5

I don’t see the point of the show == false code path of showLoading. Why create a loading indicator just to murder it before it is ever presented?

6

It’s just a snippet to show the principle. In my app the boolean comes from an Observable.
@mhartington I tried to reproduce the issue in a sample app with the same folder structure but I can’t, sadly the LoadingController is well injected, I have to find the reason it is not injected in my real app! :unamused:

7

@mhartington I finaly found the cause of my issue, it’s due to my lack of JS understanding.
I used the showLoading method in an observable as a function reference, something like:

ngOnInit() {
   myBooleanObservable$.subscribe(this.showLoading);
  }

Replacing that line by:

ngOnInit() {
   myBooleanObservable$.subscribe(this.showLoading.bind(this));
  }

solved the issue.
I am a Java developer trying to build an Ionic app with Angular.

8

Hi there

I am not an expert on js but I wouldn’t use bind in this case

Would use a fat arrow function:

Subscribe(()=>{doWhateverStuff})

Maybe a bit more readable and reusable

Doesnt bind(this) require you to look somewhere else what will be done as a result of an item on the stream. ?

9

I guess that bind(this), the this in this context refers to the LoginPage class.

10

Yes
And in this case it looks pretty concise

You would use bind as well for the error and final handler of a stream (if relevant?)

Something like subscribe(bind(this),bind(this),bind(this))? Would that work?

11

Yes it would work. If the method has the expected signature, it would work.

12

Can’t say it looks particularly pretty :grinning: