Angular 2
Installer des plugins tiers avec [email protected]

Remarques

 'lodash': {
   format: 'cjs',
   defaultExtension: 'js',
   main: 'index.js'
 }

 'moment': {
   main: 'moment.js'
 }

Ajout de la bibliothèque jquery dans un projet angular-cli

1. Installez jquery via npm:

 npm install jquery --save 

Installez les typages pour la bibliothèque:

Pour ajouter des saisies pour une bibliothèque, procédez comme suit:

typings install jquery --global --save

2. Ajoutez jquery au fichier angular-cli-build.js au tableau vendorNpmFiles:

   Ceci est nécessaire pour que le système de compilation récupère le fichier. Après l'installation, angular-cli-build.js devrait ressembler à ceci:

Parcourez les node_modules et recherchez les fichiers et les dossiers que vous souhaitez ajouter au dossier du fournisseur.

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      // ...
      'jquery/dist/*.js'


    ]
  });
};

3. Configurez les mappages SystemJS pour savoir où chercher jquery:

   La configuration de SystemJS se trouve dans system-config.ts et après la configuration personnalisée, la section associée devrait ressembler à:

/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery'
};

/** User packages configuration. */
const packages: any = {
            
// no need to add anything here for jquery

};

4. Dans votre src / index.html ajoutez cette ligne

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

Vos autres options sont les suivantes:

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

ou

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

et

<script src="/vendor/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>

5. Importer et utiliser la bibliothèque jquery dans les fichiers sources de votre projet:

   Importez la bibliothèque jquery dans vos fichiers source .ts comme ceci:

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // now you can DO, what ever you want 
     });
     console.log();
  }
}

Si vous avez suivi les étapes correctement, vous devriez maintenant avoir la bibliothèque jquery dans votre projet. Prendre plaisir!

Ajouter une bibliothèque tierce qui n'a pas de typage

Notez que ce n'est que pour les versions angulaires à 1.0.0-beta.10!

Certaines bibliothèques ou plugins peuvent ne pas avoir de typage. Sans ceux-ci, TypeScript ne peut pas les vérifier et provoque donc des erreurs de compilation. Ces bibliothèques peuvent toujours être utilisées mais différemment des modules importés.

1. Inclure une référence de script à la bibliothèque sur votre page ( index.html )

   <script src="//cdn.somewhe.re/lib.min.js" type="text/javascript"></script>
   <script src="/local/path/to/lib.min.js" type="text/javascript"></script>
   

   • Ces scripts devraient ajouter un global (par exemple, THREE , mapbox , $ , etc.) ou être mapbox global.

2. Dans le composant qui les requiert, utilisez declare pour initialiser une variable correspondant au nom global utilisé par la lib. Cela permet à TypeScript de savoir qu'il a déjà été initialisé. ¹

   declare var <globalname>: any;
   

   Certaines librairies sont attachées à une window , qui doit être étendue pour être accessible dans l'application.

   interface WindowIntercom extends Window { Intercom: any; }
   declare var window: WindowIntercom;
   

3. Utilisez la lib dans vos composants si nécessaire.

   @Component { ... }
   export class AppComponent implements AfterViewInit {
       ...
       ngAfterViewInit() {
           var geometry = new THREE.BoxGeometry( 1, 1, 1 );
           window.Intercom('boot', { ... }
       }
   }
   

   • REMARQUE: Certaines bibliothèques peuvent interagir avec le DOM et doivent être utilisées dans la méthode de cycle de vie des composants appropriée.