我正试图在我的项目中包含我的外部库,我已经遵循了here中的步骤。
我知道我可以在我的index.html
中包含cdn。但我想知道我怎样才能用打字稿做到这一点。
我没有问题通过wiki包含我的moment
库,但是添加我的bootstrap
和jquery
时有问题。
系统配置
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'
]
}
});
};
应用组件
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的方法是什么?
如有任何建议,我们将不胜感激。
最佳答案
如果计划使用import,则可能需要安装jquery和bootstrap的类型。另一个选项是在您计划使用的组件/类型脚本文件中将其声明为any。
要包括jquery run:
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',
]
尝试对引导重复相同的操作。要在应用程序中的任何位置使用jquery,请将其声明为any而不是import。
declare var $:any;