Uncaught reflect-metadata shim is required when using class decorators

getting this error on master branch.
using npm start

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';

It ended up working when i used it in main.ts and not polyfills.
I must say i'm not completely certain on why this is happening.

I've tried this fix and now I am getting

Uncaught TypeError: Cannot read property 'getOptional' of undefined_runAppInitializers @ application_ref.js:224PlatformRef_._initApp @ application_ref.js:205PlatformRef_.application @ application_ref.js:153bootstrap @ browser.js:101main @ main.ts:29Zone.run @ core.js:98zoneBoundFn @ core.js:75

Any ideas?

Did you find any solution?
I got this error when I import to main.ts:
EXCEPTION: TypeError: s.replace is not a function zone.ts?7d96:3
Adding to polyfills.ts doesn't help.

@skrywus

@skrywus can I see your repo

can you pull latest and open another issue if you still have a problem thanks

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

With "zone.js": "^0.6.12" TypeScript won't allow me to import 'zone.js';, but I could import the other one.

What can I do?

Currently working around it with require('zone.js');

see polyfills
https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/polyfills.browser.ts
it's import 'zone.js/dist/zone';

Still, its not working for me. I used import 'zone.js/dist/zone'. I have the exact code similar to angular2-webpack-starter.

Any updates on this issue ?

are you using npm version 3.x.x?
npm --version

3.10.5 it is.

When i try to bundle reflect-metadata with webpack i'm getting lot of warnings along with the following errors. Should i ignore these errors for my production build ?

@umasgn

@umasgn add this on top of your entry file:

/// <reference path="../node_modules/typescript/lib/lib.es6.d.ts" />

For some reason webpack needs this. Not sure if it will fix your issue in particular tho.

My entry file looks like this:

/// <reference path="../node_modules/typescript/lib/lib.es6.d.ts" />

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

// code

Also, I'm not using typings, I'm using npm

    "@types/es6-shim": "0.0.29",
    "@types/node": "^6.0.32",

npm i -D @types/es6-shim @types/node

Thank you very much for your reply. I modified file as you mentioned, this time getting different errors 'duplicate identifier .....'.

Downgrade reflect-metadata to "reflect-metadata": "^0.1.3" solved the problem.

Not sure if we had the same issue but I was getting this exception even though the shim was being packaged and loaded before the vendor bundle. This worked for me:

    new webpack.ProvidePlugin({
      Reflect: 'core-js/es7/reflect'
    })

I'm having this issue when I try to use decorators in my e2e tests. Should it still be enough to import zone.js and reflect-metadata in the polyfills-file when running tests?

I literally tried everything, and I am feeling that I am shooting in the dark here. Whatever I do I get the same error

[15:22:41] I/direct - Using ChromeDriver directly...
[15:22:41] I/launcher - Running 1 instances of WebDriver
[15:22:48] E/launcher - Error: reflect-metadata shim is required when using class decorators
[15:22:48] E/launcher - Process exited with error code 100

@radusuciu

Thanks @radusuciu , thats fix the problem for me

Dear all i am getting the same error

every thing was working fine and then the error started. Is there any quick fix for it. I am new in this and its getting very hard to fix it. Thanks

keywords if/then/else require v5 option
module.js:472
throw err;
^

Error: Cannot find module 'reflect-metadata'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (/Users/_____/HybridApps/testing/betaProject/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:1)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)

For me it seems like the main.js is loaded before the polyfills.js.
When I look at the index.html generated from aot, it generated this:

<script type="text/javascript" src="main.a130bdc74703d2271538.bundle.js" async></script>
<script type="text/javascript" src="polyfills.be2d4f0d81ef9285cbb7.bundle.js"></script>

when I turn it around to this:

<script type="text/javascript" src="polyfills.be2d4f0d81ef9285cbb7.bundle.js"></script>
<script type="text/javascript" src="main.a130bdc74703d2271538.bundle.js" async></script>

it works correctly. So now I changed the chunksSortMode in HtmlWebpackPlugin like that:

        chunksSortMode: function (a, b) {
          var order = ["polyfills", "libs", "js", "vendor", "main"];
          return order.indexOf(a.names[0]) - order.indexOf(b.names[0]);
        }

@Phmager I can't thank you enough! I spend working days solving this issue and was about to give up. I do not understand why this nasty bug (race condition style) doesn't generate more noise/attention.

If you were not already in Munich, I would send you a beer over as reward for solving the issue 😉

Running into the same issue on TOH Part 6 sample and following the steps at https://angular.io/guide/aot-compiler

@Phmager : Where are the aot index.html and HtmlWebpackPlugin? I can't find them.

This is so frustrating that a standard example and guidelines on angular.io aren't working right off the bat.

Thanks very much @Phmager . I work fine. Good job

@when i use in Chromium,i get this error,i found the order of scripts:

<script type="text/javascript" src="http://localhost:9000/manifest.js"></script>
<script type="text/javascript" src="http://localhost:9000/vendor.js"></script>
<script type="text/javascript" src="http://localhost:9000/app.js"></script>
<script type="text/javascript" src="http://localhost:9000/polyfills.js"></script>

when i use in Chrome, it's success and order is this:

<script type="text/javascript" src="http://localhost:9000/manifest.js"></script>
<script type="text/javascript" src="http://localhost:9000/vendor.js"></script>
<script type="text/javascript" src="http://localhost:9000/polyfills.js"></script>
<script type="text/javascript" src="http://localhost:9000/app.js"></script>

I thought this error maybe becauseof browser and order.
so i changed the webpack config of HtmlWebpackPlugin and it works correctly.

    new HtmlWebpackPlugin({
      template: 'src/index.html',
      chunksSortMode: 'dependency'
    }),

Same issue when i run a npm build with the production flag:
webpack -p --progress

@Phmager Thank you for a solution. Resolved issue.

Thanks brunolm - Had this problem that solved the problem

Navigation Menu

Repository navigation

Uncaught reflect-metadata shim is required when using class decorators #353

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Uncaught reflect-metadata shim is required when using class decorators #353

Description

Activity

simonturner commented on Feb 24, 2016

omerbenamram commented on Feb 24, 2016

Spittal commented on Mar 1, 2016

skrywus commented on Mar 2, 2016

PatrickJS commented on Mar 12, 2016

PatrickJS commented on Mar 13, 2016

brunolm commented on Jul 9, 2016

PatrickJS commented on Jul 10, 2016

happyvig commented on Jul 27, 2016

PatrickJS commented on Jul 27, 2016

happyvig commented on Jul 28, 2016

umasgn commented on Aug 8, 2016

brunolm commented on Aug 8, 2016

umasgn commented on Aug 9, 2016

radusuciu commented on Aug 30, 2016

valdemarrolfsen commented on Sep 8, 2016

gromatluidgi commented on Nov 7, 2016

syedfarrukhqamar commented on Jan 1, 2017

0xphilipp commented on Jul 4, 2017

Akkusativobjekt commented on Jul 5, 2017

kotpal commented on Jul 13, 2017

soromamadou commented on Jul 19, 2017

TaylorPzreal commented on Jul 24, 2017

darincardin commented on Aug 1, 2017

singhmohancs commented on Aug 17, 2017

CodeSaysItBetter commented on Oct 30, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions