NullInjectorError: No provider for Platform when migrating to ionic 4

Question

I have a big problem when migrating a bought template from ionic 3 to ionic 4. I recreated completely the project and recreated the structure, but it keeps giving these error when starting

This is my app.module

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 { OneSignal } from '@ionic-native/onesignal/ngx';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { FCM } from '@ionic-native/fcm/ngx';
import { Device } from '@ionic-native/device/ngx';
import { Push } from '@ionic-native/push/ngx';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
import { Camera } from '@ionic-native/camera/ngx';
import { Toast } from '@ionic-native/toast/ngx';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { Facebook } from '@ionic-native/facebook/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    OneSignal,
    AppVersion,
    FCM,
    Device,
    Push,
    LocalNotifications,
    InAppBrowser,
    SocialSharing,
    Camera,
    Toast,
    GooglePlus,
    Facebook,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And this is my app.component.ts

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, ModalController, Events } from 'ionic-angular';
import { Storage } from '@ionic/storage';

import { TranslateService } from '@ngx-translate/core';

import { AlertProvider } from './services/alert/alert';
import { LoadingProvider } from './services/loading/loading';
import { trigger, transition, animate, style } from '@angular/animations';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { Http } from '@angular/http';
import { Network } from '@ionic-native/network/ngx';

import { ConfigProvider } from './services/config/config';
import { SharedDataProvider } from './services/shared-data/shared-data';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  public counter = 0;
  @ViewChild(Nav) nav: Nav;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    public translate: TranslateService,
    public shared: SharedDataProvider,
    public alert: AlertProvider,
    public network: Network,
    public config: ConfigProvider,
  ) {
    this.platform.ready().then(() => {

      //this.statusBar.styleDefault();
      this.statusBar.overlaysWebView(true);
      this.statusBar.backgroundColorByName("black");

      this.doubleTapToExit();
    });
    let connectedToInternet = true;
    this.platform.setDir(localStorage.direction, true);
    shared.dir = localStorage.direction;
    //setting default languge on start up 
    translate.setDefaultLang(this.config.url + "applabels3?lang=" + this.config.langId);
    //if(this.config.siteSetting()){
    this.initializeApp();
    //}
    // events.subscribe('showAd', () => {
    //   this.showInterstitial();
    // });
  }

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

}

And this is the main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

I'm really going deep into the question, but I can't seem to find any answer.

Answer 1

error sounds like you forgot to add SplashScreen to your providers at your app.module.ts

...
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

@NgModule({
  ...
  providers: [..., SplashScreen],
})
export class AppModule {}

Answer 2

Since you migrated to ionic 4

This one

import { Nav, Platform, ModalController, Events } from 'ionic-angular'; // this one is ionic 3

Should be

import { Nav, Platform, ModalController, Events } from '@ionic/angular';