0

I am trying to create a typescript package that includes Angular 2 decorators. This package's intent is to export a NgModule to be imported into a larger project after it is installed by npm.

When I attempt to run tests through jasmine I get the error message: 

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

I have these packages in my 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"
}

I've tried to import reflect-metadata into the project, and it doesn't not work... I am able to successfully run all the tests. The problem here is when I try to import the module and use the exported components. I am left with this problem:

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

If I try to just use the module without adding the import then it doesn't recognize any of the Angular directive properties and shoots out an error for every aspect in the html. Example error for this looks like:

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

Here's the index file to see how the export is being handled:

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 { }

I've been looking around at other projects and how they do this, and I can't find anything specifically different... I am not sure what I am missing or don't understand to get these Angular Decorators to build externally from a root project.

Don
  • 61
  • 5

1 Answers1

0

You have to include reflect-metadata and crypto in your SystemJS config.

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

<path> is based upon your application configuration, either node_modules or somewhere from where you are serving your application.

If you are using Angular-CLI make sure to include reflect-metadata and crypto specific js in vendorNpmFiles.

Hope this helps!!

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69
  • No sorry, this hasn't really been helpful :(. So far I've discovered if I import directly into the root module instead of trying to export a @NgModule I don't need to import 'reflect-metadata' but jasmine won't run my unit tests. If I import then I can run the unit tests but I can't run the components. – Don Aug 25 '16 at 23:11
  • Can you add your system config here. – Madhu Ranjan Aug 25 '16 at 23:12
  • I've created a gist of the config I'm using. It gives me the error http://localhost:5555/node_modules/crypto-js/package.json 404 (Not Found). https://gist.github.com/db3dev/688fb22315e2b724078963ba0b3749c0 – Don Aug 26 '16 at 02:21