CODEWITHSUNDEEP
angularangular2-directives
KnowHoper
KnowHoper

Reputation: 4592

Problems with Angular2.o0 decorators

I can't seem to get Angular2.0 under test. Every time I use an injector decorator I get an error about a missing file / shim. reflect-metadata shim is required when using class decorators';

I've tried importing my way around it 

 import {CalendarBuilder} from './CalendarBuilder';
 import 'reflect-metadata';
 import 'zone.js'

But no Angular says no likey.

Here is the contents of my package - a modified AngularExample, it needs trimming. Can anyone please please help?

{   
"name": "angular2-quickstart",   
"version": "1.0.0",   
"scripts": {
     "test": "live-server --open=app/unit-tests.html",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
     "go": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},   
 "license": "ISC",
 "dependencies": {
     "angular2": "2.0.0-alpha.53",
     "chai": "^3.4.1",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "gulp": "^3.9.0",
     "reflect-metadata": "^0.1.2",
     "rxjs": "5.0.0-alpha.14",
     "systemjs": "0.19.6",
     "underscore": "^1.8.3",
     "zone.js": "^0.5.8"   },
     "devDependencies": {
     "concurrently": "^1.0.0",
     "es6-shim": "^0.33.13",
     "gulp-jasmine": "^2.2.1",
     "gulp-mocha": "^2.2.0",
     "jasmine-core": "2.4.1",
     "jspm": "^0.16.18",
     "lite-server": "^1.3.1",
     "live-server": "^0.9.0",
     "requirejs": "^2.1.22",
     "system-npm": "^0.4.2",
     "typescript": "^1.7.3"
 }
}

Upvotes: 0

Views: 531

Answers (2)

KnowHoper
KnowHoper

Reputation: 4592

I solved this by importing the npm package and referencing the type definition at the top of the test:

/// <reference path="../../type-definitions/reflect-metadata.d.ts"" />
require("reflect-metadata");

Upvotes: 1

Michael Oryl
Michael Oryl

Reputation: 21642

You can take care of the lack of zone.js and reflect-metadata by including the polyfills that are supplied with Angular 2. Toss this into your index.html file:

<script src="../node_modules/angular2/bundles/angular2-polyfills.min.js"></script>

You might have to change the path to fit your particular setup, but the important part is to know that the script is located in the angular2/bundles section of your node_modules folder.

Upvotes: 0

Related Questions