Quel est le flux de travail approprié pour inclure la bibliothèque dans angular 4.0 et l'utiliser dans un composant?

Mes pas:

yarn add mathjs

Ensuite, il devrait y avoir un moyen d'injecter des bibliothèques js dans l'un des cycles de vie de construction afin que le composant angular4 puisse l'utiliser. JHipster utilise Webpack et Yarn.

Ensuite, j'ai essayé d'ajouter à Component (docs):

import { mathjs } from "./mathjs";  

Et

var math = require('mathjs');

Celles-ci ne fonctionnaient pas. Qu'est-ce que je rate?

MISE À JOUR:

Il semble que mathjs utilise une approche plus ancienne suggérant var math = require('mathjs'). Peut-être que c'est similaire à question JQuery d'une certaine manière ...

MISE À JOUR2

3
J.Olufsen 7 août 2017 à 17:44

2 réponses

Meilleure réponse

C'est une excellente question et je suis heureux que vous posiez parce que j'aurais aimé avoir ce que je suis sur le point d'écrire la première fois que j'ai rencontré ce petit problème. Il s'agit d'un problème typographique / javascript et Webpack avant qu'il ne s'agisse d'un problème angulaire. Je prévois définitivement un article sur mon blog dès que possible.

Votre scénario:

Vous courez

npm install mathjs
  1. Maintenant, vous essayez d'utiliser math.js à partir d'un composant:
  2. Recherchez le fichier dist js math.js (node_modules / mathjs / dist / math.js) et référence comme ceci

    import {mathjs} from "../../node_modules/mathjs/dist/math";

  3. Mais vous obtenez un message d'erreur disant "set --allowJS". Vous faites cela comme ceci:

    Définissez --allowJS dans la configuration (tsconfig.json) {"options de compilation": { "allowJs": vrai, ...

  4. Vous obtenez maintenant:

ERREUR dans ../node_modules/mathjs/dist/math.js (12209,13): code inaccessible détecté.

  1. En regardant dans la source math.js, vous voyez que c'est un module old school mais il n'y a pas de fonction root wrapper (une fonction pour les amener tous et dans l'obscurité les lier ..) (plus à ce sujet plus tard).

Solution : installez un fichier de saisie pour la bibliothèque cible (@ types / mathjs)

  1. Tout d'abord, vérifiez si vous pouvez obtenir des fichiers @typings pour votre module ici https://microsoft.github.io/TypeSearch/
  2. Récupérez le fichier de typages mathjs de npm (https://www.npmjs.com/package/@types / mathjs) et exécutez npm install pour ajouter les fichiers de typages .d.ts au répertoire node_modules de la bibliothèque cible

    npm install --save @types/mathjs

  3. Ajoutez correctement votre référence de type

    import * as mjs from "mathjs"

Utilisez-le comme ceci:

console.log("e was: " + mjs.e);

J'ai la solution complète pour la lib math.js sur mon github ici https://github.com/res63661/importOldJSDemoWithTypings/

Plus: Pour des exemples, ne cherchez pas plus loin que votre propre projet angulaire. CLI crée le dossier node_modules chaque fois que vous exécutez npm install après avoir créé un nouveau projet avec ng new. Creusez ici et notez les fichiers d.ts pour la plupart des fichiers .js.

Lorsque vous manipulez des typages ou définissez les vôtres (fichiers .d.ts), assurez-vous de redémarrer votre serveur entre les builds car les typages ne semblent pas se mettre à jour actuellement à la volée

Pour en savoir plus:

  1. http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html
  2. https://angular.io/guide/typescript-configuration#typescript-typings
  3. https://microsoft.github.io/TypeSearch/

Enfin:

Si vous êtes dans une situation difficile et que cela ne fonctionne pas pour vous, j'ai réussi à créer un wrapper personnalisé pour un module différent (beaucoup plus petit) en l'enveloppant dans un type d'exportation principal

export var moduleNamer = (function(){
  //module implementation
}());

Puis vider le fichier .js localement sur mon composant, puis le référencer comme suit:

//reference like this from your component:
import {moduleNamer} from "./source";  //from source.js

--riches

8
Marnix Bent 10 déc. 2017 à 13:58

Essayez d'inclure le script dans index.html:

<script src="./assets/math.js" type="text/javascript"></script>

Puis ajoutez ceci dans votre fichier de composant:

declare const math; 

Vous pouvez ensuite utiliser les mathématiques dans votre composant:

ngOnInit(): void {
    console.log(math.sqrt(-4););
}
0
Faly 7 août 2017 à 14:55