Uncaught reflect-metadata shim is required when using class decorators

[omerbenamram]

getting this error on master branch.
using npm start

[simonturner]

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

[omerbenamram]

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.

[Spittal]

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?

[skrywus]

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.

[PatrickJS]

@skrywus can I see your repo

[PatrickJS]

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

[brunolm]

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

[PatrickJS]

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

[happyvig]

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 ?

[PatrickJS]

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

[happyvig]

3.10.5 it is.

[umasgn]

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 ?

[brunolm]

@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

[umasgn]

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.

[radusuciu]

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'
    })

[valdemarrolfsen]

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

[gromatluidgi]

Thanks @radusuciu , thats fix the problem for me

[syedfarrukhqamar]

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)

[0xphilipp]

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]);
        }

[Akkusativobjekt]

@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 😉

[kotpal]

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.

[soromamadou]

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

[TaylorPzreal]

@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'
    }),

[darincardin]

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

[singhmohancs]

@Phmager Thank you for a solution. Resolved issue.

[CodeSaysItBetter]

Thanks brunolm - Had this problem that solved the problem