Angular 2
Plug-ins van derden installeren met [email protected]

Opmerkingen

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

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

JQuery-bibliotheek toevoegen in Angular-CLI-project

1. Jquery installeren via npm:

 npm install jquery --save 

Typen installeren voor de bibliotheek:

Ga als volgt te werk om typen voor een bibliotheek toe te voegen:

typings install jquery --global --save

2. Voeg jquery toe aan het bestand angular-cli-build.js aan de array vendorNpmFiles:

   Dit is vereist zodat het buildsysteem het bestand ophaalt. Na het instellen ziet de hoekige-cli-build.js er als volgt uit:

Blader door de node_modules en zoek naar bestanden en mappen die u aan de map van de leverancier wilt toevoegen.

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

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


    ]
  });
};

3. Configureer SystemJS-toewijzingen om te weten waar u naar jquery moet zoeken:

   SystemJS-configuratie bevindt zich in system-config.ts en nadat de aangepaste configuratie is voltooid, ziet de gerelateerde sectie er als volgt uit:

/** 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. Voeg deze regel toe aan uw src / index.html

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

Uw andere opties zijn:

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

of

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

en

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

5. Jquery-bibliotheek importeren en gebruiken in uw projectbronbestanden:

   Importeer jquerybibliotheek in uw bron .ts-bestanden als volgt:

declare var $:any;

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

Als je de stappen correct hebt gevolgd, zou je jquerybibliotheek nu in je project moeten werken. Genieten!

Bibliotheek van derden toevoegen zonder typingen

Let op, dit is alleen voor angular-cli tot 1.0.0-beta.10 versie!

Sommige bibliotheken of plug-ins hebben mogelijk geen typingen. Zonder deze kan TypeScript ze niet controleren en veroorzaakt daarom compilatiefouten. Deze bibliotheken kunnen nog steeds worden gebruikt, maar anders dan geïmporteerde modules.

1. Neem een scriptverwijzing naar de bibliotheek op uw pagina op ( 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>
   

   • Deze scripts moeten een globaal (bijv. THREE , mapbox , $ , etc.) toevoegen of aan een globaal hechten

2. Gebruik in de component die deze vereist, declare om een variabele te initialiseren die overeenkomt met de globale naam die door de bibliotheek wordt gebruikt. Hierdoor weet TypeScript dat het al is geïnitialiseerd. ¹

   declare var <globalname>: any;
   

   Sommige bibliotheken hechten zich aan het window , dat zou moeten worden uitgebreid om toegankelijk te zijn in de app.

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

3. Gebruik de bibliotheek in uw componenten als dat nodig is.

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

   • OPMERKING: Sommige bibliotheken kunnen interageren met de DOM en moeten worden gebruikt in de juiste levenscyclusmethode voor componenten .