16

I am using in my project the plugin ngx-leaflet, and angular-cli.

I am trying to use leaflet as described in the doc, for example :

enter image description here

The problem is when I'm trying to compile I got the following error :

enter image description here

Compiled with :

ng serve --aot

Context here :

enter image description here

I did try to import L in different ways using :

import { LeafletModule } from '@asymmetrik/ngx-leaflet';

But I cannot find anything in documentation nor the github.

I did remove the module atm to compile, but I need a workaround.

Here is the package.json that I use:

enter image description here

Here is the code inside my component, user of 'L' :

@Component({
  selector: 'app-map-screens-element',
  templateUrl: './map-screens-element.component.html',
  styleUrls: [
    './map-screens-element.component.scss',
  ],
})

export class MapScreensComponent implements OnInit {
  /**
   * setting map options
   */
  public $mapOptions = {
    // we use the layer openstreetmap
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
    ],
    zoom: 15,
    center: L.latLng([48.866667, 2.333333]),
  };
}

And here the import of the module into my project :

import { LeafletModule } from '@asymmetrik/ngx-leaflet';

@NgModule({
  imports: [
    LeafletModule,
  ],
  declarations: [
    // ...
  ],
  exports: [
    // ...
  ],
})

export class SharedElementModule { }
Orelsanpls
  • 22,456
  • 6
  • 42
  • 69

2 Answers2

26

You are missing the import of L on top of you component. Like so:

import * as L from 'leaflet';
pgross
  • 510
  • 5
  • 16
  • I'm facing the same issue...but if your answer is correct, why am I not getting compilation errors on other references to L.**** in my typescript file? – Ronnie Sep 08 '17 at 10:24
  • Thanks for your answer, gonna try it asap and give you a return :) – Orelsanpls Sep 11 '17 at 08:45
  • @Ronnie, I can't answer that. I just stumbled over the same error and this solution solved it for me. If you have any further explanation I'd love to update my answer. – pgross Sep 13 '17 at 07:03
  • @pgross Thanks a lot, it works! you da real mvp - sorry for late test – Orelsanpls Sep 14 '17 at 15:18
0

After cloning the angular-cli into a new empty project I added sockjs-client via NPM. Then I tried to create a SockJS instance in an NG-Service like so. SockJs is just a sample for a none angular compliant npm package:

import { SockJS } from 'sockjs-client';
//...
private socket: SockJs;
//...
this.socket = new SockJS(this.serverURI);

This compiled fine but had a runtime error stating

SockJS is not a constructor

After some googling I stumbled over typings in angular to make js-types available to the typescript transpiler https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. To make it work I had to add types by installing @types/sockjs-client from NPM. That delivered the compiler error

'SockJS' refers to a UMD global, but the current file is a module. Consider adding an import instead.

This error means that the types are known to typescript transpiler but not explicitly imported. You have to import the types to explicitly tell typescript that you know you are using an external script whose existence can not be verified by typescript while compiling. The presence of that package will only be checked during runtime. The explicit import statement looks like this

import * as SockJsClient from 'sockjs-client';
//...
private socket: SockJsClient.Socket;
//...
this.socket = new SockJsClient(this.serverURI);
LordObi
  • 114
  • 5
  • Isn't is exactly the same import but for another module? I don't see any difference. Could you elaborate the difference? – pgross Nov 14 '17 at 16:38
  • 1
    I wanted to make clear that there is a chain of problems one is facing when using old js-libs in angular and that the behaviour is intended by angular. First you install a npm package that is not usable, then you find out about typing and install the types (or create them yourself) and after that you get the UMD exception (which is also indetended) that can be solved by to correct import. The above answer pointed me in the correct direction but was not quite a "how to solve" for me. Also i admit my answer is very similar. – LordObi Nov 20 '17 at 19:37