Angular 2
Installera plugins från tredje part med [email protected]

Anmärkningar

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

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

Lägga till jquery-bibliotek i vinkel-cli-projekt

1. Installera jquery via npm:

 npm install jquery --save 

Installera typsnitt för biblioteket:

Gör följande för att lägga till typsnitt för ett bibliotek:

typings install jquery --global --save

2. Lägg till jquery till angular-cli-build.js-filen till leverantören NPMFiles:

   Detta krävs så att byggsystemet hämtar filen. Efter installationen ska angular-cli-build.js se ut så här:

Bläddra i node_modules och leta efter filer och mappar som du vill lägga till i leverantörsmappen.

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

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


    ]
  });
};

3. Konfigurera SystemJS-mappningar för att veta var du ska leta efter jquery:

   SystemJS-konfiguration finns i system-config.ts och efter att den anpassade konfigurationen är klar ska det relaterade avsnittet se ut:

/** 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. Lägg till den här raden i din src / index.html

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

Dina andra alternativ är:

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

eller

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

och

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

5. Importera och använda jquery-bibliotek i dina projektkällfiler:

   Importera jquery-bibliotek i dina käll-.ts-filer som så här:

declare var $:any;

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

Om du följde stegen korrekt bör du nu ha jquery-bibliotek som fungerar i ditt projekt. Njut av!

Lägg till bibliotek från tredje part som inte har typsnitt

Observera, detta är bara för vinkel-cli upp till 1.0.0-beta.10 version!

Vissa bibliotek eller insticksprogram kanske inte har typsnitt. Utan dessa kan TypeScript inte skriva kontrollera dem och orsakar därför sammanställningsfel. Dessa bibliotek kan fortfarande användas men på annat sätt än importerade moduler.

1. Inkludera en skriptreferens till biblioteket på din sida ( 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>
   

   • Dessa skript ska lägga till ett globalt (t.ex. THREE , mapbox , $ , etc.) eller bifogas till en global

2. I den komponent som kräver dessa, använd declare att initiera en variabel som matchar det globala namnet som används av lib. Detta låter TypeScript veta att det redan har initierats. ^en

   declare var <globalname>: any;
   

   Vissa libs fäster vid window , vilket måste utökas för att vara tillgängligt i appen.

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

3. Använd lib i dina komponenter efter behov.

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

   • OBS: Vissa bibliotek kan interagera med DOM och bör användas i lämplig komponentlivscykelmetod .