web-dev-qa-db-fra.com

Comment importer un fichier JavaScript dans angular2

Je ne parviens pas à comprendre comment importer un fichier javascript dans mon projet angular2. C'est un fichier qui n'est pas un module en dehors de npm et les seules instructions que j'ai pu trouver utilisent npm, ce qui n'est pas une option ici.

J'utilise cli angulaire et dans mon fichier angular-cli.json j'ai:

{
"apps": [
  "styles": [..],
  "scripts": ["../pathtomyjs/file.js"] 
]}

Je suis en train de créer et de servir. Lorsque j'ouvre mon application, que je regarde la console Web et que je tente de référencer la fonction qui se trouve dans mon fichier js, je peux le faire avec succès.

Exemple dans la console, je tape:

var test = MyObject;

et je reçois test = {};

Cependant, quand j'essaie de le faire 

let test = MyObject;

dans mon fichier .ts de composant, je reçois:

home.component.ts (10,11): Cannot find name 'MyObject'.)

Vous ne savez pas comment faire cela dans Angular2.

Merci!

javascriptangulartypescripttypescript-typings
11
Kevin Sar

Faire:

declare var MyObject: any;

let test = MyObject;

Ou:

let test = (<any> MyObject);

Pour jQuery:

declare var jQuery: any;

jQuery.ajax({ ... });
8
Dan

Est-ce une bibliothèque tierce? vous devrez indiquer au compilateur TypeScript où se trouvent les fichiers de définition de type. Normalement, il regarde dans le dossier node_modules/@types. Par exemple, si vous souhaitez utiliser jQuery, vous devez installer les fichiers de définition de type nécessaires en exécutant: 

npm install @types/jquery
2
pixelbits

Je mets mes fichiers js dans app/assets/scripts et les charge dans index.html<script src="assets/scripts/foobar.js"></script>. Ceci est pour un projet ionic2/angular2. 

Dans le module, vous devez définir vos fonctions comme ceci dans la portée globale du fichier de module.

declare var myFancyFunction;

0
El Dude

J'ai fait une plongée profonde sur ce ici :

C'est une excellente question et je suis ravi que vous posiez cette question, car j'aimerais avoir ce que je vais écrire la première fois que j'ai rencontré ce petit problème. Ceci est un problème TypeScript/javascript et webpack avant d’être un problème angulaire. Je prépare 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. Trouver le fichier js math.js dist (node_modules/mathjs/dist/math.js) et faire référence à ceci 

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

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

    Set --allowJS in config (tsconfig.json) { "compilerOptions": { "allowJs": true, ...

  4. Maintenant vous obtenez:

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

  1. En regardant dans la source math.js, vous verrez que c’est un ancien module d’école, mais il n’existe aucune fonction encapsuleur racine (une fonction pour tous les ramener et dans l’obscurité les lier ..) (plus de détails plus tard).

Solution: installe un fichier de typage pour la lib cible (@ types/mathjs)

Lire la suite...

0
Richard Strickland