Uncaught TypeError: Reflect.defineMetadata is not a function on Angular 7 Production Build

Question

I am trying to deploy a production build of my Angular 7 app to Azure. I was able to easily deploy it when running ng build but when I attempted the full ng build --prod I receive this error below in console and the page does not load. This also happens when running the app on a localhost server as well.

Uncaught TypeError: Reflect.defineMetadata is not a function

I have searched, but I cannot find a reference to this exact error. I see most of the results are for this: Uncaught TypeError: Reflect.getMetadata is not a function

Imperforate

Answer 1

Make sure that you have reflect-metadata installed. Also try adding this line to your polyfills.ts file:

import 'reflect-metadata'

OR

import 'core-js/es7/reflect';

Ideally, this(the second import statement) is already a part of the polyfills.ts file.

That should make it work.

Addicted

Awesome, that worked. I only had zone.js imported into my polyfills.ts. Thanks for teaching me something new! – Imperforate

Thanks, I solved with import 'reflect-metadata' (angular 8.2.x) after the importing of zone.js. – Condensation

I had this issue for the Elastic APM RUM agent in Angular 7.1.4. The fix was the same: In Polyfills.ts i added import 'reflect-metadata'; which fixes the error. – Geo

Answer 2

DON'T INSTALL whole core-js, can install

npm i reflect-metadata

then simply import in polyfills.js

import 'reflect-metadata';

in this case you don't need to install whole core-js because only reflect-metadata needed. :)

Drona

Answer 3

The import in polyfills.ts is not contained in a default Angular project anymore because Angular only needs it for dev environment.

If you need the polyfill, e.g. for modules like class-transformer, you can add it to the polyfills.ts:

npm i core-js -S

import 'core-js/proposals/reflect-metadata';

Fourhanded