Angulaire 2 – ajout de bibliothèques tierces

J'essaie de commencer à utiliser 2 cli angulaires.
Je veux utiliser momentjs dans mon projet alors voici ce que j'ai fait:
1. Créé un projet utilisant un cli angulaire.
2. exécutez npm install --save moment
3. à partir du typings init src, exécutez les typings init + typings install --save moment .
4. ajout d'un moment aux modules système:

 System.config({ packages: { app: { format: 'register', defaultExtension: 'js' }, moment: { map: 'node_modules/moment/moment.js', type: 'cjs', defaultExtension: 'js' } } }); 
  1. Ajout d' import * as moment from 'moment'; À la composante souhaitée.
  2. Courir ng serve et obtenir:

[DiffingTSCompiler]: TypScript a trouvé les erreurs suivantes: app / angular-day-selecter.ts (2, 25): impossible de trouver le module 'moment'. Erreur: [DiffingTSCompiler]: Le fichier typographique a trouvé les erreurs suivantes: app / angular-day-selecter.ts (2, 25): impossible de trouver le «moment» du module. À DiffingTSCompiler.doFullBuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29) à DiffingTSCompiler.rebuild (/ Utilisateurs / vioffe / personal / Angular-day-selecter / node_modules / angular-cli / lib / broccoli / broccoli-typescript.js: 101: 18) à DiffingPluginWrapper.rebuild (/ Utilisateurs / vioffe / personal / angular-day-selecter / node_modules / angular-cli / Lib / broccoli / diffing-broccoli-plugin.js: 87: 45) à / Utilisateurs / vioffe / personal / angular-day-selecter / node_modules / angular-cli / node_modules / angular-cli / node_modules / broccoli / lib / api_compat. Js: 42: 21 à lib $ rsvp $$ interne $$ tryCatch (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js : 1036: 16) à lib $ rsvp $$ interne $$ invokeCallback (/Users/vioffe/personal/angular-day-picker/node_modules/angulaire-cli/node_modules/angulaire-cli/node_modules/rsvp/dist/rsvp.js : 1048: 17) à / Utilisateurs / vioffe / personal / angular-day-selecter / node_modules / angular-cli / node_modules / angular -cli / node_modules / rsvp / dist / rsvp.js: 331: 11 à lib $ rsvp $ asap $$ flush (/ Utilisateurs / vioffe / personal / angular-day-selecter / node_modules / angular-cli / node_modules / angular-cli /node_modules/rsvp/dist/rsvp.js:1198:9) à doNTCallback0 (node.js: 430: 9) à process._tickCallback (node.js: 359: 13)

Voici mon fichier tsconfig.json:

 { "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "mapRoot": "", "module": "system", "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": false, "rootDir": ".", "sourceMap": true, "sourceRoot": "/", "target": "es5" }, "files": [ "typings/main.d.ts" ], "exclude": [ "typings/browser.d.ts", "typings/browser" ] } 

Qu'ai-je fait de mal? Je ne trouve pas dans les documents un guide pour ajouter des bibliothèques tierces.

Lorsqu'il inclut des bibliothèques tierces, il y a deux parties … le code javascript que vous voulez exécuter et les fichiers de définition pour donner à l'IDE tout son caractère fortement typé.

Évidemment, le premier doit être présent si l'application doit fonctionner. La façon la plus simple d'obtenir cela consiste à inclure la bibliothèque de tiers avec une <script src="thirdLib.js"> dans la page html qui héberge votre application Angular 2. Cela n'obtiendra pas vos définitions, de sorte que vous n'aurez pas de qualité IDE, mais l'application fonctionnera. (Pour empêcher l'IDE de se plaindre qu'il ne connaît pas la variable 'thirdLib', ajoutez declare var thirdLib:any à votre fichier declare var thirdLib:any qu'il est de type any l'IDE n'offrira pas l'achèvement du code pour thirdLib, mais il sera Ne lance pas non plus d'erreurs IDE.)

Pour obtenir l'exécution du code et des définitions , si le lib a été écrit dans le dictionnaire dactylographe, vous pouvez ajouter une référence à ce fichier ts de votre code avec l' import {thirdLib} from 'thirdLibfolder/thirdLib' . Le fichier ts de lib par sa nature a à la fois le code d'exécution et les définitions dactylographiées.

Si la lib n'est pas écrite dans le type, mais un bon âme a écrit un fichier de définition du troisièmeLib.d.ts pour cela, vous pouvez faire référence au fichier d.ts avec /// <reference path="thirdLibfolder/thirdLib.d.ts" /> Dans votre fichier ts. Et puis encore inclure le javascript d'exécution réel avec la référence de script comme mentionné ci-dessus.

L'emplacement de ces fichiers, et si vous incluez des extensions dans la référence, sont spécifiques à votre configuration de projet et à l'outil de compilation et de compilation que vous utilisez. Webpack recherchera le dossier node_modules pour les bibliothèques référencées dans l' import {... et acceptera une référence avec l'extension .ts et sans. Meteor .ts une erreur si vous incluez l'extension .ts .

Exemple … D'abord, nous devons installer ChartJS à partir de npm.

 npm install chart.js --save 

