'L' refer to a UMD global - compilation error

问题

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 :

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

Compiled with :

ng serve --aot

Context 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:

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 { }

回答1:

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

import * as L from 'leaflet';

回答2:

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);

来源：https://stackoverflow.com/questions/46092807/l-refer-to-a-umd-global-compilation-error

标签

angular

typescript

Webpack

angular-cli

ngx-leaflet