Inversify.js - Reflect.hasOwnMetadata 不是函数

Question

我正在尝试 Inversify.js 我正在使用的 Typescript 应用程序。现在，没有涉及框架，所以它是纯 ES2015。

我正在尝试按照主页中的示例进行操作，但遇到了以下问题： "Reflect.hasOwnMetadata is not a function" 当我尝试在浏览器中运行它时。

我正在使用 Webpack 作为打包工具。

这是我的文件夹结构：

这是主要的 app.ts 文件：

/// <reference path="../typings/index.d.ts" />
/// <reference path="./domain/abstract/match.interface.ts" />

import kernel from "../inversify/inversify.config.ts";

import {symbols} from "../inversify/symbols.ts";

var ninja = kernel.get<INinja>("INinja");

ninja.fight();
ninja.sneak();

interfaces.d.ts:

interface INinja {
    fight(): string;
    sneak(): string;
}

interface IKatana {
    hit(): string;
}

interface IShuriken {
    throw();
}

inversify.config.ts

/// <reference path="../node_modules/inversify/type_definitions/inversify/inversify.d.ts" />
/// <reference path="../node_modules/reflect-metadata/reflect-metadata.d.ts" />
/// <reference path="inversify.ts" />

import {Kernel} from "inversify"
//import {MatchHub} from "../app/components/Hubs/match/match-hub.component.ts";
//import {symbols} from "./symbols.ts";


import {Ninja, Katana, Shuriken} from "./inversify.ts";


var kernel = new Kernel();
kernel.bind<INinja>("INinja").to(Ninja);
kernel.bind<IKatana>("IKatana").to(Katana);
kernel.bind<IShuriken>("IShuriken").to(Shuriken);


export default kernel;

symbols.ts:

export const symbols = {
    Match : Symbol("Match")
}

tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata":  true, 
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "wwwroot"
  ]
}

Webpack.config.js:

module.exports = {
  entry: './app/app.ts',
  output: {
    filename: '../Scripts/app/app.js'
  },
  resolve: {
      extensions: ['', '.Webpack.js', '.web.js', '.ts','.js', '.tsx']
  },
  module: {
    loaders: [
        {
          test: /\.ts?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'ts-loader'
        }
    ]
  },
  watch: true
}

Firefox 控制台错误：

Webpack 输出：

当我尝试安装 Inversify 时弹出以下警告：

这是一个错误吗？还是我做错了什么？谢谢！

PS: 尝试按照示例文件进行操作，但我什么都看不懂！

我来自 ASP.NET MVC 5 Ninject，所以我可以理解大部分语法。

Answer 1

看来您需要包含 reflect-metadata 包。尝试通过执行以下操作在 inversify.config.ts 中添加导入：

import "reflect-metadata";

Answer 2

指出可能是一件愚蠢的事情，我运行陷入了同样的问题，但这是因为导入的顺序。它不太可能是任何其他导入的情况，但在反射元数据的情况下，它必须在任何使用它的类之前导入。

import { Container } from "inversify";
//reflect-metadata should be imported 
//before any interface or other imports
//also it should be imported only once
//so that a singleton is created.
import "reflect-metadata";
import Battle from "./interfaces/battle";
import EpicBattle from "./interfaces/epic_battle";

Inversify.js - Reflect.hasOwnMetadata 不是函数

Inversify.js - Reflect.hasOwnMetadata is not a function

javascript

asp.net-mvc

typescript

inversifyjs