解决模块化角度 2 组件项目中的"reflect-metadata shim is required when using class decorators"

Question

我正在尝试创建一个包含Angular 2装饰器的typescript包。这个包的目的是导出一个NgModule，以便在被npm安装后导入到更大的项目中。

当我尝试通过jasmine运行测试时，我得到错误消息:

/Users/don286/Dev/Angular2Modules/viewengine/node_modules/@angular/core/src/util/decorators.js:173                                                                                       
    throw 'reflect-metadata shim is required when using class decorators';   

我有这些包在我的package.json:

"devDependencies": {
"@angular/core": "^2.0.0-rc.5",
"@types/es6-shim": "0.0.30",
"@types/node": "^6.0.37",
"jasmine": "^2.4.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.17"
}

我已经尝试导入反射元数据到项目中，它不工作…我能够成功地运行所有测试。这里的问题是当我尝试导入模块并使用导出的组件时。我留下了这个问题:

views:169 Error: Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/crypto/package.json(…)

如果我试图只使用模块而不添加导入，那么它就无法识别任何Angular指令属性，并在html中的每个方面都发出错误。错误示例如下:

zone.js?1472162416591:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngClass' since it isn't a known property of 'div'.

下面是索引文件，用于查看如何处理导出:

import { NgModule } from '@angular/core';
import { Component } from './lib/component/Component.component';
export const DIRECTIVES: any[] = [
Component
];
@NgModule({
exports: DIRECTIVES,
declarations: DIRECTIVES
})
export class Module { }

我一直在寻找其他项目以及他们是如何做到这一点的，我找不到任何特别不同的…我不知道我错过了什么，或者不明白让这些Angular装饰器从根项目外部构建。

Answer 1

您必须在SystemJS配置中包含reflect-metadata和crypto。

 'reflect-metadata': '<path>/reflect-metadata/Reflect.js',
 'crypto': '<path>/crypto-js/crypto-js.js',

<path>基于您的应用程序配置，可以是node_modules，也可以是您为应用程序提供服务的某个地方。

如果你正在使用Angular-CLI，确保在vendorNpmFiles中包含reflect-metadata和crypto特定的js。

希望这有帮助!!