Angular4 core.es5.js 使用类装饰器时需要未捕获的反射元数据填充程序
Posted
技术标签:
【中文标题】Angular4 core.es5.js 使用类装饰器时需要未捕获的反射元数据填充程序【英文标题】：Angular4 core.es5.js Uncaught reflect-metadata shim is required when using class decorators 【发布时间】：2017-09-06 02:36:10 【问题描述】：将我现有的项目升级到 Angular 4 和 Angular/CLI 1.0 后，我收到此错误：
core.es5.js:354 Uncaught reflect-metadata shim is required when using class decorators
我将我的项目与新的ng new 进行了比较，它们在配置上看起来很相似。我已经重新启动了我的终端和计算机。已删除node_modules、npm cache clean、npm prune、npm i
我在 Windows 7 上运行 ??????
版本 1.0.0 上的 CLI 使用 ng build 构建时没有错误，但是当我运行应用程序时，我在浏览器中收到错误消息。在https://angular-update-guide.firebaseapp.com/的帮助下，我正在从版本 rc.2 升级 CLI，从 v2.5 升级 Angular
* 更新
我发现我的index.scala.html 没有polyfills.js 的脚本标签。连接那部分后，我产生了这个错误：
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`.
【问题讨论】：
我在这一点上的结论是等待 CLI 成熟到 v1.0 是最好的。 我也需要一个答案！ 【参考方案1】：您可以暂时通过将以下内容添加到您的 polyfills.ts 顶部来解决此问题
import 'zone.js';
import 'reflect-metadata';
【讨论】：
【参考方案2】：您可能缺少 polyfills.ts 中的 reflect core.js API。
【讨论】：
我有 polyfills.ts 反映未注释。在我上面的问题中将其添加到 sn-p 中。 polyfills 是一个自动生成的文件。而是编辑您的 tsconfig.json 因为您宁愿在编译时而不是在运行时更改【参考方案3】：检查包 @angular/compiler-cli 是否存在于你的 package.json 中。
此包将reflect-metadata 作为其依赖项之一。确保你有那个。在你的项目中生成 npm-shrinkwrap.json 或 package-lock.json 文件并搜索 reflect-metadata 包。
【讨论】：
以上是关于Angular4 core.es5.js 使用类装饰器时需要未捕获的反射元数据填充程序的主要内容，如果未能解决你的问题，请参考以下文章
Angular 2 Material MdSnackBar 没有提供者
angular4：无法使用 httpclient get 获取响应字符串