rbuckton / reflect-metadata

Prototype for a Metadata Reflection API for ECMAScript
https://rbuckton.github.io/reflect-metadata
Apache License 2.0
3.21k stars 184 forks source link

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

Open ovione opened 8 years ago

ovione commented 8 years ago

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.

-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 commented 8 years ago

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 commented 8 years ago

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 commented 7 years ago

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 commented 7 years ago

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

mfdeveloper commented 7 years ago

@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 commented 6 years ago

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

softmarshmallow commented 4 years ago

having the same issue 2020. how to resolve?