Angular 2
Installieren von Drittanbieter-Plugins mit [email protected]

Bemerkungen

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

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

Hinzufügen einer Jquery-Bibliothek zum angle-cli-Projekt

1. Jquery über npm installieren:

 npm install jquery --save 

Installieren Sie Typisierungen für die Bibliothek:

Führen Sie folgende Schritte aus, um Typisierungen für eine Bibliothek hinzuzufügen:

typings install jquery --global --save

2. Fügen Sie der vorder-cli-build.js-Datei jevery zum vendorNpmFiles-Array hinzu:

   Dies ist erforderlich, damit das Buildsystem die Datei aufnimmt. Nach dem Setup sollte die angle-cli-build.js so aussehen:

Durchsuchen Sie die node_modules und suchen Sie nach Dateien und Ordnern, die Sie dem Herstellerordner hinzufügen möchten.

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

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


    ]
  });
};

3. Konfigurieren Sie SystemJS-Zuordnungen, um zu wissen, wo Sie nach Jquery suchen müssen:

   Die SystemJS-Konfiguration befindet sich in system-config.ts. Nachdem die benutzerdefinierte Konfiguration abgeschlossen ist, sollte der zugehörige Abschnitt folgendermaßen aussehen:

/** 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. Fügen Sie in Ihrer src / index.html diese Zeile hinzu

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

Ihre anderen Optionen sind:

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

oder

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

und

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

5. Importieren und Verwenden der Jquery-Bibliothek in Ihren Projektquelldateien:

   Importieren Sie die Jquery-Bibliothek in Ihre .ts-Quelldateien wie folgt:

declare var $:any;

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

Wenn Sie die Schritte richtig ausgeführt haben, sollten Sie jetzt die Jquery-Bibliothek in Ihrem Projekt verwenden. Genießen!

Fügen Sie eine Drittanbieter-Bibliothek hinzu, die keine Typisierung hat

Beachten Sie, dass dies nur für eckige Kli bis Version 1.0.0-beta.10 gilt!

Einige Bibliotheken oder Plugins haben möglicherweise keine Typisierung. Andernfalls kann TypeScript sie nicht überprüfen und verursacht daher Kompilierungsfehler. Diese Bibliotheken können weiterhin verwendet werden, unterscheiden sich jedoch von importierten Modulen.

1. Fügen Sie einen Skriptverweis für die Bibliothek auf Ihrer Seite hinzu ( 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>
   

   • Diese Skripte sollten eine globale (zB THREE , mapbox , $ usw.) hinzufügen oder mit einer globalen mapbox

2. Verwenden Sie in der Komponente, die diese benötigt, eine declare , um eine Variable zu initialisieren, die dem von der Bibliothek verwendeten globalen Namen entspricht. Dadurch kann TypeScript wissen, dass es bereits initialisiert wurde. ¹

   declare var <globalname>: any;
   

   Einige Bibliotheken werden an das window angehängt, das erweitert werden müsste, um in der App zugänglich zu sein.

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

3. Verwenden Sie bei Bedarf die lib in Ihren Komponenten.

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

   • ANMERKUNG: Einige Bibliotheken können mit dem DOM interagieren und sollten in der entsprechenden Komponentenlebenszyklusmethode verwendet werden.