Angular CLI, как подключить внешние библиотеки

Я пытаюсь включить свои внешние библиотеки в свой проект и выполнил шаги из здесь.

Я знаю, что могу просто включить CDN в свой index.html. Но я хотел бы знать, как я могу сделать это с машинописными текстами.

У меня нет проблем с включением моей библиотеки moment, следуя этой вики, но у меня проблемы с добавлением моих bootstrap и jquery.

система-config.ts

const map: any = {
  'moment': 'vendor/moment/moment.js',
  'jquery': 'vendor/jquery/dist/jquery.js',
  'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.js'
};

/** User packages configuration. */
const packages: any = {
  'moment':{
    format: 'cjs'
  },
  'jquery':{
    format: 'cjs',
    defaultExtension: 'js'
  },
  'bootstrap':{
    format: 'cjs',
    defaultExtension: 'js'
  }
};

angular-cli-build.js

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/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'moment/moment.js',
      'jquery/dist/jquery.js',
      'bootstrap/dist/js/bootstrap.js'
    ],
    sassCompiler: {
      includePaths: [
        'src/app/styles'
      ]
    }
  });
};

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import * as moment from 'moment';
import * as jquery from 'jquery';
// import * as bootstrap from 'bootstrap';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [],
  directives: [ROUTER_DIRECTIVES]
})

export class AppComponent {
    title = moment().format().toString();
}

Если я закомментирую jquery и bootstrap, приложение будет работать нормально. Вот сообщение об ошибке;

Build error

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /home/vadi/dev/orbits/x-orbit/tmp/broccoli_type_script_compiler-input_base_path-p2RtqzmR.tmp/0/src/app/app.component.ts (4, 25): Cannot find module 'jquery'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Итак, каков предлагаемый подход для включения не только файлов JS, но и CSS в проект angular-cli?

Любое предложение приветствуется.


typescript angular angular-cli broccolijs
person choz    schedule 01.07.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вам может понадобиться установить типизацию для jQuery и начальной загрузки, если вы планируете использовать import . Другой вариант - объявить его как любой в файле компонента / машинописного текста, который вы планируете использовать.

Чтобы включить запуск jQuery:

npm install jquery

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

 const map: any = {
   'jquery': 'vendor/jquery'
 };

и в вашем angular-cli-build.js, помимо поставщика npms, также добавьте полифиллы:

 vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'jquery/**/*.js'
    ],
    polyfills:[
       'vendor/jquery/dist/jquery.min.js', 
       'vendor/es6-shim/es6-shim.js',
        'vendor/reflect-metadata/Reflect.js',
        'vendor/systemjs/dist/system.src.js',
        'vendor/zone.js/dist/zone.js', 
    ]

Попробуйте повторить то же самое для начальной загрузки. Чтобы использовать jquery в любом месте приложения, объявите его как any вместо import.

declare var $:any;
person Krishnanunni Jeevan    schedule 01.07.2016
comment
Спасибо за ваш ответ, я выполнил указанные вами шаги, и кажется, что jQuery еще не загружен. Я выполнил проверку, используя window.jQuery. Любая подсказка об этом? - person choz; 04.07.2016

arrow_upward
2
arrow_downward

Хотя приведенный выше ответ верен, вы можете найти следующий вариант более полным. В некоторых случаях вышеперечисленного будет недостаточно.

В вашем system-config.ts вам может понадобиться добавить мета, где глобальные переменные имеют зависимости. В противном случае вы можете получить жалобы на то, что определенная переменная, например jQuery, не определена.

Учтите: (где «другое» — это библиотека, зависящая от jQuery).

/** User meta config */
const meta: any = {
  'jquery': {
    format: 'global',
    exports: 'jQuery'
  },
  'other': {
    format: 'global',
    exports: 'other',
    deps: ['jquery']
  }
};

Чтобы иметь возможность импортировать эту библиотеку, вам может потребоваться сделать что-то похожее на следующее:

declare var firebase: any;

declare module 'firebase' {
    export = firebase;
}

Вышеупомянутое, конечно, является хаком, но может быть необходимо в промежутке времени, так как типизация может быть недоступна. В приведенном выше примере типизация для firebase была для SDK 2.x, поэтому их нельзя было использовать для 3, поэтому необходим взлом выше.

ПРИМЕЧАНИЕ. Кстати, я заметил, что кто-то печатал для вер. 3. Суть в том, что вы всегда должны пытаться использовать типизированные источники для лучшего опыта, но иногда может потребоваться вышеперечисленное.

person origin1tech    schedule 05.07.2016