Angular 2
Instalowanie wtyczek firm trzecich z [email protected]

Uwagi

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

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

Dodawanie biblioteki jquery w projekcie angular-cli

1. Zainstaluj jquery za pośrednictwem npm:

 npm install jquery --save 

Zainstaluj typy dla biblioteki:

Aby dodać typy do biblioteki, wykonaj następujące czynności:

typings install jquery --global --save

2. Dodaj jquery do pliku angular-cli-build.js do tablicy vendorNpmFiles:

   Jest to wymagane, aby system kompilacji pobierał plik. Po instalacji plik angular-cli-build.js powinien wyglądać następująco:

Przeglądaj node_modules i poszukaj plików i folderów, które chcesz dodać do folderu dostawcy.

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

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


    ]
  });
};

3. Skonfiguruj odwzorowania SystemJS, aby wiedzieć, gdzie szukać jquery:

   Konfiguracja SystemJS znajduje się w pliku system-config.ts, a po zakończeniu konfiguracji niestandardowej powiązana sekcja powinna wyglądać następująco:

/** 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. W swoim pliku src / index.html dodaj ten wiersz

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

Inne opcje to:

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

lub

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

i

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

5. Importowanie i używanie biblioteki jquery w plikach źródłowych projektu:

   Zaimportuj bibliotekę jquery do źródłowych plików .ts w następujący sposób:

declare var $:any;

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

Jeśli poprawnie wykonałeś kroki, powinieneś mieć bibliotekę jquery działającą w twoim projekcie. Cieszyć się!

Dodaj bibliotekę innej firmy, która nie ma tekstu

Uwaga, dotyczy to tylko wersji kątowej-cli do wersji 1.0.0-beta.10!

Niektóre biblioteki lub wtyczki mogą nie mieć pisowni. Bez nich TypeScript nie może ich sprawdzić i dlatego powoduje błędy kompilacji. Te biblioteki mogą być nadal używane, ale inaczej niż zaimportowane moduły.

1. Dołącz odniesienie skryptu do biblioteki na swojej stronie ( 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>
   

   • Te skrypty powinny dodawać globalne (np. THREE , mapbox , $ itp.) Lub dołączać do globalnego

2. W komponencie, który tego wymaga, użyj polecenia declare aby zainicjować zmienną pasującą do globalnej nazwy używanej przez lib. Dzięki temu TypeScript wie, że został już zainicjowany. ¹

   declare var <globalname>: any;
   

   Niektóre biblioteki dołączają się do window , które musiałoby zostać rozszerzone, aby było dostępne w aplikacji.

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

3. W razie potrzeby użyj biblioteki lib w swoich komponentach.

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

   • UWAGA: Niektóre biblioteki lib mogą wchodzić w interakcje z DOM i powinny być używane w odpowiedniej metodzie cyklu życia komponentów .