Angular 4和模塊：Rangy

我是Angular 4的新手，我剛剛創建了一個分支角色quickstart，現在我試圖導入Rangy。Angular 4和模塊：Rangy

在package.json我現在有以下依賴性：

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

我希望能簡單地做一個

import {RangySelection} from 'rangy';

但只是給我的錯誤

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

我究竟做錯了什麼？

編輯：
據我所知，它與SystemJS做，以及如何到那裏導入模塊，但我無法弄清楚如何...

來源

2017-05-29 Alessandro

打字稿

根據@types/rangy你有兩個選擇：

選項1. import 'rangy'

你得到全局變量 '瘦長'
不SystemJS

選工作2 import * as rangy from 'rangy'

你得到局部變量 '瘦長'（或任何你定義）

您不能這樣做import rangy from 'rangy'，因爲rangy沒有默認的es6導出。

你不能這樣做import { RangySelection } from 'rangy'，因爲rangy不是es6兼容模塊。界面RangySelection將提供兩種導入選項。

角（SystemJS）

從服務器獲取返回的模塊正確，你必須告訴SystemJS，它應該尋找它。這是在System.config內部完成的：

添加行'rangy': 'npm:rangy/lib/rangy-core.js',到map config的元素。從角向快速啓動的整個配置：

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

來源

2017-06-01 17:07:20

多好，它的工作原理！保存和恢復模塊怎麼樣？我如何創建一個新的RangySelection對象？我嘗試將rangy-selectionsaverestore.js添加到System.js，但沒有成功... – Alessandro

您可以使用'rangy.getSelection'或'rangy.createRange'來獲取相應的實例。至於rangy模塊 - 我真的不知道如何正確加載它們。也沒有他們的類型。 –

感謝您的回答，它真的幫助我！ – Alessandro

爲瘦長的類型定義表明，它已經沒有出口模塊。它只聲明一個名爲rangy的變量。所以你可以使用它：

import "rangy"; 

rangy.getSelection();

來源

2017-05-30 01:35:22 Saravana

您測試了嗎？我只得到一個404和一個SystemJS錯誤... 我必須添加Rangy到system.config.js嗎？我試過在System.config.map下這麼做： 'rangy'：'npm：rangy/lib/rangy-core.js'，但是它也沒有幫助。 – Alessandro

什麼網址你404上？看看這個很酷的庫，看起來像它支持commonjs和AMD模塊。看起來類型定義不是最新的。 – Saravana

如果我按照描述更改了systemjs.config.js，我得到一個'Error：（SystemJS）rangy is not defined'，否則404代表http：// localhost：3000/rangy。 – Alessandro

rangy npm包不提供任何類型。這意味着你必須利用了自己通過定義一個簡單的打字：

declare var rangy:any;

這使得你的代碼可以瘦長，你可以只使用它，無論你想。

隨着角度CLI可以包括在.angular-cli.json所需的.js文件：

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

否則採取CDN託管和廣告它的index.html的。

下面是使用CDN版本Plunker例如：

Plunker Example

來源

2017-06-01 12:44:17 Ludwig

Angular 4和模塊：Rangy

回答

相關問題