Leaflet breaks on load - leaflet

Question

I am facing issue with leaflet library. When I try to load map, images are loaded more then once. I am using leaflet with angular, grunt and browserify. I suspect it can be because of order of loading libraries and async execution, but I am not sure. There is no js error messages, leaflet just breaks.
This is my grunt file:
var $ = require('jquery');
window.jQuery = $;
//require boostrap.js for bootstrap components
var angular = require('angular');
require('ui.bootstrap');
require('showErrors');
require('leaflet');
require('leaflet-directive');
angular.module('common', [
require('angular-resource')
]);
var requires = [
'ngRoute',
'leaflet-directive',
'common',
'ui.bootstrap',
'ui.bootstrap.showErrors'
];
require('./common');
angular.module('app', requires).config(function($routeProvider) {
customRouteProvider.when('/common', {templateUrl: 'js/common/1.html'});
customRouteProvider.otherwise({redirectTo: '/'});
});
Html code:
<div ng-controller="mapController">
<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
</div>
mapController:
module.exports = function ($scope, leafletData) {
var map = L.map( 'map', {
center: [20.0, 5.0],
minZoom: 2,
zoom: 2
});
L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors | Tiles Courtesy of MapQuest <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo( map );
}
But when I execute the code leaflet breaks and my map looks like:
I tried also with angular-leaflet-directive with standard and it still breaks. Did anyone face this issue before? Any suggestions?

Answer 1

in your file Html code
test with change style div: height: 80vh;
<div ng-controller="mapController">
<div id="map" style="height: 80vh; border: 1px solid #AAA;"></div>
</div>
And check the initialization the component life cycle:
Angular 6 is ngOnInit.
Ionic is ionViewDidEnter.
The idea is that booklet loading is done after initialization of the component.

Answer 2

This problem often occurs due to resizing of any parent container while the map is already initialized.
This my solution in Angular 12 link

Answer 3

If you are having this issue on Vue3 you need to import the CSS:
<script>
import "leaflet/dist/leaflet.css";