Exploring Angular 4 with the power of Rangy modules

I've recently started working with Angular 4 and decided to create a basic app by forking the Angular quickstart. Now, I'm facing a challenge as I try to incorporate Rangy into my project.

In my package.json, the dependencies are listed as follows:

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

My expectation was that I could simply import Rangy like this:

import {RangySelection} from 'rangy';

However, attempting to do so results in the following error:

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

Can anyone point out what I might be doing incorrectly?

EDIT:
I understand that the issue likely lies within SystemJS and how modules are imported there, but I'm struggling to find a solution...

angulartypescriptnpmrangy

Answer №1

TypeScript with Rangy

When using @types/rangy, there are two options available:

Option 1: import 'rangy'

  • This imports the global variable 'rangy'
  • Not compatible with SystemJS

Option 2: import * as rangy from 'rangy'

  • This creates a local variable 'rangy' (or any defined name)

You cannot use import rangy from 'rangy' because 'rangy' does not have a default ES6 export.

Similarly, you cannot do 

import { RangySelection } from 'rangy'
since 'rangy' is not an ES6-compatible module. However, the interface RangySelection will still be accessible with both import options.

Angular and SystemJS Configuration

If you want the module to be properly returned from the server in Angular (SystemJS), you need to specify where SystemJS should locate it. This can be done within the System.config:

Add the line 

'rangy': 'npm:rangy/lib/rangy-core.js',
to the map element of the configuration. Here's a sample configuration from an Angular Quickstart:

