TypeError: Reflect.getMetadata is not a function

[FabienDehopre]

Augury does not work if the polyfill core-js/es7/reflect is not imported in the polyfills.ts file. However, Angular does not need this polyfill when compiled using AOT as stated in the comment above the import in the polyfills.ts file.

/* Evergreen browsers require these. */
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
// import 'core-js/es7/reflect';

Augury version (required): 1.19.3 Angular version (required): 6.1.4 Date: 2018-08-24 OS: Windows 7

Demo test application:

https://stackblitz.com/edit/angular-augury-bug-reflect-metadata?file=src/polyfills.ts https://angular-augury-bug-reflect-metadata.stackblitz.io/

Description of issue:

When importing the core-js/es7/reflect polyfill:

When not importing the core-js/es7/reflect polyfill:

Steps to reproduce:

1. create a new angular project using the CLI
2. comment out all the polyfills except zone.js in the polyfills.ts file
3. serve using AOT
4. open the browser and navigate to the angular app
5. try to use augury

[andrewthauer]

@FabienDehopre - I'm not suprised your seeing this behaviour. Augury relies on reading some of the reflect metadata from Angular objects at runtime. During AOT this information is stripped out and is one of the reasons that Augury won't work with AOT builds (along with the lack of ng.probe).

If you want to exclude the reflect polyfill and also use Augury, I'd suggest looking at a custom build configuration setup for dev vs prod. You could probably leverage the Angular CLI's build configuration fileReplacements to swap out the polyfill.ts file in dev for something like polyfill.dev.ts. Then you should be able to just override ng serve with a -c custom-dev CL switch.

[FabienDehopre]

It makes sense. I'll try the custom build config. Thanks

[andrewthauer]

No problem. Let me know know if you run into any issues.