Ionic lab screen see black at the android, ios screen


*pp.module.ts
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;

import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { HttpClientModule } from ‘@angular/common/http’;
@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts

import { NgModule } from ‘@angular/core’;
import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [
{ path: ‘’, redirectTo: ‘movies’, pathMatch: ‘full’ },
{ path: ‘movies’, loadChildren: ‘./pages/movies/movies.module#MoviesPageModule’ },
{ path: ‘movie/:id’, loadChildren: ‘./pages/movie-details/movie-details.module#MovieDetailsPageModule’ },
];

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }

movie.service.ts

import { HttpClient } from ‘@angular/common/http’;
import { Injectable } from ‘@angular/core’;
import { Observable } from ‘rxjs’;
import { map } from ‘rxjs/operators’;

export enum SearchType {
all = ’ ',
movie = ‘movie’,
series = ‘series’,
episode = ‘episode’,
}

@Injectable({
providedIn: ‘root’
})
export class MovieService {
url = ‘http://www.omdbapi.com/’;
apikey = ‘a39fbbdc’;
constructor(private http: HttpClient) { }

searchData(title: string, type: SearchType): Observable {
return this.http.get(’{this.url}?s={encodeURI(title)}&type={type}&apikey={this.apiKey}’)
.pipe(
map(results => {
console.log('RAW: ', results);
return results[‘Search’];
})
);
}

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

movies.page.ts

import { Component, OnInit } from ‘@angular/core’;
import { Observable } from ‘rxjs’;
import { MovieService, SearchType } from ‘…/…/services/movie.service’;
@Component({
selector: ‘app-movies’,
templateUrl: ‘./movies.page.html’,
styleUrls: [’./movies.page.scss’],
})
export class MoviesPage implements OnInit {

results: Observable;
searchTerm = ‘’;
type: SearchType = SearchType.all;
constructor(private movieSerivce: MovieService) { }

ngOnInit() {
}

searchChanged(){
this.results = this.movieSerivce.searchData(this.searchTerm, this.type);

}
}

movies.page.html

movies {{ item.Title}}

When you’re inspect the code point any error?

There is no error when you type ionic serve or ionic lab at the command prompt.