System.config({
  paths: {
    // aliases for paths
    'npm:': 'node_modules/'
  },
  map: {
    // application folder
    'app': 'app',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    // other angular modules...

    // additional 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: {
    app: {
      defaultExtension: 'js',
      meta: {
        './*.js': {
          loader: 'systemjs-angular-loader.js'
        }
      }
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

Answer №2

According to the type definitions of Rangy, it does not have any exported modules. Instead, it simply declares a variable known as rangy. Therefore, you can utilize it in the following manner:

import "rangy";

rangy.getSelection();

Answer №3

When utilizing the rangy npm package, it does not come with any typings included. This means that you will need to define a simple typing yourself:

declare var rangy:any;

By doing this, you make rangy accessible in your code and can use it wherever necessary.

If you are using Angular CLI, you can add the required .js file in the .angular-cli.json like so:

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

Alternatively, you can opt for CDN hosting and add it directly to the index.html file.

For a demonstration using the CDN version, check out this Plunker example:

Plunker Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript - unexpected behavior when using imported JavaScript types:

I am struggling with headaches trying to integrate an automatically generated JavaScript library into TypeScript... I have packaged the JavaScript library and d.ts file into an npm package, installed the npm package, and the typings modules in the TypeScr ...

javascripttypescriptnpmtypescript-typingstype-declaration

Organizing objects into arrays in Node.js

I have an array and I need to concatenate an object after the array. Here is my array: const users = [ {name: "Joe", age: 22}, {name: "Kevin", age: 24}, {name: "Peter", age: 21} ] And here is my object: ...

javascriptnode.jstypescript

Unable to find npm and pm2 commands during the execution of GitHub actions on EC2 instance

I'm currently utilizing a GitHub Actions workflow. Here's the code snippet: name: Deploy to EC2 on: workflow_dispatch: # Manual trigger jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/ ...

linuxnpmamazon-ec2github-actionspm2

When initializing a Vue application using the command 'vue create hello-world', the './fs' module is not found

After spending the last 3-4 hours trying to work with Vue, I'm finding it incredibly challenging just to get it up and running. I've been following the documentation provided here: https://cli.vuejs.org/guide/creating-a-project.html#vue-create ...

node.jsvue.jsnpmmacos-mojave

Angular material table cell coloring

Here is my current setup: I have an array of objects like this: users : User []; average = 5; compareValue (value){ ...} And I am displaying a table as shown below: <table mat-table [dataSource]="users"> <ng-container matColumnDef= ...

javascripthtmlangular

Choose the object's property name using TypeScript through an interface

Consider a simplified code snippet like the following: interface MyBase { name: string; } interface MyInterface<T extends MyBase> { base: MyBase; age: number; property: "name" // should be: "string" but only p ...

typescriptinterfacetype-inferencebase-class

Implementing child components in React using TypeScript and passing them as props

Is it possible to append content to a parent component in React by passing it through props? For example: function MyComponent(props: IMyProps) { return ( {<props.parent>}{myStuff}{</props.parent>} } Would it be feasible to use the new compone ...

javascriptreactjstypescriptnext.js

Is it possible to create a ASP.NET 5 (Core) Website using TypeScript and Node (or ESM) modules within Visual Studio 2019, excluding Visual Studio Code?

After following a helpful guide on setting up TypeScript in an ASP.NET 5 website project using Razor Pages, I decided to enhance my typings with Node modules instead of just importing as 'any'. My goal was to integrate a Node module like EthersJ ...

node.jstypescriptasp.net-corenpmasp.net5

Mastering the nesting of keys in Typescript.Unlock the secrets of

I encountered a situation where the following code snippet was causing an issue: class Transform<T> { constructor(private value: T) {} } class Test<T extends object> { constructor(private a: T) {} transform(): { [K in keyof T]: Transfo ...

typescript

Can you advise on how to generate a key to access an environment.ts value within a *ngFor loop? Specifically, I am trying to locate keys that follow the pattern 'environment.{{region}}_couche_url' within the loop

I currently have a block of HTML code that is repeated multiple times. <!-- Metropolitan Map --> <div> <app-map [name] = "(( environment.metropole_name ))" [layer_url] = "(( environment.metropole_layer_url ))" ...

htmlangularngfor

Error: NodeJS cannot establish connection with MySQL port

I am facing an issue while trying to insert data into my mysql database using a loop. My code seems to be failing to reopen the database connection after each cycle despite opening, inserting, and closing the connection within the loop. Below is the snipp ...

mysqlnode.jsnpm

Can you explain the significance of the additional pipeline in the type declaration in TypeScript?

Just recently, I defined a type as follows- interface SomeType { property: { a: number; b: string; } | undefined; } However, upon saving the type, vscode (or maybe prettier) changes it to- interface SomeType { property: | { a: nu ...

typescript

Avoid unnecessary re-rendering of React Native components with each update of the state

I need my component to display either A or B based on the user's proximity to a specific location. I developed a custom hook to determine if the user is nearby. However, I'm facing an issue where the hook constantly returns a new value of true, ...

reactjstypescriptreact-nativecomponentsstate

Struggling to launch my inaugural React project on my local machine - encountering issues with getting npm start to

Whenever I attempt to run npm start, I encounter the following error message: [Error: ENOENT: no such file or directory, open 'C:\Users\Elijah\vscode\React project\react-project\.next\BUILD_ID'] { errno: -4058 ...

reactjsnpmnpm-start

Issues with my transpiled and typed TypeScript npm module: How can I effectively use it in a TypeScript project?

I'm trying to experiment with TypeScript. Recently, I created a simple "hello world" TypeScript module and shared it on npm. It's very basic, just has a default export: export default function hello(target: string = 'World'): void { ...

javascriptnode.jstypescriptnpmtsc

What steps can be taken to ensure that the build fails correctly when npm displays the error message "npm ERR! not ok code 0"?

There is a build that occasionally goes wrong. Whenever this occurs, I come across the following message in the log: npm ERR! npm ERR! Additional details can be found in: npm ERR! /path/npm-debug.log npm ERR! not ok code 0 It seems like npm is faili ...

bashnpm

What is the best way to submit form data along with an image using Angular?

Recently, I built an application where users can submit form data along with an uploaded image. Since I am new to Angular, I am facing some challenges in merging the user-submitted data model and the image upload using the FormData method. Can anyone guide ...

javascriptangularangularjs

Firebase allows for the updating of an object within a nested array

Within Firestore, I have a Document that includes a property named "items" which is of type array. This array consists of ShoppingItem objects with the specified structure: export class ShoppingItem { id?: string; name: string; checked = false; } To ...

javascriptangulargoogle-cloud-firestoreangularfire2

Displaying rows with no data in an Angular Material table

Currently facing an issue while integrating Angular's material table in a new project. The data is not being displayed, only empty rows are visible. Surprisingly, the same logic works perfectly fine in another project. I have spent a considerable amou ...

angularangular-materialangular7

The requested resource does not have the 'Access-Control-Allow-Origin' header

Currently, I am working on an application that utilizes Angular for the client side and NodeJs for the backend. The application is being hosted with iis and iisnode. Recently, I implemented windows authentication to the application in order to track which ...

node.jsangularexpressiisiisnode