reflect-metadata with an angular rc5 app error localhost/:24 Error: TypeError: Cannot read property 'type' of null(…)

[ovione]

hello Ron,

I was using reflect-metadata 0.1.3 in an angular rc4 app in a project.
Now I use reflect-metadata 0.1.8 and angular rc5.

The way I was using it was the following.

• systemjs.config.js
  map['reflect-metadata'] = 'node_modules/reflect-metadata/Reflect.js';
• main.ts
  import "reflect-metadata";

-In my application
`export class MapUtils {

static getClazz(target:any, propertyKey:string):any {
    return Reflect.getMetadata("design:type", target, propertyKey)
}

static getJsonProperty<T>(target:any, propertyKey:string):IJsonMetaData<T> {
    return Reflect.getMetadata(jsonMetadataKey, target, propertyKey);
}`

But now I have the error:
Error: TypeError: Cannot read property 'type' of null(…)

I suspect I'm not mapping properly in the systemjs.config.js but with rc4 and angular rc4 that worked.

If you could guide me into the right direction that would be great

thanks

[ovione]

hi
My prior question actually boils down to
what would be the best way to configure relect-metadata in the systemjs.config.js and how do I import it in an angular rc5 application so that I an use it in an application for example Reflect.getMetadata.

thanks

[ovione]

It works for me the following way:

In package.json:
"dependencies": {
"reflect-metadata": "^0.1.8",

In systemjs.config.js:
map['reflect-metadata'] = 'node_modules/reflect-metadata';
packages['reflect-metadata'] = { main: 'Reflect.js', defaultExtension: 'js' };

In code:
import it in main.ts:
import 'reflect-metadata';
usage example in code:
export function JsonProperty(metadata?:IJsonMetaData|string):any {
if (metadata instanceof String || typeof metadata === "string") {
return Reflect.metadata(jsonMetadataKey, {

So with this it finds my Reflect library and everything works fine. :)

[mfdeveloper]

I have a similar problem, but in my case with latest Angular 4 using angular-cli + webpack. I've got problems with DI when load MyServices and your dependencies, only if use import reflect-metadata in any .ts file on Angular app.

@ovione Can you help me?

[rbuckton]

@mfdeveloper do you have a stack trace you can provide?

[mfdeveloper]

@rbuckton This is my stacktrace printed on browser console. When remove import reflect-metadata, everything works.

compiler.es5.js:1540 Uncaught Error: Can't resolve all parameters for MyService: (?).
    at syntaxError (http://localhost:8100/build/main.js:120435:34)
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/main.js:133772:35)
    at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/main.js:133640:26)
    at CompileMetadataResolver._getInjectableMetadata (http://localhost:8100/build/main.js:133626:21)
    at CompileMetadataResolver.getProviderMetadata (http://localhost:8100/build/main.js:133916:40)
    at http://localhost:8100/build/main.js:133845:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/main.js:133806:19)
    at http://localhost:8100/build/main.js:133381:63
    at Array.forEach (native)

my.service.ts

import { Injectable } from '@angular/core';
import { OtherService } from './other.service';

@Injectable()
export class MyService {
  constructor(private otherService: OtherService) { }
}

[kirakishin]

hello, i have exactly the same error.
i'am trying to fake the import with tsconfig path mapping

[softmarshmallow]

having the same issue 2020. how to resolve?