bug: black screen - conn to server unsuccessful - then loads

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Can’t launch app I get a pop up saying

Application Error
The connection to the server was unsuccuessful. (http://localhost:8100)

the application launches shortly after the popup shows up. Like there is some massive delay somewhere. What’s strange is that this happened out of no where, there hasn’t been any changes to the app that would merit this.

Expected behavior:

to launch without issues Steps to reproduce:

Related code:

There is no console errors or build errors. It says Run Successful and then it loads with a black screen, stays that way for about 5 seconds, the pop up shows, and then the app loads.

I know it’s not a lot to go off of but this is all the information that I can provide at the moment

Other information:

I’m also getting messages in the console

ion-menu_4-md.entry.js:78 [DEPRECATED][ion-menu] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
  <ion-menu>...</ion-menu>
  <div main>...</div>

AFTER:
  <ion-menu contentId="my-content"></ion-menu>
  <div id="my-content">...</div>

connectedCallback @ ion-menu_4-md.entry.js:78
safeCall @ core-57385ee8.js:1242
fireConnectedCallback @ core-57385ee8.js:1683
initializeComponent @ core-57385ee8.js:1650
ion-split-pane-md.entry.js:46 [DEPRECATED][ion-split-pane] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
  <ion-split-pane>
    ...
    <div main>...</div>
  </ion-split-pane>

AFTER:
  <ion-split-pane contentId="main-content">
    ...
    <div id="main-content">...</div>
  </ion-split-pane>

and this is my app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu class="dark">
      <ion-header class="ion-text-center dark" no-border>
        <ion-toolbar color="dark">
          <ion-title item-center class="dark ion-text-center">
            <img src="assets/company-logo.svg" alt="imagen de la compañia" />
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="dark">
        <ion-list class="dark" lines="none" mode="ios">
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" color="dark">
              <ion-icon slot="start" [src]="p.icon"></ion-icon>
              <ion-label>
                {{ p.title }}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2 (/Users/christian/.config/yarn/global/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.2
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.3.8
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 18 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.8.0)
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   ios-sim : 8.0.2
   NodeJS  : v12.7.0 (/usr/local/lib/node_modules/node/bin/node)
   npm     : 6.11.3
   OS      : macOS Mojave
   Xcode   : Xcode 10.3 Build version 10G8

[ctfrancia]

I solved the error by just removing the platform and node modules and re installing node modules and rebuilding the platform. As for that warning @vagnersabadi checkout this post #19618

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.