How to load XRegExp in Angular2

问题

I want to use XRegExp library in an Angular2 application written in TypeScript.

I have installed XRegExp as a node.js module.

How do I get var unicodeWord = XRegExp("^\\pL+$"); to work in a component method?

(How do I reference the JS library in TypeScript? How do I load the node.js module in angular?)

UPDATE

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> tag in my 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:

You can do this in the following way:

In your package.json add 'typings' as dev dependency, and (optionally) postinstall action:

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

Add typings.json file with the following content to your root folder:

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

Then navigate in console to your project root (where your package.json, tsconfig.json, etc are) and run

npm install

this will get you typescript definitions for xregexp library.

Do not forget to exclude browser (or main) definitions using exclude section in your tsconfig file like this:

{ 
    "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/**"
    ]
}

In your systemjs config:

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

    System.defaultJSExtensions = true;

Then to use it:

import XRegExp = require('xregexp');

Hope this helps.

来源：https://stackoverflow.com/questions/36071164/how-to-load-xregexp-in-angular2

标签

typescript

angular

xregexp