Pesquisa de site

angular - Erro não capturado: shim reflect-metadata é necessário ao usar decoradores de classe

Enquanto tentava executar meu aplicativo Angular2 com TypeScript e npm, estou recebendo o erro mencionado no título. Como dito em tópicos semelhantes, tentei o "import 'reflect-metadata';" mas não funcionou.

Esta é a dependência no meu arquivo package.json:

"reflect-metadata": "0.1.3",

Agradeço antecipadamente pelo seu tempo

P.S.: Isso aconteceu depois que atualizei meu aplicativo de rc4 para rc5

Editar 1

Mais detalhes sobre o erro:

checkReflect    @   vendor.js:40700
(anonymous function)    @   vendor.js:40702
(anonymous function)    @   vendor.js:40791
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:30176
(anonymous function)    @   vendor.js:30215
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:30634
(anonymous function)    @   vendor.js:30652
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:37326
(anonymous function)    @   vendor.js:37842
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:36288
(anonymous function)    @   vendor.js:37305
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:26058
(anonymous function)    @   vendor.js:26118
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:9935
(anonymous function)    @   vendor.js:10294
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:12761
(anonymous function)    @   vendor.js:12871
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:12255
(anonymous function)    @   vendor.js:12657
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:12907
(anonymous function)    @   vendor.js:12935
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:12885
(anonymous function)    @   vendor.js:12892
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:6709
(anonymous function)    @   vendor.js:6746
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   vendor.js:148
(anonymous function)    @   vendor.js:49327
(anonymous function)    @   vendor.js:49528
initModule  @   vendor.js:43
require @   vendor.js:60
expanded    @   vendor.js:34
(anonymous function)    @   main.js:404
initModule  @   vendor.js:43
require @   vendor.js:60
(anonymous function)    @   (index):38

Resposta #1

Eu tive o mesmo problema com angular 4.1.3 com o build do cli quando atualizei meu código de cliente gerado pelo swagger para endpoints REST (swagger editor 2.2.3).

Eu adicionei reflect-metadata e funcionou para mim. Qualquer um enfrentando o problema após angular 4 e que tenha cli pode se ajudar com isso.

A mensagem de erro era um pouco diferente como abaixo

_fails.js:1 Uncaught SyntaxError: Unexpected identifier
    at Object../node_modules/core-js/modules/_descriptors.js (_descriptors.js:2)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
    at Object../node_modules/core-js/modules/es6.symbol.js (es6.symbol.js:5)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
    at Object../node_modules/core-js/es6/symbol.js (polyfills.bundle.js:1560)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
    at Object../src/polyfills.ts (ckset.ts:17)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
    at Object.2 (polyfills.bundle.js:13849)
    at __webpack_require__ (bootstrap aaad282eb132f1a48d07:54)
core.es5.js:354 Uncaught reflect-metadata shim is required when using class decorators

Resposta #2

Deveria haver erros no console que expliquem por que reflect-metadata não foi carregado.

O problema existente com a versão 0.1.3 é que ela possui dependências condicionais que podem ser incluídas erroneamente por sistemas modulares (SystemJS, Webpack, etc). Isso não acontece se o script for carregado da maneira normal,

<script src="https://npmcdn.com/[email "></script>

Uma versão posterior do pacote deve ser usada para utilizar reflect-metadata com sistemas modulares, a 0.1.8 está disponível neste momento.

Artigos relacionados