App Not Working Once on Android Device

Ionic Framework ionic-v3
1

I followed this excellent tutorial on Youtube (https://www.youtube.com/watch?v=3QPbBJgNF94&t=637s) called How to Build Your First Ionic 4 App with API Calls.

After a few hiccups, I got the app working and was all proud of myself for my first Ionic app! Woohoo! I wanted to show one of my coworkers, so I deployed it to my Android phone and tested it. It doesn’t work. It displays, but it doesn’t seem to call the api to the external website to return results.

I tried using some examples on the forums to add the android INTERNET permission, but that didn’t seem to work either. I’m not even sure I did it right since when I look at the app in Android, it says “No permissions requested”

Here’s part of the app.module.ts

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    AndroidPermissions,

    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And the app.component.us

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private androidPermissions: AndroidPermissions
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.androidPermissions.requestPermissions(
          [
            this.androidPermissions.PERMISSION.INTERNET

          ]
      );
    });
  }
}

And the actual call I’m making from the service.ts

export class MovieService {

    url = 'http://www.omdbapi.com/';
    apiKey = 'notMyRealAPIKey';

  constructor(private http: HttpClient) { }

    searchData(title: string, type: SearchType): Observable<any> {
        return this.http.get(`${this.url}?s=${encodeURI(title)}&type=${type}&apikey=${this.apiKey}`).pipe(
            map(results => results['Search'])
        );
    }

    getDetails(id) {
        return this.http.get(`${this.url}?i=${id}&plot=full&apikey=${this.apiKey}`);
    }
}

Any suggestions to help me solve this issue? I’m new so I’m sure I’m missing something… I just don’t know what it is.