我正在尝试使用角度2 cli
我想在我的项目中使用momentjs，所以这就是我所做的：
1.使用角度cli创建项目
2.运行npm install --save moment
3.从src文件夹运行typings init + typings install --save moment
4.增加系统模块的时刻：
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
moment: {
map: 'node_modules/moment/moment.js',
type: 'cjs',
defaultExtension: 'js'
}
}
});
import * as moment from 'moment';添加到我想要的组件中。ng serve并获取：[DiffingTSCompiler]：Typescript发现以下错误： app / angular-day-picker.ts（2,25）：找不到模块'时刻'。 错误：[DiffingTSCompiler]：Typescript发现以下错误： app / angular-day-picker.ts（2,25）：找不到模块'时刻'。 在DiffingTSCompiler.doFullBuild（/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29） 在DiffingTSCompiler.rebuild（/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:101:18） 在DiffingPluginWrapper.rebuild（/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/diffing-broccoli-plugin.js:87:45） at /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 $$ tryCatch（/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16） 在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） at /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） 在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"
]
}
我做错了什么？我在文档中找不到添加第三方库的指南。
答案 0 :(得分：40)
当包含第三方库时，有两个部分...您要执行的javascript代码，以及给IDE提供所有强类型优点的定义文件。
显然，如果应用程序要运行，第一个必须存在。最简单的方法是在主持Angular 2应用程序的html页面中包含带有<script src="thirdLib.js">标记的第三方库。这不会让你定义，所以你不会有IDE的好处，但应用程序将运行。 （要阻止IDE抱怨它不知道变量'thirdLib'，请将declare var thirdLib:any添加到ts文件中。因为它的类型为any，IDE将不会为thirdLib提供代码完成，但它也不会抛出IDE错误。）
要执行代码和定义，如果lib是用Typescript编写的，则可以使用import {thirdLib} from 'thirdLibfolder/thirdLib'从代码中添加对该ts文件的引用。 lib的ts文件本质上包含执行代码和打字稿定义。
如果lib不是在Typescript中编写的，但是一些好的灵魂为它编写了一个thirdLib.d.ts定义文件，你可以在ts文件中引用带有/// <reference path="thirdLibfolder/thirdLib.d.ts" />的d.ts文件。然后仍然包含实际执行的javascript和脚本引用，如上所述。
这些文件的位置以及您是否在参考中包含扩展名，特定于您的项目设置以及您正在使用的打包程序和构建工具。 Webpack将在node_modules文件夹中搜索import {...中引用的库，并接受.ts扩展名的引用。如果包含.ts扩展名，则Meteor会抛出错误。
答案 1 :(得分：5)
实施例.. 首先，我们需要从npm安装ChartJS。
npm install chart.js --save
现在我们已经安装了ChartJS，我们需要在angular-cli-build.js文件中告诉CLI新文件所在的文件，以便捆绑它。
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' }
};
答案 2 :(得分：2)
仍然不支持通过命令支持第三方lib。
暂时执行以下操作：
此维基页面提供了更详细的解释：
答案 3 :(得分：2)
Still Angular-cli在第三方库集成方面存在一些问题。直到他们正确地修复它，我可以给你一个黑客。假设您想在代码中使用_ of lodash。所以我会给你我的工作代码场景 -
安装lodash
npm install lodash --save
typings install lodash --ambient --save
之前确保全局安装打字
npm install typings -g
然后在你的angular-cli-build.json中，确保它仍然是这样的
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
'lodash/**/*.js'
]
});
};
并在您的system-config.ts中：
/** Map relative paths to URLs. */
const map: any = {
'lodash': 'vendor/lodash/lodash.js'
};
/** User packages configuration. */
const packages: any = {
'lodash': {
format: 'cjs'
}
};
<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>
现在在您想要使用lodash的组件中，以这种方式编写
declare var _:any;
@Component({
})
export class YourComponent {
ngOnInit() {
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
}
}
它对我有用:)。我通过angular-cli在angular2项目中使用了巨大的第三方库。希望它也能帮到你
编辑：
如果您的第三方库没有获得任何npm。在assets文件夹下创建一个src文件夹。然后，您可以为js，css和images添加单独的文件夹。将您的第三方js放在js文件夹中。然后你必须像这样引用index.html中的js文件：
<script src="assets/js/your_js.js"></script>
现在，当您执行ng serve或ng build时，它会自动使用您的assets/js更新公用文件夹。希望您了解整个场景：）
答案 4 :(得分：1)
如果您要包含的库不是打字，您可以通过两种方式将其包含在角度2应用程序中：
使用npm： 步骤a。使用包管理器安装库
步骤b。将库的路径添加到systemjs.config.js文件中的地图对象。
示例：
'jquery'：'npm：jquery / dist / jquery.js'， 'd3'：'npm：d3 / build / d3.js'
步骤c。在app.module.ts中导入它 例如：import'jquery'; import'd3';
步骤d。声明它
例如： 声明var $：any;
声明var d3：any;
答案 5 :(得分：0)
我目前没有自己使用moment.js。所以我不确定，但在我看来，你正在尝试使用moment.js作为打字稿模块，也许它不是打字稿模块。我建议另一种方法。不要使用moment.js作为模块导入，而是使用d.ts文件。为了实现这一点，我使用tsd： 打开一个cmd：
全球安装tsd
更改为项目根目录
除此之外，创建一个tsd.json文件来跟踪已安装的d.ts文件
在此之后，我确实在以下时间之后在打字稿中获得代码完成。
没有进一步测试......
我现在使用typings而不是tds作为TypeScript定义的管理员。 Tds现已弃用。
您可能可以像这样安装moment.d.ts： 打字安装时刻 - 边框 - 保存
答案 6 :(得分：0)
答案 7 :(得分：0)
查看https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries，了解如何使用systemjs添加第三方库。