文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在XRegExp中加载Angular2

问如何在XRegExp中加载Angular2
EN

Stack Overflow用户

提问于 2016-03-17 20:34:19

回答 1查看 1.6K关注 0票数 0

我想在用XRegExp编写的Angular2应用程序中使用TypeScript库。

我已经将XRegExp安装为一个node.js模块。

如何让var unicodeWord = XRegExp("^\\pL+$");在组件方法中工作？

(如何在TypeScript中引用JS库？如何以角度加载node.js模块？)

更新

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
    }

}

typescript

angular

xregexp

回答 1

Stack Overflow用户

发布于 2016-03-17 21:01:45

您可以通过以下方式完成此操作：

在package.json中，将“类型”添加为“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库的类型记录定义。

不要忘记使用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/**"
    ]
}

在您的系统In配置中：

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

    System.defaultJSExtensions = true;

然后使用它：

import XRegExp = require('xregexp');

希望这能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36071164

复制

相似问题

问如何在XRegExp中加载Angular2
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在XRegExp中加载Angular2EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在XRegExp中加载Angular2
EN