Angular 6 - How to apply external css stylesheet (leaflet) at component level?

Question

Trying to use Leaflet in an Angular 6 component. Depending on how the css file is linked, the map shows ok or is messed up, there are missing tiles not in the right order, which

Answer 1

Ok, here's what worked (thanks @Palsri, I read once more the blog post and the Angular styling guidelines and tried the following, which worked):

In a separate css file, import the leaflet css:

// map.component.css
@import url("../assets/lib/leaflet/leaflet.css");

.mapstyle {
    width: 100%;
    height:100%;
};

Then in the component, reference this css instead of the leaflet css as follows:

@Component({
    templateUrl: "./map.component.html",
    selector: "app-map",
    styleUrls: ["./map.component.css"],
    encapsulation: ViewEncapsulation.None
})

Here's the code in the html template:

One more thing: for the height % to work, you need to define the parents size, which I currently did in the index.html as follows:

Hope this helps.