Question

我在plunker中使用了这个(Reflect.getMetadata('annotations',AppComponent)[0].template);，它工作正常http://plnkr.co/edit/f47uORghJXaq0FtD00Th?p=preview

但在我的项目中，我遇到此错误Property 'getMetadata' does not exist on type 'typeof Reflect'

这是我的项目配置

packege.json

{
  "name": "ng2-demo",
  "version": "1.0.0",
  "description": "A minimal Angular2 playground for different ng2-* components",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/akserg/ng2-demo"
  },
  "bugs": {
    "url": "https://github.com/akserg/ng2-demo/issues"
  },
  "scripts": {
    "install": "typings install",
    "play": "gulp play",
    "start": "npm run play"
  },
  "homepage": "https://github.com/akserg/ng2-demo#readme",
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "@angular/router-deprecated": "^2.0.0-rc.1",
    "angular2-in-memory-web-api": "0.0.7",
    "bootstrap": "^3.3.6",
    "dragula": "^3.7.1",
    "es6-promise": "~3.1.2",
    "es6-shim": "~0.35.0",
    "ng2-bs3-modal": "^0.6.1",
    "ng2-ckeditor": "1.0.0",
    "ng2-dnd": "^1.6.5",
    "ng2-dragula": "^1.1.10",
    "ng2-file-upload": "^1.0.3",
    "ng2-slim-loading-bar": "^1.2.3",
    "ng2-toasty": "^1.7.2",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "~0.6.12"
  },
  "devDependencies": {
    "connect": "^3.4.0",
    "del": "^1.2.0",
    "gulp": "^3.9.0",
    "gulp-gh-pages": "^0.5.4",
    "gulp-typescript": "^2.8.0",
    "open": "0.0.5",
    "serve-static": "^1.10.0",
    "typings": "^0.6.8"
  }
}

Systemjs.code.js

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'dist': 'dist', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular',
        'ng2-toasty': 'node_modules/ng2-toasty',
        'ng2-dnd': 'node_modules/ng2-dnd',
        'ng2-slim-loading-bar': 'node_modules/ng2-slim-loading-bar',
        'ng2-dragula': 'node_modules/ng2-dragula',
        'ng2-bs3-modal': 'node_modules/ng2-bs3-modal',
        'ng2-ckeditor': 'node_modules/ng2-ckeditor/lib/',
        'ng2-uploader':'node_modules/ng2-uploader'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'dist': {main: 'boot.js', defaultExtension: 'js'},
        'rxjs': {defaultExtension: 'js'},
        'ng2-toasty': {defaultExtension: 'js'},
        'ng2-dnd': {defaultExtension: 'js'},
        'ng2-slim-loading-bar': {defaultExtension: 'js'},
        'angular2-in-memory-web-api': {defaultExtension: 'js'},
        'ng2-ckeditor': {defaultExtension: 'js'},
        'ng2-dragula': {defaultExtension: 'js'},
        'ng2-bs3-modal': {defaultExtension: 'js'},
        'ng2-uploader': {defaultExtension: 'js'}
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade',
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
    });

    var config = {
        map: map,
        packages: packages,
        uiColor: '#990000'
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) {
        global.filterSystemConfig(config);
    }

    System.config(config);

})(this);

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "removeComments": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "typings/main.d.ts",
    "typings/main"
  ]
}

我还在使用angular2 rc2，但我不知道从哪里来的错误并感谢您的帮助

Answer 1

在组件顶部添加以下行 -

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

假设您正在使用VScode。

看看这是否有帮助。

Answer 2

尝试添加core-js。它是一个带有ECMAScript 5,6和7的polyfill的库。还要安装它的类型。将"core-js": "registry:dt/core-js#0.0.0+20160317120654"添加到typings.json并运行typings install

Answer 3

我打断构建过程后出现了这个问题，然后重新构建它，即使项目在另一个Cmder选项卡上运行“$ ionic serve”，也解决了我的问题。

Obs：使用“$ ionic build android”命令构建，使用Ionic 2 CLI v2.1.18

Answer 4

问题与打字稿有关。到目前为止，除了安装/更新“ reflect-metadata”软件包以解决生成时的错误外，您还应在 tsconfig.json 中添加库文件 es2015.reflect ：

"compilerOptions": { ... lib: [ ..., "es2015.reflect", ... ] ... } 解决该警告（在VSCode上测试）。

Reflect.getMetadata无法在angular2中工作

4 个答案: