角4和模数: Rangy

Question

我刚开始使用角4，我刚刚创建了一个简单的应用程序，它可以分叉角快速启动，现在我正在尝试导入兰迪。

在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

TypeScript

根据@types/rangy，您有两个选项：

备选方案1. import 'rangy'

• 你得到全局变量‘范围’
• 不适用于SystemJS

备选方案2. import * as rangy from 'rangy'

• 您得到局部变量'rangy‘(或您定义的任何东西)。

您不能执行import rangy from 'rangy'，因为rangy没有默认的es6导出。

您不能执行import { RangySelection } from 'rangy'，因为rangy不是es6兼容的模块。接口RangySelection将提供这两种导入选项。

角(SystemJS)

要使模块正确地从服务器返回，您必须告诉SystemJS应该在哪里查找它。这是在System.config内部完成的

将行'rangy': 'npm:rangy/lib/rangy-core.js',添加到map配置元素中。从角快速启动的整个配置：

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'
    }
  }
});

Answer 2

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

import "rangy";

rangy.getSelection();

Answer 3

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

declare var rangy:any;

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

使用角cli，您可以在.ange-cli.json中包含所需的.js文件：

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

否则，将cdn托管并将其发布到index.html。

下面是一个使用cdn版本的柱塞示例：

柱塞实例