angular 2 - 添加第 3 方库

Question

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

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

1. 添加 import * as moment from 'moment'; 到我想要的组件。
2. 运行 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"
  ]
}

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

Answer 1

当包含第 3 方库时，有两部分...您要执行的 javascript 代码，以及为 IDE 提供所有强类型优点的定义文件。

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

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

如果 lib 不是用 Typescript 编写的，但是一些好心人为它写了一个 thirdLib.d.ts 定义文件，你可以用 /// <reference path="thirdLibfolder/thirdLib.d.ts" /> 引用 d.ts 文件。在你的 ts 文件中。然后仍然包括实际执行的 javascript 和上面提到的脚本引用。

这些文件的位置，以及您是否在引用中包含扩展，取决于您的项目设置以及您使用的 bundler 和构建工具。 Webpack 将搜索 node_modules import {... 中引用的库的文件夹并将接受 .ts 的引用扩展和没有。如果包含 .ts，Meteor 将抛出错误扩展名。