Угловая CLI, как включить внешние библиотеки

Question

Я пытаюсь включить мои внешние библиотеки в свой проект, и я выполнил шаги от here.

Я знаю, что я могу просто включить 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' 
    } 
}; 

радиально-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 в угловых Cli проекта?

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

Answer 1

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

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

npm install jquery 

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

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

и в ваших угловых CLI-build.js, помимо НПМ поставщика добавьте polyfills тоже:

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 в любом месте приложения, объявите его как-либо вместо импорта.

declare var $:any; 

Answer 2

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

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

Рассмотрите: (где «другое» - это lib, которое зависит от jQuery).

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

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

declare var firebase: any; 

declare module 'firebase' { 
    export = firebase; 
} 

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

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