如何在Angular2中加载XRegExp [英] How to load XRegExp in Angular2
问题描述
我想在用TypeScript编写的Angular2应用程序中使用XRegExp库.
I want to use XRegExp library in an Angular2 application written in TypeScript.
我已经将XRegExp安装为node.js模块.
I have installed XRegExp as a node.js module.
如何让var unicodeWord = XRegExp("^\\pL+$");在组件方法中工作?
How do I get var unicodeWord = XRegExp("^\\pL+$"); to work in a component method?
(如何在TypeScript中引用JS库?如何在angular中加载node.js模块?)
(How do I reference the JS library in TypeScript? How do I load the node.js module in angular?)
更新
typings.json:
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"
}
}
我的index.html中的
<head>标记:
<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:
ignition.ts:
import {bootstrap} from 'angular2/platform/browser'
import {AmadeusComponent} from './amadeus/amadeus.component'
bootstrap(AmadeusComponent);
amadeus.component.ts:
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
}
}
推荐答案
您可以通过以下方式进行操作:
You can do this in the following way:
在package.json中添加'typings'作为dev依赖项，并(可选)后安装操作:
In your package.json add 'typings' as dev dependency, and (optionally) postinstall action:
"devDependencies":
{
"typings": "latest"
},
"scripts":
{
"postinstall": "typings install --save"
}
将具有以下内容的Types.json文件添加到您的根文件夹中:
Add typings.json file with the following content to your root folder:
{
"ambientDependencies": {
"xregexp": "github:DefinitelyTyped/DefinitelyTyped/xregexp/xregexp.d.ts"
}
}
然后在控制台中导航到项目根目录(package.json，tsconfig.json等所在的位置)并运行
Then navigate in console to your project root (where your package.json, tsconfig.json, etc are) and run
npm安装
npm install
这将为您提供xregexp库的打字稿定义.
this will get you typescript definitions for xregexp library.
不要忘记使用tsconfig文件中的exclude部分来排除浏览器(或主要)定义，如下所示:
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/**"
]
}
在您的systemjs配置中:
In your systemjs config:
System.config({
paths: {
xregexp: 'path/to/xregexp.js'
}
});
System.defaultJSExtensions = true;
然后使用它:
import XRegExp = require('xregexp');
希望这会有所帮助.
这篇关于如何在Angular2中加载XRegExp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
