Angular-cli: Getting Reflect.getMetadata is not a function error after updating to 1.0.0-beta.14

Created on 16 Sep 2016  路  12Comments  路  Source: angular/angular-cli

Please provide us with the following information:

  1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Mac OS 10.11.6

  1. Versions. Please run ng --version. If there's nothing outputted, please run
    in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.14
node: 6.2.0
os: darwin x64

  1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
    do on your code? etc.

I finally got a chance to upgrade from 1.0.0-beta.11-webpack.2 to 1.0.0-beta.14. I run ng init to make sure I didn't miss anything and resolve all the merge conflicts. When I'm finally ready, I run 'ng serve, but I get thisReflect.getMetadata is not a functionerror. I try including and removingreflect-metadatadependency frompackage.json`. But that doesn't help.

In my collection.service.ts:7 (3rd line in the log) is where I have @Injectable. I'm guessing the problem might have to do with that, but I'm not sure.

image

Here's the dependencies in my package.json.

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@vaadin/angular2-polymer": "^1.0.0-beta4",
    "angularfire2": "^2.0.0-beta.4",
    "core-js": "^2.4.1",
    "firebase": "^3.3.2",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.14",
    "codelyzer": "~0.0.26",
    "firebase-tools": "^3.0.7",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-htmlmin": "^2.0.0",
    "gulp-vulcanize": "^6.1.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2",
    "vulcanize": "^1.14.8"
  }

Here's what I have in my index.html.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Foo</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">

    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="elements.html">

    <style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-factors iron-positioning">
        <!-- some css stuff here -->
    </style>

</head>

<body class="fullbleed vertical layout">
    <app-root>Loading...</app-root>
</body>

</html>
  1. The log given by the failure. Normally this include a stack trace and some
    more information.
  2. Mention any other details that might be useful.

Thanks! We'll be in touch soon.

picture 5amfung
👍3

Most helpful comment

@kesemdavid

Ok, finally got this figured out. Looks like we need to add zone and reflect as part of the global installation. We don't need to include zone and reflect in index.html in this case.

So in my angular-cli.json, I added these two lines to apps.0 section.

      "scripts": [
        "../node_modules/zone.js/dist/zone.js",
        "../node_modules/reflect-metadata/Reflect.js"
      ],
picture 5amfung on 17 Sep 2016
🎉7 👍4

All 12 comments

I might be having the same problem, getting the same error

kesemdavid picture kesemdavid on 16 Sep 2016

Same error here too. I'm a windows 10, node 4.4.4 env. My project also includes material, lodash and ngrx libraries if those are variables that matter.

tobytraylor picture tobytraylor on 16 Sep 2016

Solved mine! Please refer to this stackoverflow question !

kesemdavid picture kesemdavid on 17 Sep 2016

@kesemdavid Thanks for the link. But the solution doesn't work for me. I'm already using angular 2.0.0 and I don't use any polyfills.js in my package.json nor index.html. So I'm not sure why I'm still getting "Reflect.getMetadata is not a function" error.

5amfung picture 5amfung on 17 Sep 2016

Is angular2 a dependency in your package.json?

kesemdavid picture kesemdavid on 17 Sep 2016

@kesemdavid No. I just updated my original comment with my dependencies in package.json.

5amfung picture 5amfung on 17 Sep 2016

Please add your index.html, you should be refering to the Reflect.js file within a <script>

kesemdavid picture kesemdavid on 17 Sep 2016

@kesemdavid I created a new project using ng but the index.html in the new project doesn't include Reflect.js. I don't quite understand why I have to include it and I don't recall any of my dependencies requiring it neither.

5amfung picture 5amfung on 17 Sep 2016

Honestly, i dont understand why is it required, something about pollyfills, i wasn't requiring it before either. But now as you can see from the Angular2 quickstart - Step 5 it is now being reuired, reflect-metadata, zone.js and core-js

kesemdavid picture kesemdavid on 17 Sep 2016

@kesemdavid Thanks for pointing that out. So I guess this is still an issue with angular-cli because it should be taken care of somewhere within webpack or the blueprint should include the dependencies in index.html.

5amfung picture 5amfung on 17 Sep 2016

@kesemdavid

Ok, finally got this figured out. Looks like we need to add zone and reflect as part of the global installation. We don't need to include zone and reflect in index.html in this case.

So in my angular-cli.json, I added these two lines to apps.0 section.

      "scripts": [
        "../node_modules/zone.js/dist/zone.js",
        "../node_modules/reflect-metadata/Reflect.js"
      ],
5amfung picture 5amfung on 17 Sep 2016
🎉7 👍4

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 6 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

daBishMan picture daBishMan  路  3Comments
rajjejosefsson picture rajjejosefsson  路  3Comments
MateenKadwaikar picture MateenKadwaikar  路  3Comments
hartjo picture hartjo  路  3Comments
JanStureNielsen picture JanStureNielsen  路  3Comments