Angular 2
Installazione di plugin di terze parti con [email protected]

Osservazioni

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

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

Aggiunta di librerie jquery nel progetto angular-cli

1. Installa jquery via npm:

 npm install jquery --save 

Installa i tipi di codice per la libreria:

Per aggiungere tipizzazioni per una libreria, effettuare le seguenti operazioni:

typings install jquery --global --save

2. Aggiungi jquery al file angular-cli-build.js nell'array vendorNpmFiles:

   Questo è richiesto in modo che il sistema di build prelevi il file. Dopo l'installazione, angular-cli-build.js dovrebbe apparire così:

Sfoglia i node_modules e cerca i file e le cartelle che desideri aggiungere alla cartella del venditore.

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

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


    ]
  });
};

3. Configura i mapping SystemJS per sapere dove cercare jquery:

   La configurazione di SystemJS si trova in system-config.ts e dopo aver completato la configurazione personalizzata la sezione relativa dovrebbe essere simile a:

/** 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. Nel tuo src / index.html aggiungi questa riga

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

Le tue altre opzioni sono:

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

o

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

e

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

5. Importazione e utilizzo della libreria jquery nei file di origine del progetto:

   Importa libreria jQuery nei tuoi file .ts di origine in questo modo:

declare var $:any;

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

Se hai seguito correttamente i passaggi dovresti avere una libreria jQuery che lavora nel tuo progetto. Godere!

Aggiungi la libreria di terze parti che non ha digitazioni

Si noti, questo è solo per angular-cli fino alla versione 1.0.0-beta.10!

Alcune librerie o plugin potrebbero non avere digitazioni. Senza questi, TypeScript non può scriverli e quindi causa errori di compilazione. Queste librerie possono ancora essere utilizzate, ma in modo diverso rispetto ai moduli importati.

1. Includi un riferimento di script alla libreria sulla tua pagina ( 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>
   

   • Questi script dovrebbero aggiungere un globale (ad esempio THREE , mapbox , $ , ecc.) O allegare a un globale

2. Nel componente che richiede questi, utilizzare declare per inizializzare una variabile corrispondente al nome globale utilizzato dalla lib. Ciò consente a TypeScript di sapere che è già stato inizializzato. ¹

   declare var <globalname>: any;
   

   Alcune librerie si collegano alla window , che dovrebbe essere estesa per essere accessibile nell'app.

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

3. Usa la lib nei tuoi componenti secondo necessità.

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

   • NOTA: alcune librerie potrebbero interagire con il DOM e dovrebbero essere utilizzate nel metodo appropriato del ciclo di vita dei componenti .