angular 2 - 添加第 3 方库 [英] angular 2 - adding 3rd party libs

问题描述

我正在尝试开始使用 angular 2 cli.
我想在我的项目中使用 momentjs 所以这是我所做的:
1. 使用 angular cli 创建项目.
2. 运行 npm install --save moment
3. 从 src 文件夹运行 typings init + typings install --save moment.
4. 系统模块新增时刻:

System.config({包:{应用程序: {格式:'注册'，默认扩展名:'js'},片刻: {地图:'node_modules/moment/moment.js'，类型:'cjs'，默认扩展名:'js'}}});

5. 将 import * as moment from 'moment'; 添加到我想要的组件中.
6. 运行 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)在/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)在/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)在 process._tickCallback (node.js:359:13)

这是我的 tsconfig.json 文件:

<代码>{编译器选项":{声明":假，emitDecoratorMetadata":真，"experimentalDecorators": 真,"mapRoot": "",模块":系统"，"moduleResolution": "节点",noEmitOnError":真，noImplicitAny":假，"rootDir": ".",源地图":真，"sourceRoot": "/",目标":es5"},文件":[打字/main.d.ts"],排除": ["打字/浏览器.d.ts",打字/浏览器"]}

我做错了什么?我在文档中找不到添加 3rd 方库的指南.

解决方案

当包括 3rd 方库时，有两部分......你想要执行的 javascript 代码，以及为 IDE 提供所有强大功能的定义文件 -打字善良.

显然，如果应用程序要运行，第一个必须存在.获得它的最简单方法是在托管 Angular 2 应用程序的 html 页面中包含带有 <script src="thirdLib.js"> 标记的 3rd 方库.这不会给你定义，所以你不会有 IDE 的优点，但应用程序会运行.(要阻止 IDE 抱怨它不知道变量thirdLib"，请将 declare varthirdLib:any 添加到您的 ts 文件中.因为它的类型为 anyIDE 不会为thirdLib 提供代码完成，但它也不会抛出IDE 错误.)

要获得执行代码和定义，如果库是用 Typescript 编写的，您可以使用 import {thirdLib} from 'thirdLibfolder/thirdLib 从代码中添加对该 ts 文件的引用'.lib 的 ts 文件本质上具有执行代码和打字稿定义.

如果lib不是用Typescript写的，但有好心人为它写了一个thirdLib.d.ts定义文件，你可以用// 在您的 ts 文件中.然后仍然包含实际执行的 javascript 和上面提到的脚本引用.

这些文件的位置，以及您是否在参考中包含扩展名，都特定于您的项目设置以及您使用的打包器和构建工具.Webpack 将在 node_modules 文件夹中搜索 import {... 中引用的库，并接受带有 .ts 扩展名和不带扩展名的引用.如果包含 .ts 扩展名，Meteor 将抛出错误.

I am trying to start using angular 2 cli.
I want to use momentjs in my project so here is what I have done:
1. created project using angular cli.
2. run npm install --save moment
3. from src folder run typings init + typings install --save moment.
4. added moment to system modules:

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    moment: {
      map: 'node_modules/moment/moment.js',
      type: 'cjs',
      defaultExtension: 'js'
    }
  }
});

5. added import * as moment from 'moment'; to my desired component.
6. running ng serve and getting:

[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)

Here is my tsconfig.json file:

{
  "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"
  ]
}

What did I do wrong? I can't find in the docs a guide to add 3rd party libs.

解决方案

When including 3rd party libraries, there are two parts... the javascript code you want to execute, and the definition files to give the IDE all it's strongly-typed goodness.

Obviously, the first must be present if the app is to function. The easiest way to get that is to include the 3rd party library with a <script src="thirdLib.js"> tag in the html page that hosts your Angular 2 app. That will not get you definitions, so you will not have IDE goodness, but the app will function. (to stop the IDE from complaining that it doesn't know about variable 'thirdLib', add declare var thirdLib:any to your ts file. Because it is of type any the IDE will not offer code-completion for thirdLib, but it will also not throw IDE errors.)

To get executing code and definitions, if the lib was written in Typescript, you can add a reference to that ts file from your code with import {thirdLib} from 'thirdLibfolder/thirdLib'. The lib's ts file by its nature has both the executing code and the typescript definitions.

If the lib is not written in Typescript, but some good soul wrote a thirdLib.d.ts definition file for it, you can reference the d.ts file with /// <reference path="thirdLibfolder/thirdLib.d.ts" /> in your ts file. And then still include the actual executing javascript with the script reference as mentioned above.

The location of these files, and whether you include extensions in the reference, are specific to your project setup and the bundler and build tool you are using. Webpack will search node_modules folder for libraries referenced in the import {... and will accept a reference with .ts extension and without. Meteor will throw an error if you include the .ts extension.

这篇关于angular 2 - 添加第 3 方库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！