Angular CLI 如何包含外部库
Angular CLI how to include external libraries
我正在尝试将我的外部库包含在我的项目中,并且我已按照 here.
中的步骤进行操作
我知道我可以在 index.html
中包含 CDN。但我想知道如何使用打字稿来完成。
我通过关注那个 wiki 添加我的 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)
那么,在 angular-cli 项目中,不仅要包含 JS 文件,还要包含 CSS 的建议方法是什么?
欢迎任何建议。
如果您打算使用导入,则可能需要为 jQuery 和 bootstrap 安装类型。另一个选项是将其声明为您计划使用的 component/typescript 文件中的任何一个。
包括 jQuery 运行 :
npm install jquery
并且在您的系统中-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;
虽然上面的回答是正确的你可能会觉得下面一毛更完整。在某些情况下,以上内容还不够。
在您的系统中-config.ts您可能需要在全局变量具有依赖项的地方添加元数据。否则您可能会收到关于某个变量的投诉,例如 jQuery 未定义。
考虑:(其中 "other" 是一个依赖于 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;
}
以上内容当然是 hack,但在此期间可能是必要的,因为打字可能不容易获得。在上面的例子中,firebase 的类型是用于 SDK 2.x,所以它们不能用于 3,因此需要上面的 hack。
注意:顺便说一句,我确实注意到有人为版本打字。 3. 关键是你应该始终尝试获取类型以获得更好的体验,但有时可能需要上述内容。
我正在尝试将我的外部库包含在我的项目中,并且我已按照 here.
中的步骤进行操作我知道我可以在 index.html
中包含 CDN。但我想知道如何使用打字稿来完成。
我通过关注那个 wiki 添加我的 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)
那么,在 angular-cli 项目中,不仅要包含 JS 文件,还要包含 CSS 的建议方法是什么?
欢迎任何建议。
如果您打算使用导入,则可能需要为 jQuery 和 bootstrap 安装类型。另一个选项是将其声明为您计划使用的 component/typescript 文件中的任何一个。
包括 jQuery 运行 :
npm install jquery
并且在您的系统中-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;
虽然上面的回答是正确的你可能会觉得下面一毛更完整。在某些情况下,以上内容还不够。
在您的系统中-config.ts您可能需要在全局变量具有依赖项的地方添加元数据。否则您可能会收到关于某个变量的投诉,例如 jQuery 未定义。
考虑:(其中 "other" 是一个依赖于 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;
}
以上内容当然是 hack,但在此期间可能是必要的,因为打字可能不容易获得。在上面的例子中,firebase 的类型是用于 SDK 2.x,所以它们不能用于 3,因此需要上面的 hack。
注意:顺便说一句,我确实注意到有人为版本打字。 3. 关键是你应该始终尝试获取类型以获得更好的体验,但有时可能需要上述内容。