Does work in Angular

[dottodot]

Not sure if it just Angular or a general problem but when I call .show() I don't get a loading indicator. Here's my service.

import { Injectable } from '@angular/core';
import { LoadingIndicator } from 'nativescript-loading-indicator';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  options = {
    ios: {
      dimBackground: true
    }
  };
  private loader: LoadingIndicator;
  constructor() {
    this.loader = new LoadingIndicator();
  }

  show() {
    this.loader.show(this.options);
  }

  hide() {
    this.loader.hide();
  }
}

[relez]

What about if you change the constructor to:

constructor(loader: LoadingIndicator) {
    this.loader = loader;
}

I believe Angular is the one who initializes the Injectable objects, so you should get the instance from the constructor.

I hope it works.

[benedictkhoo]

What about if you change the constructor to:

constructor(loader: LoadingIndicator) {
    this.loader = loader;
}

I believe Angular is the one who initializes the Injectable objects, so you should get the instance from the constructor.

I hope it works.

@relez unfortunately setting it this way will not work because LoadingIndicator is not an Angular service. I too am having issues getting it to work in Angular 😢. I noticed that the _getContext() method in loading-indicator.android.ts, line 496 returns undefined if it uses application.android.foregroundActivity, but will return the current Activity if it uses application.android.startActivity. Not sure why though.

@dottodot did you managed to get it working with Angular?

References:

nativescript-loading-indicator/src/loading-indicator.android.ts

Line 496 in 5f0d07f

private _getContext() {

[relez]

Hi @benedictkhoo, I have it working on my angular projects injected in my components, in my app.module.ts I have:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { AppRoutingModule } from "~/app/app-routing.module";
import { SharedModule } from "~/app/shared/shared.module";
import { AppComponent } from "~/app/app.component";

import { LoadingIndicator } from "nativescript-loading-indicator";
...

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        NativeScriptHttpModule,
        AppRoutingModule,
        SharedModule,
        NativeScriptUISideDrawerModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ],
    providers: [
        ...
        LoadingIndicator,
        ...
    ],
})
export class AppModule { }

Then, inside my components, I inject it:

import { LoadingIndicator } from "nativescript-loading-indicator";

@Component({
    selector: "Login",
    moduleId: module.id,
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit, AfterViewInit {
    ...

    constructor(private __loader: LoadingIndicator) {
       
    }
}

This is working fine since day ONE.

I hope it helps.

[benedictkhoo]

Thanks for the quick update @relez ! Didn't thought of setting it up as a provider in an NGModule. Let me try it and get back to you.

[dottodot]

I've now tried all the suggestions and still not seeing a loading indicator.

[bradmartin]

This plugin has now been deprecated and taken over by nStudio, LLC.
https://github.com/nstudio/nativescript-loading-indicator this issue should be fixed and working fine in Angular apps with the new package.

You can install with tns plugin add @nstudio/nativescript-loading-indicator