Maintenant que nous avons installé ChartJS, nous devons indiquer à la CLI dans le fichier angular-cli-build.js où le nouveau fichier JavaScript est situé afin qu'il puisse être regroupé.

 var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ 'systemjs/dist/system-polyfills.js', 'systemjs/dist/system.src.js', 'zone.js/dist/**/*.+(js|js.map)', 'es6-shim/es6-shim.js', 'reflect-metadata/**/*.+(js|js.map)', 'rxjs/**/*.+(js|js.map)', '@angular/**/*.+(js|js.map)', 'chart.js/Chart.min.js', ] }); }; const map: any = { 'chartjs': 'vendor/chart.js/' }; const packages: any = { chartjs: { defaultExtension: 'js', main: 'Chart.min.js' } }; 

Le support de la libération de tiers par commande n'est toujours pas pris en charge.

Faites ce qui suit pour le moment:

  1. Npm moment d'installation
  2. Copier moment.js de node_modules / moment vers src / assets / js / moment.js
  3. Inclure les actifs / js / moment.js dans votre index.html
  4. Installez les fractions et importez la lib dans votre fichier .ts où vous en avez besoin
  5. Exécutez ng servir et profiter en utilisant le moment 🙂

Cette page wiki donne une explication plus détaillée:

https://github.com/angular/angular-cli/wiki/3rd-party-libs

Still Angular-cli a un problème avec l'intégration de la bibliothèque tierce partie. Jusqu'à ce qu'ils le réparent correctement, je peux vous donner un coup de fil. Disons que vous souhaitez utiliser _ de lodash dans votre code. Je vais donc vous donner mon scénario de code de travail –

Pour installer lodash

 npm install lodash --save typings install lodash --ambient --save 

Avant cela, assurez-vous d'installer des frappes à l'échelle mondiale

 npm install typings -g 

Ensuite, dans votre angular-cli-build.json, assurez-vous qu'il reste ainsi

 module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); }; 

Et dans votre système-config.ts:

 /** Map relative paths to URLs. */ const map: any = { 'lodash': 'vendor/lodash/lodash.js' }; /** User packages configuration. */ const packages: any = { 'lodash': { format: 'cjs' } }; 

Dans votre src / index.html ajoutez cette ligne (Ceci est la solution étrange)

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

Maintenant dans votre composant où vous souhaitez utiliser lodash, écrivez ainsi

 declare var _:any; @Component({ }) export class YourComponent { ngOnInit() { console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); } } 

Ça a fonctionné pour moi :). J'ai utilisé d'énormes bibliothèques de tiers dans mon projet angular2 à travers angular-cli. J'espère que cela vous aidera aussi

Modifier:

Si vous n'obtenez aucune npm pour vos bibliothèques tierces. Créez un dossier d' assets sous votre dossier src . Ensuite, vous pouvez ajouter des dossiers distincts pour js , css et images . Mettez votre js de tiers dans le dossier js . Ensuite, vous devez faire référence au fichier js dans votre index.html de cette manière:

 <script src="assets/js/your_js.js"></script> 

Maintenant, lorsque vous ng serve ou que ng build il met automatiquement à jour le dossier public avec vos assets/js . J'espère que vous comprenez tout le scénario 🙂

La réponse peut être trouvée dans le lien suivant: https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

Je ne suis pas en train d'utiliser moment.js moi-même en ce moment. Je ne suis donc pas sûr, mais il me semble que vous essayez d'utiliser moment.js en tant que module dactylographié et peut-être que ce n'est pas un module dactylographié. Je suggère une autre approche. N'utilisez pas moment.js comme module à importer, mais utilisez plutôt un fichier d.ts. Pour ce faire, j'utilise tsd: Ouvrez un cmd:

  • Npm installation tsd-g
  • Installation globale de tsd

  • Cd [votre projet dir]
  • Passez à la racine de votre projet

  • Tsd init
  • Entre autres choses, crée un fichier tsd.json pour suivre vos fichiers d.ts installés

  • Tsd moment d'installation -save

Après cela, j'ai obtenu l'exécution du code à l'écriture après: moment.

N'a pas testé plus loin …

J'utilise maintenant des frappes , au lieu de tds, en tant que gestionnaire pour les définitions de TypeScript. Tds est maintenant obsolète.

Vous pouvez probablement installer moment.d.ts comme ceci: moment d'installation des frappes –ambient –save

Consultez https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries , pour savoir comment ajouter la bibliothèque tierce avec systemjs.

Si la bibliothèque que vous souhaitez inclure n'est pas dans les fractions, vous avez deux façons de l'inclure dans une application angulaire 2:

  1. En utilisant npm: étape a. Installez la bibliothèque en utilisant le gestionnaire

    Étape b. Ajoutez le chemin de la bibliothèque à l'objet map dans le fichier systemjs.config.js.

Exemple:

'Jquery': 'npm: jquery / dist / jquery.js', 'd3': 'npm: d3 / build / d3.js'

Étape c. Importez-le dans l'exemple app.module.ts:

Importer 'jquery'; Importer 'd3';

Étape d. Le déclarer

Exemple: déclarer var $: any;

Déclarer var d3: any;

  1. Vous pouvez simplement l'inclure dans l'étiquette du script dans index.html et le déclarer.