Как загрузить XRegExp в Angular2

Я хочу использовать библиотеку XRegExp в приложении Angular2, написанном на TypeScript.

Я установил XRegExp как модуль node.js.

Как я могу получить var unicodeWord = XRegExp("^\\pL+$"); работать в компонентном методе?

(Как мне обратиться к библиотеке JS в TypeScript? Как загрузить модуль node.js в angular?)

ОБНОВИТЬ

typings.json:

{
    "ambientDependencies": {
        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
        "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71",
        "xregexp": "github:DefinitelyTyped/DefinitelyTyped/xregexp/xregexp.d.ts"
    }
}

<head> тег в моем index.html:

<head>
    <title>Amadeus</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            paths: {
                xregexp: 'node_modules/xregexp/src/xregexp.js'
            },
            packages: {        
                angular_components: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });

        System.import('angular_components/ignition')
            .then(null, console.error.bind(console));
    </script>

</head>

ignition.ts:

import {bootstrap}    from 'angular2/platform/browser'
import {AmadeusComponent} from './amadeus/amadeus.component'

bootstrap(AmadeusComponent);

amadeus.component.ts:

import {Component} from 'angular2/core';
import {XRegExp} from 'xregexp';

@Component({
    selector: 'amadeus',
    templateUrl: 'angular_components/amadeus/amadeus.component.ahtml'
})

export class AmadeusComponent {

    constructor(){
        console.log(XRegExp); // undefined
    }

}
Источник

1 ответ

Вы можете сделать это следующим образом:

В вашем package.json добавьте 'typings' как dev dev и (опционально) действие postinstall:

"devDependencies": 
{
    "typings": "latest"
},
"scripts": 
{
    "postinstall": "typings install --save"
}

Добавьте файл typings.json со следующим содержимым в корневую папку:

{
  "ambientDependencies": {
    "xregexp": "github:DefinitelyTyped/DefinitelyTyped/xregexp/xregexp.d.ts"
  }
}

Затем перейдите в консоли к корню вашего проекта (где находятся ваши package.json, tsconfig.json и т. Д.) И запустите

установка npm

это даст вам определения машинописи для библиотеки xregexp.

Не забудьте исключить определения браузера (или основных), используя раздел exclude в вашем файле tsconfig, например так:

{ 
    "compilerOptions": { 
        "emitDecoratorMetadata": true, 
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "module": "commonjs", 
        "target": "es6",
        "sourceMap": true,
        "outDir": "bin",
        "declaration": true
    },
    "exclude": [
        "node_modules",
        "typings/browser.d.ts",
        "typings/browser/**"
    ]
}

В вашей конфигурации systemjs:

    System.config({
        paths: {
            xregexp: 'path/to/xregexp.js'
        }             
    });

    System.defaultJSExtensions = true;

Тогда использовать это:

import XRegExp = require('xregexp');

Надеюсь это поможет.

Источник
Другие вопросы по тегам