Broken Leaflet 1.0.2 map for basic ionic2 app

LeafletJS - 1.0.2 Chrome 54.0.2840.98 / Safari 10.0.1 (12602.2.14.0.7) Mac Sierra 10.12.1

Expecting to see a good map, getting weird tile assembly , incoherent, with gaps between tiles and and shuffled around tiles. I observed it with all map sources I tried.

I added a new page to my ionic2 blank page project

ionic start myBlank blank --v2 
cd myBlank

npm install leaflet --save
npm install @types/leaflet --save

ionic g page custom-view

Code in two new files custom-view.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as Leaflet from 'leaflet';

/*
  Generated class for the CustomView page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'custom-view',
  templateUrl: 'custom-view.html'
})
export class CustomViewPage {

  private map: any;

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap(){
    this.map = Leaflet.map('map').setView([32, -120], 14);
    Leaflet.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {attribution:""}).addTo(this.map);
  }

}

custom-view.html

<ion-header>

  <ion-navbar>
    <ion-title>custom-view</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
   <div id="map" style="width: 100%; height: 100%"></div>
</ion-content>

[auronsan]

Oh I got the problem just need import css on your src/index.html

if not imported css will looks like this

after I include it <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />on src/index.html

[AIRUNGU]

<ion-app></ion-app>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>

The above code actually works, just make sure they are below the <ion-app></ion-app> tags