Angular - Librairie JS externe

a marqué ce sujet comme résolu.

Bonsoir,

Je crois (enfin j’en suis sûr :D ) que j’ai quelques lacunes en JavaScript/TypeScript…

Je vous explique ce qui m’a rendu dingue aujourd’hui :
Je développe un projet web avec Angular et donc en TypeScript. Aujourd’hui, je suis confronté à une problématique. Je souhaite intégrer la librairie https://github.com/oakmac/chessboardjs/

D’habitude pour importer une librairie, j’utilise classiquement npm :

npm i nom_du_package --save

Puis je l’utilise en important la classe dans mon composant :

import { nomDeMaClasse } from 'package_name';

Sauf qu’ici, ça ne fonctionne pas… J’obtiens dans la console du navigateur une erreur (à la ligne où j’utilise la classe importée) :

module_0_chessboard is not defined

J’ai l’impression que la librairie est faite pour un usage via "une balise script dans un fichier HTML".
J’ai trouvé une solution pour l’importer comme un "script externe" https://medium.com/@clintpitzak/how-to-use-external-javascript-libraries-in-angular-8–247baacbdccf. Cela consiste à ajouter le script dans la balise script du angular.json et d’ajouter dans mon composant Angular :

declare var Chessboard: any;

Sauf que je ne comprends pas vraiment cette solution. Et puis, ce problème m’arrive également pour d’autres librairies du même type. Puis devant le nombre de questions sur Stackoverflow, j’imagine qu’il s’agit d’un "type" de librairie particulier.

Qu’est-ce qui fait qu’une librairie n’est pas "importable" directement dans un composant Angular ? Y’a t’il un lien avec les concepts de ES module, commonjs (que je ne maîtrise pas) ?

Cette solution utilise la notation : declare var Chessboard: any; Cela permet d’exprimer que la classe Chessboard a déjà été initialisée ailleurs (d’après ce que j’ai lu). Sauf que cela me dérange car je n’ai pas de types TypeScript (sachant qu’elle est de type any). Je peux certes les définir directement dans mon composant. Par exemple :

declare var Chessboard = {
  // je mets les types ici
};

Mais n’y aurait-il pas moyen d’utiliser un fichier .d.ts que j’aurais packagé au préalable dans un fork de la librairie ? Cela m’éviterait d’avoir des dizaines de lignes de déclarations de types dans mon composant Angular…

Merci beaucoup pour votre aide :)
Si vous pensez que certaines lectures s’imposent, n’hésitez pas !

+0 -0

Hello,

Pour information il existe des types pour chessboard. C’est ce que tu essaies de faire manuellement avec ton declare var.... Tu dois simplement les installer !

https://www.npmjs.com/package/@types/chessboardjs

Si avec ça tu ne t’en sors pas effectivement ça veut dire qu’ils n’ont pas de système de build et que le package n’est pas distribué correctement (mais ça m’étonnerait vu qu’il est sur npm 😅).

Tu peux toujours tenter de l’utiliser en global mais avec les types ?!

+0 -0

Merci Nek pour ta réponse !

Ma question ne porte pas spécifiquement sur Chessboard (c’était un exemple) mais plutôt sur l’intégration d’un script externe avec Angular.

Ici, mon problème majeur c’est que je ne peux pas importer une librairie externe directement dans mon composant Angular avec la notation import ClassNameExample from 'lib-example'. C’est ça que je ne comprends pas :'(

En fait tout cela est très très compliqué (ça implique des 10ènes de normes et projets open source tous entremêlés les uns dans les autres…). Tu vas trouver des éléments de réponses en te renseignant sur les modules javascript.

Ce tuto sur grafikart est un très bon premier pas en avant dans le sujet: https://grafikart.fr/tutoriels/javascript-modules-1354

Je suis un peu comme toi, j’ai du mal à y voir vraiment clair et c’est pas faute d’avoir été toucher aux méandres de webpack, rollup, npm ou typescript…

Je crois que la vérité ultime c’est que très peu de personnes maîtrisent vraiment bien le sujet 😅 . Côté angular, il y a effectivement des outils qui simplifient grandement la vie, il faut les utiliser sans hésiter et sans trop se poser de question.

Pour ce qui est de TypeScript, le but du jeu ça va être de trouver systématiquement des types pour tes librairies (les types sont de plus en plus souvent fournis avec la librairie, mais parfois ceux distribués par le biais d’un autre projet sont aussi meilleurs… c’est un peu la foire)

En tous les cas le sujet est tout à fait intéressant, je suis impatient de lire les réponses d’autres personnes s’intéressant au sujet :D .

Merci pour ce lien qui est en effet très intéressant ! Le post montre bien que c’est pas simple :lol:

À défaut d’avoir trouvé mieux comme solution, je crois que je vais abandonner et utiliser celle évoquée dans mon premier post (même si elle est un peu moche)…

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte