Angular CLI如何包含外部库(Angular CLI how to include external libraries)

我正在尝试将我的外部库包含在我的项目中，并且我已经按照这里的步骤进行操作。

我知道我可以在index.html包含CDN。但是我想知道如何使用打字稿来做到这一点。

我没有问题，包括我的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

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文件，还包括angular-cli项目中的CSS？

任何建议表示赞赏。

I am trying to include my external libraries in my project and I've followed steps from here.

I know that I can just include CDNs in my index.html. But I'd like to know how I can do it with typescripts.

I have no problem including my moment library by following that wiki, but I have issue adding my bootstrap and jquery.

system-config.ts

angular-cli-build.js

app.component.ts

If I comment jquery and bootstrap out, the app would work fine. Here's the error message;

So, What's the suggested approach to include, not only JS files, but also for CSS in angular-cli project?

Any suggestion is appreciated.

最满意答案

如果您计划使用导入，则可能需要为jQuery和bootstrap安装typings。另一个选项是将其声明为您计划使用的component / typescript文件中的任何一个。

要包含jQuery运行：

npm install jquery

并在您的system-config.ts中：

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

在你的angular-cli-build.js中，除了供应商npms之外还添加了polyfill：

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', ]

尝试重复相同的bootstrap。要在应用程序的任何位置使用jquery，请将其声明为any而不是import。

declare var $:any;

You may need to install typings for jQuery and bootstrap if you are planning to use import . The other option is declare it as any in the component/typescript file you are planning to use.

To include jQuery run :

npm install jquery

and in your system-config.ts:

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

and in your angular-cli-build.js, besides the vendor npms add the polyfills too:

Try repeating the same for bootstrap. To use jquery anywhere in the app, declare it as any instead of import.

declare var $:any;

更多推荐