Angular 2
Установка сторонних плагинов с помощью [email protected]

замечания

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

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

Добавление библиотеки jquery в проект angular-cli

1. Установите jquery через npm:

 npm install jquery --save 

Установите типизацию для библиотеки:

Чтобы добавить типизацию для библиотеки, выполните следующие действия:

typings install jquery --global --save

2. Добавьте файл jquery в файл angular-cli-build.js в массив vendorNpmFiles:

   Это требуется, чтобы система сборки забирала файл. После настройки угловое-cli-build.js должно выглядеть так:

Просмотрите node_modules и найдите файлы и папки, которые вы хотите добавить в папку поставщика.

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

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


    ]
  });
};

3. Настройте сопоставления SystemJS, чтобы узнать, где искать jquery:

   Конфигурация SystemJS находится в system-config.ts, и после выполнения пользовательской настройки соответствующий раздел должен выглядеть так:

/** 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. В вашем src / index.html добавьте эту строку

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

Другие варианты:

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

или же

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

а также

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

5. Импорт и использование библиотеки jquery в исходных файлах проекта:

   Импортируйте библиотеку jquery в ваши исходные файлы .ts:

declare var $:any;

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

Если вы правильно выполнили шаги, теперь у вас должна быть библиотека jquery, работающая в вашем проекте. Наслаждайтесь!

Добавить стороннюю библиотеку, которая не имеет типов

Обратите внимание, что это только для angular-cli версии 1.0.0-beta.10!

Некоторые библиотеки или плагины могут не иметь типов. Без них TypeScript не может ввести их проверку и, следовательно, вызывает ошибки компиляции. Эти библиотеки все еще можно использовать, но не так, как импортированные модули.

1. Включите ссылку на скрипт в библиотеку на своей странице ( 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>
   

   • Эти скрипты должны добавлять глобальные (например, THREE , mapbox , $ и т. Д.) Или присоединяться к глобальному

2. В компоненте, который требует их, используйте declare для инициализации переменной, соответствующей глобальному имени, используемому lib. Это позволяет TypeScript знать, что он уже был инициализирован. ¹

   declare var <globalname>: any;
   

   Некоторые библиотеки присоединяются к window , которые необходимо будет расширить, чтобы быть доступными в приложении.

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

3. Используйте lib в своих компонентах по мере необходимости.

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

   • ПРИМЕЧАНИЕ. Некоторые библиотеки могут взаимодействовать с DOM и должны использоваться в соответствующем методе жизненного цикла компонента .