Angulaire 2 - l'importation des externes feuillet manuscrit de la bibliothèque

Im essayant d'importer l'un tapuscrit notice de la bibliothèque dans mon angulaire 2 de la demande.

C'est ma carte de composant. Ive installé dépliant.d.ts avec dnt installer et à ma demande ne se plaint pas de ///<reference path="../../typings/leaflet/leaflet.d.ts"/> mais lorsque j'essaie d'utiliser un L. la carte qui est un module exporté dans la fiche.d.ts, je reçois l'erreur "ReferenceError: L n'est pas défini". C'est la première fois que j'essaie d'importer un externe manuscrit de la bibliothèque angulaire 2 et clairement im faire quelque chose de mal.

///<reference path="../../typings/leaflet/leaflet.d.ts"/>
import { Component } from 'angular2/core';
@Component({
  selector: 'map',
  template: `
        <div id="map"></div>
  `,
})
export class Map{
    constructor(){
          var map = new L.Map('map', {
             zoomControl: false
         });
    }

paquet.json

{
  "dependencies": {
    "angular2": "^2.0.0-beta.3",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "normalize.css": "^3.0.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.6",
    "typings": "^0.6.4",
    "zone.js": "^0.5.11"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "gh-pages": "^0.11.0",
    "grunt": "~0.4.5",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-sass": "~0.9.0",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-shell": "^1.2.1",
    "lite-server": "^2.0.1",
    "normalize.css": "^3.0.3",
    "typescript": "^1.7.5"
  },
  "scripts": {
    "publish": "node publish.js",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  }
}

dnt.json

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "leaflet/leaflet.d.ts": {
      "commit": "1da639a106527e0c4010b354a1efe52a3059a291"
    }
  }
}

Quelqu'un pourrait-il me dire ce que je fais de mal?

Merci!

Je crois que vous avez aussi besoin de se connecter leaflet.js pour votre page. d.les fichiers ts sont utilisées uniquement pour dire Tapuscrit sur certains code JS, d.ts de ne pas importer le code réel.
Ok. J'ai la notice js fichiers dans un dossier de mon projet. Savez-vous comment je pourrais connecter mon fichier ts à ce dossier?
Vous pouvez juste utiliser <script> tag, ou de dépendance manager si vous utilisez certains.

OriginalL'auteur Jakob Svenningsson | 2016-04-02

4

Vous devez inclure le dépliant fichier JS:
```
System.config({
  map: {
    leaflet: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'
  },
  packages: {'app': {defaultExtension: 'ts'}} 
});
System.import('app/main')
        .then(null, console.error.bind(console));
```
Ensuite, vous pouvez l'importer dans votre modules de cette façon:
```
import {Component, OnInit} from 'angular2/core';
import leaflet from 'leaflet';
```
Voir ce plunkr: http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview.

comment puis-je ajouter sur mon angulaires-cli fichier de config? J'ai ajouté sur la configuration système comme vous l'avez mentionné, mais l'importation notice n'est pas de trouver le module.
Idem sur que. Voudrais quelques infos sur comment le faire avec angulaires-cli et webpack.

OriginalL'auteur Thierry Templier

Je peux vous proposer une solution jusqu'à ce que angulaires-cli d'avoir un meilleur support pour la 3ème partie libs. Il a travaillé pour moi 🙂

D'abord aller dans le répertoire du projet et le type

npm install leaflet --save

ensuite, ouvrez votre angular-cli-build.js et ajouter cette ligne

vendorNpmFiles: [
   ..................
   'leaflet/**/*.js',
    ....................
  ]

maintenant, ouvrez votre répertoire src/system-config.ts, écrire

const map:any ={
     ..................
   'leaflet': 'vendor/leaflet/dist',
    ....................

}

const packages: any = {
  'leaflet': {
    format: 'cjs'
  }

};

Ouvrir votre src/index.html, ajouter ce

 <script type="text/javascript" src="vendor/leaflet/dist/leaflet.js"></script>

et n'oubliez pas d'ajouter le fichier css aussi

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />

Maintenant, ouvrez votre composant dans lequel vous voulez utiliser Dépliant

declare let L: any;
@Component({
  moduleId: module.id,
  selector: 'app-map',
  templateUrl: 'map.component.html',
  styleUrls: ['map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {
 leafletMap: any;
 ngAfterViewInit() {
    this.leafletMap = L.map("map").setView([23.709921, 90.407143], 7);
 }
}

Tada!! votre carte est chargée 😀

Je suppose que tu voulais écrire 'notice': 'vendor/dépliant/dist" dans la gamme de cartes, non?

OriginalL'auteur pd farhad

2

J'ai dû faire quelques changements pour obtenir Thierry Templier, en réponse à des travaux à l'aide de systemjs et Angulaire 2.4.

J'ai ajouté à mon Dépliant system.config.js fichier tel qu'il l'expose, mais dans mon composant, j'ai dû importer de cette façon:

import * as L from 'leaflet';

et puis la classe L a été reconnu dans mon MapComponent
```
export class MapComponent {
    let map = L.map("map").setView([38, -77], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
    }
```
OriginalL'auteur jm22
2

Pendant ce temps, tout ce que vous avez à faire appelle
```
npm install @types/leaflet@latest --save
```
et y compris la source dans index.html.

Pas d'autres importations ou les déclarations nécessaires. Ensuite, l'importation pourrait ressembler à
```
import {control, LatLng, layerGroup, LayerGroup, Map} from "leaflet";
```
Aussi, la génération de la carte devrait arriver dans ngOnInit(), constructeur d'utilisation n'est pas fait pour la logique.

Cela devrait-il être --save-dev?
Je ne sais pas, devrait-il? ce n'est pas un outil de développement, mais le code de l'application, donc je suppose que non
Hmm, les types ne sont utiles que pour le développement, les types de disparaître en cours de transpilation-
à l'aide angulaire de la CLI, j'ai encore besoin d'ajouter declare var L: any; ou ng serve imprime Cannot find name 'L' - suis-je raté quelque chose?
peut-être que les importations? J'ai mis à jour la réponse

OriginalL'auteur Blauhirn

Vous devez vous connecter pour publier un commentaire.