web-dev-qa-db-fra.com

'L' fait référence à un UMD global - erreur de compilation

J'utilise dans mon projet le plugin ngx-leaflet , et angular-cli .

J'essaie d'utiliser le dépliant décrit dans la doc, par exemple:

 enter image description here

Le problème est que lorsque j'essaie de compiler, j'ai l'erreur suivante:

 enter image description here

Compilé avec:

ng serve --aot

Contexte ici:

 enter image description here

J'ai essayé d'importer L de différentes manières en utilisant:

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

Mais je ne trouve rien dans la documentation ni dans le github .

J'ai supprimé le module atm pour compiler, mais j'ai besoin d'une solution de contournement.

Voici le package.json que j'utilise:

 enter image description here

Voici le code à l'intérieur de mon composant, utilisateur de '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]),
  };
}

Et voici l'importation du module dans mon projet:

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

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

export class SharedElementModule { }
angulartypescriptwebpackangular-clingx-leaflet
11
Grégory NEUT

Il vous manque l'importation de L sur votre composant. Ainsi:

import * as L from 'leaflet';
19
pgross

Après avoir cloné le angular-cli dans un nouveau projet vide, j'ai ajouté sockjs-client via NPM. Ensuite, j'ai essayé de créer une instance SockJS dans un service NG comme ceci. SockJs est juste un exemple pour un paquet npm non conforme:

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

Cela a bien été compilé mais une erreur d’exécution s’est produite

SockJS n'est pas un constructeur

Après quelques recherches sur Google, je suis tombé sur une frappe angulaire pour rendre js-types disponibles pour le transpiler TypeScript https://www.typescriptlang.org/docs/handbook/tsconfig-json.html . Pour que cela fonctionne, j'ai dû ajouter des types en installant @ types/sockjs-client de NPM. Cela a livré l'erreur du compilateur

'SockJS' fait référence à un UMD global, mais le fichier actuel est un module . Pensez à ajouter une importation à la place.

Cette erreur signifie que les types sont connus de TypeScript transpiler mais pas explicitement importés. Vous devez importer les types pour indiquer explicitement à TypeScript que vous savez que vous utilisez un script externe dont l'existence ne peut pas être vérifiée par TypeScript lors de la compilation. La présence de ce paquet ne sera vérifiée que pendant l'exécution. L'instruction d'importation explicite ressemble à ceci

import * as SockJsClient from 'sockjs-client';
//...
private socket: SockJsClient.Socket;
//...
this.socket = new SockJsClient(this.serverURI);
0
LordObi