[ionic v4 - angular] - iPhone X don't show header and tabs correctly (missing safe area)

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.1 (/Users/u007240/.npm-packages/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

System:

   NodeJS : v10.7.0 (/usr/local/Cellar/node/10.7.0/bin/node)
   npm    : 6.2.0
   OS     : macOS High Sierra

Describe the Bug Every starter came without padding for the safe area in iPhone X for the Notch.

Steps to Reproduce Steps to reproduce the behavior:

1. ionic start myApp [tabs|menu|blank] --type=angular

[SoulOnFire]

@mswilson4040 this could be in fact something not related with ionic but in fact if we do any of the start templates in ionic 3 removing "–type=angular " ionic start myApp [tabs|menu|blank] all works as expected. Some of the apps in the market are incompatible with iPhone X because are created before ionic have iOS 11 support.

In order to resolve this issue I add the following css to the global.scss

body {
    background-color: var(--ion-color-primary);
}
ion-app {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom)
}

[gabrielmaldi]

This is now fixed in beta.3.