Angular 4 und Module: Rangy

Question

Ich bin neu in Angular 4, ich habe gerade eine einfache App Forking der Angular Quickstart erstellt und jetzt versuche ich Rangy zu importieren.

Auf package.json Ich habe jetzt die folgenden Abhängigkeiten:

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

ich voraussichtlich in der Lage sein, ein

import {RangySelection} from 'rangy'; 

einfach tun, aber das gibt mir nur den Fehler

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

Was mache ich falsch?

EDIT:
Ich verstehe, dass es mit SystemJS zu tun hat und wie Module dort zu importieren, aber ich kann nicht herausfinden, wie ...

Answer 1

Typoskript

Nach @types/rangy haben Sie zwei Möglichkeiten:

Option 1. import 'rangy'

• Sie globale Variable 'rangy' get
• funktioniert nicht mit SystemJS

Option 2. import * as rangy from 'rangy'

• Sie lokale Variable 'rangy' erhalten (oder was auch immer Sie definieren)

Sie können nicht tun , weil rangy nicht standardmäßig es6 Export hat.

Sie können import { RangySelection } from 'rangy' nicht tun, weil rangy nicht es6 kompatibles Modul ist. Die Schnittstelle RangySelection wird mit beiden Importoptionen verfügbar sein.

Angular (SystemJS)

das Modul vom Server ordnungsgemäß zurückgegeben zu bekommen, müssen Sie SystemJS sagen, wo es für sie aussehen sollte. Dies geschieht innerhalb von System.config:

Fügen Sie die Zeile 'rangy': 'npm:rangy/lib/rangy-core.js', zu map Element der Konfig. Ganze Konfiguration aus Winkel-Schnellstart:

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

Answer 2

Die Typdefinitionen für Rangy zeigen, dass es nicht exportiert Module. Es deklariert nur eine Variable namens rangy. So können Sie es wie verwenden:

import "rangy"; 

rangy.getSelection(); 

Answer 3

Das riggy NPM-Paket liefert keine Typings. Das bedeutet, dass Sie das selbst nutzen, müssen durch eine einfache Eingabe definieren:

declare var rangy:any; 

Dieses rangy in Ihrem Code macht und Sie können es einfach verwenden, wo immer Sie wollen.

Mit Winkel cli können Sie die gewünschte JS-Datei im .angular-cli.json umfassen:

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

nehmen Ansonsten CDN-Hosting und Anzeige an die index.html.

Hier ist ein Plunker Beispiel die CDN-Version mit:

Plunker Example