角度2 - 添加第三方库

Question

我想开始使用角度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 found the following errors: app/angular-day-picker.ts (2, 25): Cannot find module 'moment'. Error: [DiffingTSCompiler]: Typescript found the following errors: app/angular-day-picker.ts (2, 25): Cannot find module 'moment'. at DiffingTSCompiler.doFullBuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29) at DiffingTSCompiler.rebuild (/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/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 at 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) at 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 at 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" 
    ] 
} 

我做了什么错？我无法在文档中找到添加第三方库的指南。

Answer 1

当包含第三方库时，有两个部分...您要执行的JavaScript代码以及定义文件，以使IDE具有强大的优点。

显然，第一个必须存在，如果应用程序的功能。最简单的方法是在托管Angular 2应用程序的html页面中包含带有<script src="thirdLib.js">标签的第三方库。这不会让你定义，所以你不会有IDE的好处，但该应用程序将起作用。 （要停止IDE抱怨它不知道变量'thirdLib'，请将declare var thirdLib:any添加到您的ts文件中。因为它的类型为any，IDE不会为thirdLib提供代码完成，但它也不会抛出IDE错误。）

要得到执行代码和定义，如果LIB写在打字稿，你可以到从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扩展名，流星会发出错误。

Answer 2

我目前没有使用moment.js。所以我不确定，但在我看来，你正在尝试使用moment.js作为打字稿模块，也许它不是打字稿模块。我建议另一种方法。不要使用moment.js作为导入模块，而是使用d.ts文件。要做到这一点，我使用TSD： 打开CMD：

• NPM安装TSD -g

• Global install of tsd

• CD [项目目录]

• Change to your project root

• TSD初始化

• Among another things, Creates a tsd.json file to keep track of your installed d.ts files

• tsd安装时刻-save

在此之后，我确实在打字稿后面的代码完成：时刻。

没有进一步测试...

现在，我使用typings，而不是TDS，作为经理打字稿定义。 Tds现已弃用。

你或许可以安装moment.d.ts这样的： 分型安装时刻--ambient --save

Answer 3

答案可以在下面的链接中找到：https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

Answer 4

支持第三方的lib通过命令仍然不被支持。

做的那一刻以下：

1. NPM安装瞬间从node_modules
2. 副本moment.js /力矩为src /资产/ JS/moment.js
3. 包括资产/ JS /力矩在您的index.html的.js
4. 安装的分型和导入库到您的.ts文件在你需要它
5. 运行NG服务和享受的矩:)

本wiki页面给出了更详细的解释：

https://github.com/angular/angular-cli/wiki/3rd-party-libs

Answer 5

退房https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries，对于如何与systemjs添加第三方库。

Answer 6

仍然Angular-cli与第三方库集成有一些问题。直到他们修好它，我可以给你一个黑客。假设你想在你的代码中使用lodash。所以，我会给你我的工作代码scenario-

要安装lodash

npm install lodash --save 
typings install lodash --ambient --save 

之前确保安装分型全球

npm install typings -g 

然后在你的角度-CLI-build.json，确保它仍然是这样的

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     ... 
     'lodash/**/*.js' 
    ] 
    }); 
}; 

并在你的系统配置。TS：

/** Map relative paths to URLs. */ 
const map: any = { 
    'lodash': 'vendor/lodash/lodash.js' 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'lodash': { 
    format: 'cjs' 
    } 
}; 

在你的src/index.html中加入这一行（这是奇怪的修复），您要使用lodash

<script src="/vendor/lodash/lodash.js" type="text/javascript"></script> 

现在

在你的组件，写这样

declare var _:any; 

@Component({ 
}) 
export class YourComponent { 
    ngOnInit() { 
    console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); 
    } 
} 

它为我工作:)。我通过angular-cli在我的angular2项目中使用了大量的第三方库。希望这将有助于你太

编辑：

如果你不为你的第三方库的任何NPM。在您的src文件夹下创建一个assets文件夹。然后，您可以为js，css和images添加单独的文件夹。将您的第三方j放入js文件夹中。然后，你必须引用js文件在您的index.html像这样：

<script src="assets/js/your_js.js"></script> 

现在，当你做ng serve或ng build它会自动与您assets/js更新公用文件夹。希望你了解整个场景:)

Answer 7

例子.. 首先我们需要从npm安装ChartJS。

npm install chart.js --save 

现在，我们已经安装了ChartJS我们需要告诉CLI在新的JavaScript文件所在，因此它可以被捆绑的角度-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/**/*.+(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' } 
}; 

Answer 8

如果你想包括图书馆是不是在分型有两种方式，包括它在角2应用程序：

1. 使用NPM： 步骤。使用软件包管理器安装库

   步骤b。将库的路径添加到systemjs.config.js文件中的映射对象。

例如：

'的jquery'： 'NPM：jquery的/ DIST /的jquery.js'， 'D3'： 'NPM：D3 /建造/ d3.js'

步骤C。导入它在app.module.ts 例如：

import'jquery'; import'd3';

步骤d。声明它

示例： 声明var $：any;

declare var d3：any;

1. 只需将其包含在index.html中的脚本标记中并声明它即可。