Angular 2 - добавление сторонних библиотек

Ответ 1

При включении сторонних библиотек есть две части: код javascript, который вы хотите исполнить, и файлы определений, чтобы дать IDE все это сильно набрало доброту.

Очевидно, что первое должно присутствовать, если приложение должно функционировать. Самый простой способ получить это - включить стороннюю библиотеку с тегом <script src="thirdLib.js"> на странице html, на которой размещено ваше приложение Angular 2. Это не даст вам определений, поэтому у вас не будет поддержки IDE, но приложение будет работать. (чтобы остановить IDE от жалобы, что он не знает о переменной "thirdLib", добавьте declare var thirdLib:any в ваш ts файл. Поскольку он имеет тип any, среда IDE не будет предлагать завершение кода для третьегоLib, но это будет также не бросайте ошибки IDE.)

Чтобы получить исполняемый код и определения, если lib был написан в Typescript, вы можете добавить ссылку на этот ts файл из вашего кода с помощью import {thirdLib} from 'thirdLibfolder/thirdLib'. Файл lib ts по своей природе имеет как код выполнения, так и определения typescript.

Если lib не записан в Typescript, но какая-то хорошая душа написала для него файл определения третьегоLib.d.ts, вы можете ссылаться на файл d.ts с /// <reference path="thirdLibfolder/thirdLib.d.ts" /> в вашем ts файле. А затем включите фактический исполняемый javascript с помощью ссылки script, как указано выше.

Местоположение этих файлов, а также добавление расширений в ссылку, зависит от вашей настройки проекта и используемого вами инструмента для связки и сборки. Webpack будет искать папку node_modules для библиотек, на которые ссылаются в import {..., и будет принимать ссылку с расширением .ts и без нее. Meteor выдает ошибку, если вы включите расширение .ts.

Ответ 2

Пример.. Сначала нам нужно установить ChartJS из npm.

npm install chart.js --save

Теперь, когда мы установили ChartJS, нам нужно сообщить CLI в файле angular -cli-build.js, где находится новый файл JavaScript, чтобы он мог быть связан.

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

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'chart.js/Chart.min.js',
    ]
  });
};


const map: any = {
  'chartjs': 'vendor/chart.js/'
};


const packages: any = {
  chartjs: { defaultExtension: 'js', main: 'Chart.min.js' }
};

Ответ 3

поддержка сторонней библиотеки lib по-прежнему не поддерживается.

Сделайте следующее на данный момент:

• npm момент установки
• copy moment.js от node_modules/момент до src/assets/js/moment.js
• include assets/js/moment.js в вашем index.html
• установите типизацию и импортируйте lib в ваш .ts файл, где вам это нужно
• запустите ng и наслаждайтесь использованием момента:)

Эта страница wiki дает более подробное объяснение:

https://github.com/angular/angular-cli/wiki/3rd-party-libs

Ответ 4

Тем не менее Angular -cli имеет некоторые проблемы с интеграцией сторонних библиотек. Пока они не исправят это, я могу дать вам взломать. Допустим, вы хотите использовать _ lodash в своем коде. Поэтому я дам вам сценарий моего рабочего кода -

Чтобы установить lodash

npm install lodash --save
typings install lodash --ambient --save

перед этим убедитесь, что вы устанавливаете типизацию глобально

npm install typings -g

Затем в Angular -cli-build.json убедитесь, что он остался таким образом

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'lodash/**/*.js'
    ]
  });
};

и в вашей системе-config.ts:

/** Map relative paths to URLs. */
 const map: any = {
   'lodash': 'vendor/lodash/lodash.js'
 };

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: 'cjs'
   }
 };

в вашем src/index.html добавьте эту строку (это странное исправление)

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

теперь в вашем компоненте, где вы хотите использовать lodash, напишите так

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}

это сработало для меня:). Я использовал огромные сторонние библиотеки в проекте angular2 через Angular -cli. Надеюсь, это вам тоже поможет.

Edit:

Если вы не получаете npm для своих сторонних библиотек. Создайте папку assets в папке src. Затем вы можете добавить отдельные папки для js, css и images. Поместите сторонние js внутри папки js. Затем вам нужно ссылаться на файл js в вашем index.html следующим образом:

<script src="assets/js/your_js.js"></script>

Теперь, когда вы выполните ng serve или ng build, он автоматически обновит общую папку с помощью assets/js. Надеюсь, вы поймете весь сценарий:)

Ответ 5

В настоящее время я не использую сам moment.js. Поэтому я не уверен, но мне кажется, что вы пытаетесь использовать moment.js в качестве модуля typescript и, возможно, это не модуль typescript. Я предлагаю другой подход. Не используйте import.js как модуль для импорта, но вместо этого используйте файл d.ts. Для этого я использую tsd: Откройте cmd:

• npm install tsd -g

• Глобальная установка tsd

• cd [ваш проект dir]

• Изменение корня проекта

• tsd init

• Среди других вещей: Создает файл tsd.json для отслеживания установленных файлов d.ts

• tsd установить момент -save

После этого я получил завершение кода в typescript после: момента.

Не тестировалось далее...

Теперь я использую typings вместо tds в качестве менеджера для определений typescript. Tds теперь устарел.

Вероятно, вы можете установить момент .d.ts следующим образом: Типичный момент установки --ambient --save

Ответ 6

Ответ можно найти по следующей ссылке: https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

Ответ 7

Зайдите в https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries, чтобы добавить стороннюю библиотеку с помощью системных систем.

Ответ 8

Если библиотека, которую вы хотите включить, не входит в типизацию, у вас есть два способа включить ее в приложение angular 2:

• с использованием npm: шаг a. установить библиотеку с помощью диспетчера пакетов

  шаг b. добавьте путь библиотеки к объекту карты в файле systemjs.config.js.

пример:

'jquery': 'npm: jquery/dist/jquery.js',  'd3': 'npm: d3/build/d3.js'

шаг c. импортировать его в app.module.ts   Пример:

import 'jquery'; import 'd3';

шаг d. объявить его

Пример:       объявить var $: any;

объявить var d3: any;

2. просто вы можете включить это в тег script в index.html и объявить его.