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...

Solution

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