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`.
