Angular 4 和模块：Rangy

Question

我是 Angular 4 的新手，我刚刚创建了一个简单的应用程序 fork Angular 快速入门，现在我正在尝试导入 Rangy.

在 package.json 我现在有以下依赖项：

"rangy": "^1.3.0",
"@types/rangy": "^0.0.27"

我希望能够简单地做一个

import {RangySelection} from 'rangy';

但这只是给我错误

TS2306: File '/projects/mylittleapp/node_modules/@types/rangy/index.d.ts' is not a module.

我做错了什么？

编辑：
我知道它与 SystemJS 以及如何在那里导入模块有关，但我不知道如何...

Answer 1

Rangy 的类型定义表明它没有导出模块。它只声明了一个名为 rangy 的变量。所以你可以像这样使用它：

import "rangy";

rangy.getSelection();

Answer 2

rangy npm 包不提供任何类型。这意味着您必须通过定义一个简单的类型来自己利用它：

declare var rangy:any;

这使得 rangy 在您的代码中可用，您可以随心所欲地使用它。

使用 angular cli，您可以在 .angular-cli.json:

中包含所需的 .js 文件

"scripts": [
    "../node_modules/rangy/lib/rangy-core.js"
  ]

否则获取 cdn 托管并将其广告到 index.html。

这里是一个使用cdn版本的Plunker例子：

Plunker Example

Answer 3

TypeScript

根据 @types/rangy 你有两个选择：

选项 1。import 'rangy'

你得到了全局变量'rangy'
不适用于 SystemJS

选项 2。import * as rangy from 'rangy'

你得到局部变量'rangy'（或任何你定义的）

你不能做 import rangy from 'rangy' 因为 rangy 没有默认的 es6 导出。

你不能做 import { RangySelection } from 'rangy' 因为 rangy 不是 es6 兼容模块。接口 RangySelection 将可用于两种导入选项。

Angular (SystemJS)

要正确获取从服务器返回的模块，您必须告诉 SystemJS 它应该在哪里寻找它。这是在 System.config:

内部完成的

将第 'rangy': 'npm:rangy/lib/rangy-core.js', 行添加到配置的 map 元素。来自 angular 快速入门的完整配置：

System.config({
  paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
  },
  // map tells the System loader where to look for things
  map: {
    // our app is within the app folder
    'app': 'app',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

    // other libraries
    'rxjs':                      'npm:rxjs',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
    'rangy': 'npm:rangy/lib/rangy-core.js',
  },
  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
    app: {
      defaultExtension: 'js',
      meta: {
        './*.js': {
          loader: 'systemjs-angular-loader.js'
        }
      }
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

Angular 4 和模块：Rangy

Angular 4 and modules: Rangy

angular

typescript

npm

rangy