angular 2-添加第三方库
我正在尝试使用angular 2 cli。
我想在我的项目中使用momentjs，所以下面是我所做的：
使用angular cli创建了
- 项目。
- 运行angular源文件夹运行
typings init+typings install --save moment. - added moment到系统模块：
typings init
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
moment: {
map: 'node_modules/moment/moment.js',
type: 'cjs',
defaultExtension: 'js'
}
}
});- 在我想要的component.
- running
ng serve中添加了import * as moment from 'moment';并获取：
DiffingTSCompiler: Typescript发现以下错误:app/angular-day Picker.ts (2，25)：找不到模块'moment‘。错误: DiffingTSCompiler: Typescript发现以下错误:app/angular-day-PICER.TS (2，25)：找不到模块'moment‘。at DiffingTSCompiler.doFullBuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:101:18) at DiffingPluginWrapper.rebuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/ at DiffingTSCompiler.doFullBuild DiffingTSCompiler.rebuild差异-花椰菜-插件.js:87:45)位于库$rsvp$$内部$$tryCatch (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)的/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/broccoli/lib/api_compat.js:42:21在lib$rsvp$$internal$$invokeCallback (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)在/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11在lib$rsvp$asap$$flush (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9) at doNTCallback0 (node.js:430:9) at process._tickCallback (node.js:359:13)
这是我的tsconfig.json文件：
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "",
"module": "system",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"rootDir": ".",
"sourceMap": true,
"sourceRoot": "/",
"target": "es5"
},
"files": [
"typings/main.d.ts"
],
"exclude": [
"typings/browser.d.ts",
"typings/browser"
]
}我做错什么了？我在文档中找不到添加第三方库的指南。
回答 8
Stack Overflow用户
发布于 2016-03-04 23:01:23
当包含第三方库时，有两个部分...您想要执行的javascript代码和为IDE提供的定义文件都是强类型的优点。
显然，如果应用程序要运行，第一个必须存在。要做到这一点，最简单的方法是在托管Angular 2应用的html页面中包含带有<script src="thirdLib.js">标签的第三方库。这不会让你得到定义，所以你不会有IDE的好处，但应用程序会起作用。(要阻止集成开发环境抱怨它不知道变量'thirdLib'，请将declare var thirdLib:any添加到ts文件中。因为它是any类型，所以集成开发环境不会为thirdLib提供代码完成功能，但也不会抛出集成开发环境错误。)
要获得执行代码和定义，如果库是用Typescript编写的，则可以使用import {thirdLib} from 'thirdLibfolder/thirdLib'从代码中添加对该ts文件的引用。lib的ts文件本质上既有执行代码又有typescript定义。
如果库不是用Typescript编写的，但是某个好心人为它写了一个thirdLib.d.ts定义文件，那么您可以在ts文件中使用/// <reference path="thirdLibfolder/thirdLib.d.ts" />来引用d.ts文件。然后仍然包括如上所述的脚本引用的实际执行的javascript。
这些文件的位置，以及您是否在参考中包含扩展，都特定于您的项目设置以及您正在使用的捆绑器和构建工具。Webpack将在node_modules文件夹中搜索import {...中引用的库，并接受带.ts扩展名和不带扩展名的引用。如果包含.ts扩展，Meteor将抛出错误。
Stack Overflow用户
发布于 2016-09-02 20:08:29
示例..首先，我们需要从npm安装ChartJS。
npm install chart.js --save现在我们已经安装了ChartJS，我们需要在angular- CLI -build.js文件中告诉cli新的JavaScript文件的位置，以便将其捆绑在一起。
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/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'chart.js/Chart.min.js',
]
});
};
const map: any = {
'chartjs': 'vendor/chart.js/'
};
const packages: any = {
chartjs: { defaultExtension: 'js', main: 'Chart.min.js' }
};Stack Overflow用户
发布于 2016-05-08 09:01:24
仍然不支持通过命令支持第三方lib。
目前，请执行以下操作：
src/assets/js/moment.js
- include index.html
- install npm moment
- npm install moment
- copy moment.js from node_
/moment to src/assets/js/moment.js
- include assets/js/moment.js在index.html
- install中键入并导入lib到您需要的.ts文件中
- 运行ng服务并享受使用moment :)
这个维基页面给出了更详细的解释：
https://stackoverflow.com/questions/35796961
复制相似问题
腾讯云开发者
