Angular 4和模块:Rangy [英] Angular 4 and modules: Rangy

问题描述

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

I'm new to Angular 4, I just created a simple app forking the Angular quickstart and now I'm trying to import Rangy.

在package.json上，我现在具有以下依赖项:

On package.json I now have the following dependencies:

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

我希望能够简单地做一个

I expected to be able to simply do a

import {RangySelection} from 'rangy';

但这只是给我错误

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

我在做什么错了?

我了解这与SystemJS以及如何在其中导入模块有关，但我不知道如何...

I understand that it has to do with SystemJS and how to import modules there, but I can't figure out how...

推荐答案

TypeScript

根据@types/rangy，您有两个选择:

选项1.import 'rangy'

• 您获得全局变量"rangy"
• 不适用于SystemJS

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

• 您将获得局部变量"rangy"(或任何您定义的变量)

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

You can't do import rangy from 'rangy' because rangy doesn't have default es6 export.

您不能执行import { RangySelection } from 'rangy'，因为rangy不是es6兼容模块.界面RangySelection将同时具有两个导入选项.

You can't do import { RangySelection } from 'rangy' because rangy is not es6 compatible module. Interface RangySelection will be available with both options of import.

Angular(SystemJS)

要正确地从服务器返回模块，必须告诉SystemJS在哪里寻找模块.这是在System.config内部完成的:

To get the module returned from server properly, you must tell SystemJS where it should look for it. This is done inside System.config:

将行'rangy': 'npm:rangy/lib/rangy-core.js',添加到config的map元素中.从角度快速入门进行整个配置:

Add line 'rangy': 'npm:rangy/lib/rangy-core.js', to map element of config. Whole config from angular quickstart:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！