Angular 4 and modules: Rangy

Question

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

score 1 · Answer 1 · answered May 30 '17 at 01:35

1

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();

answered May 30 '17 at 01:35

Saravana

37,852
18
100
108

Have you tested it? I only get a 404 and a SystemJS error... Do I have to add Rangy to system.config.js? I've tried to do so under System.config.map: 'rangy': 'npm:rangy/lib/rangy-core.js' , but it didn't help either. – Alessandro Cappello May 30 '17 at 08:50
What url are you getting a 404 on? And looking at the rangy library, looks like it supports commonjs and AMD modules. Looks like the type definitions are not up to date. – Saravana May 30 '17 at 09:07
If I change the systemjs.config.js as described, I get a `Error: (SystemJS) rangy is not defined`, otherwise the 404 is for http://localhost:3000/rangy. – Alessandro Cappello May 30 '17 at 09:11

score 1 · Accepted Answer · answered Jun 01 '17 at 17:07

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

How nice, it works! What about the Save & Restore module? How can I create a new RangySelection object? I tried to add the rangy-selectionsaverestore.js to System.js, without success... — Alessandro Cappello, Jun 01 '17 at 19:09
You use `rangy.getSelection` or `rangy.createRange` to get respective instances. As for rangy modules - I really don't know how to properly load them. Also there are no typings for them. — Lukáš Novotný, Jun 01 '17 at 19:48
I'm going to ditch the Rangy module system and bring it up to date. — Tim Down, Mar 12 '19 at 10:19

score 0 · Answer 3 · answered Jun 01 '17 at 12:44

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

Angular 4 and modules: Rangy

3 Answers3

Linked