Angular4 core.es5.js Uncaught reflect-metadata shim is required when using class decorators

Question

After upgrading my pre-existing project to Angular 4 and Angular/CLI 1.0 I'm getting this error:

core.es5.js:354 Uncaught reflect-metadata shim is required when using class decorators

I've compared my project to a fresh ng new and they appear alike in configuration. I've restarted my terminal & computer. Deleted node_modules, npm cache clean, npm prune, npm i

I'm running on Windows 7 😢

The CLI on version 1.0.0 build without error with ng build but when I run the app I get the error in the browser. I'm upgrading the CLI from version rc.2 and Angular from v2.5 with help from https://angular-update-guide.firebaseapp.com/

---

* UPDATE

I found that my index.scala.html didn't have it's script tag for polyfills.js. After hooking that part up I produce this error:

Uncaught RangeError: Maximum call stack size exceeded

---

package.json

{
  "name": "mikeumus",
  "version": "1.0.0",
  "description": "A webpack starter for angular 2",
  "scripts": {
    "build": "ng build -dev -e dev",
    "build:aot": "ng build -prod -e prod --aot true --sourcemap false",
    "build:prod": "ng build -prod -e prod --sourcemap false",
    "compodoc": "./node_modules/.bin/compodoc -p tsconfig.json",
    "e2e": "ng e2e",
    "lint": "ng lint --format stylish",
    "postbuild": "node build.js",
    "postbuild:prod": "node build.js",
    "postinstall": "typings install",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "prepush": "npm test && npm run lint",
    "start": "ng serve",
    "test": "ng test --watch false --single-run false",
    "watch": "ng build -dev -w true"
  },
  "author": "Mikeumus",
  "private": true,
  "license": "UNLICENSED",
  "angular-cli": {},
  "dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "4.0.1",
    "@angular/compiler": "4.0.1",
    "@angular/core": "4.0.1",
    "@angular/flex-layout": "2.0.0-beta.7",
    "@angular/forms": "4.0.1",
    "@angular/http": "4.0.1",
    "@angular/material": "2.0.0-beta.3",
    "@angular/platform-browser": "4.0.1",
    "@angular/platform-browser-dynamic": "4.0.1",
    "@angular/router": "4.0.1",
    "@types/lodash": "4.14.62",
    "classlist.js": "1.1.20150312",
    "core-js": "2.4.1",
    "hammerjs": "2.0.8",
    "intl": "1.2.5",
    "lodash": "4.17.4",
    "moment": "2.17.1",
    "moment-timezone": "0.5.11",
    "ng2-interceptors": "1.2.4",
    "rxjs": "5.1.0",
    "snapsvg": "0.5.1",
    "snapsvg-cjs": "0.0.4",
    "web-animations-js": "2.2.2",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "4.0.1",
    "@types/jasmine": "2.5.38",
    "@types/moment-timezone": "0.2.34",
    "@types/node": "6.0.60",
    "@types/selenium-webdriver": "3.0.1",
    "@types/snapsvg": "0.4.28",
    "codelyzer": "2.1.1",
    "compodoc": "0.0.41",
    "husky": "0.13.3",
    "istanbul-instrumenter-loader": "0.2.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-cli": "1.0.1",
    "karma-coverage": "1.0.0",
    "karma-jasmine": "1.1.0",
    "karma-mocha-reporter": "2.0.3",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-remap-istanbul": "0.2.1",
    "karma-sourcemap-loader": "0.3.7",
    "karma-spec-reporter": "0.0.30",
    "protractor": "5.1.0",
    "remap-istanbul": "0.6.4",
    "ts-node": "2.1.0",
    "tslint": "4.5.1",
    "typedoc": "0.5.7",
    "typescript": "2.2.2"
  }
}

---

main.js

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if ( environment.production ) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule( AppModule );

---

/tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

---

/src/tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

---

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "version": "1.0.0-beta.24",
    "name": "bloomberg-ic"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "../public/dist",
      "assets": [],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "",
      "styles": [],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    },
    "viewEncapsulation": "Emulated",
    "changeDetection": "Default"
  }
}

---

polyfills.ts

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
import 'intl';  // Run `npm install --save intl`.

Answer 1

You can workaround this for the time being by adding the following to the top of your polyfills.ts

import 'zone.js';
import 'reflect-metadata';