FileLayer with Angular4

Hello,

I’m having trouble using the FileLayer extension with my angular4 application.

I got this error leaflet__.Control.fileLayerLoad is not a function.

The script leaflet.filelayer.js, is well executed in my project. I tried to console.log the L object a the end of the script and the propertie FileLayer is well added to the the L object. But when I try to use it in a component of my application, I still have the same error leaflet__.Control.fileLayerLoad is not a function. When I console.log L in my component, the propertie FileLayer is not present anymore. I also try to log window.L… same behaviour.

Here is my code:

in leaflet.filelayer.js:

    L.Control.FileLayerLoad = FileLayerLoad;
     L.Control.fileLayerLoad = function(options) {
       return new L.Control.FileLayerLoad(options);
     };
   }, window);

   console.log(L);

in my app component:

import { Component, Input, OnInit,
![from_component](https://user-images.githubusercontent.com/15265745/43597849-8a799d8c-9683-11e8-8142-a25fc1e35910.png)
 } from "@angular/core";
import { MapService } from "./map.service";
import { Map } from "leaflet";
import * as L from "leaflet";

@Component({
  selector: "pnx-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"],
  providers: [MapService]
})
export class MapComponent implements OnInit {
  @Input() editionOptions: any;
  public map: Map;
  constructor(public mapService: MapService) {
  }
  ngOnInit() {
    this.mapService.initialize();
    this.map = this.mapService.map;
    console.log(L);

  }
}

I’m using leaflet 1.2, Angular 4 and LeafletFileLayer 1.2.0.

Thanks for your help.

[claustres]

I think your issue is linked to babel transpilation as said by @leplatrem, I found a fix without rewrite doing this:

import L from 'leaflet'
import togeojson from 'togeojson'
import fileLayer from 'leaflet-filelayer'

fileLayer(null, L, togeojson)
// Now L.Control.fileLayerLoad should be available

[Michiel-Idgis]

@claustres solution also works for meteor. Thanks for this!