Angular 4 and modules: Rangy

问题

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

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

but that just gives me the error

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

What am I doing wrong?

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

回答1:

TypeScript

According to @types/rangy you have two options:

Option 1. import 'rangy'

you get global variable 'rangy'
doesn't work with SystemJS

Option 2. import * as rangy from 'rangy'

you get local variable 'rangy' (or whatever you define)

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

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)

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

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

回答2:

The type definitions for Rangy indicate that it has no exported modules. It only declares a variable called rangy. So you can use it like:

import "rangy";

rangy.getSelection();

回答3:

The rangy npm package does not deliver any typings. That means you have to utilize that yourself through defining a simple typing:

declare var rangy:any;

This makes rangy available in your code and you can just use it wherever you want.

With angular cli you can include the required .js file in the .angular-cli.json:

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

Otherwise take the cdn hosting and ad it to the index.html.

Here is a Plunker example using the cdn version:

Plunker Example

来源：https://stackoverflow.com/questions/44251158/angular-4-and-modules-rangy

标签

angular

typescript

npm

rangy