Does not work with Angular 10

Trying to implement with latest Angular version 10.1.4 by provided guide https://www.elastic.co/guide/en/apm/agent/rum-js/current/angular-integration.html throws error:

Uncaught TypeError: Reflect.metadata is not a function
    at Module.6SBv (apm-service.js:8)
    at __webpack_require__ (bootstrap:84)
    at Module.+/6d (index.js:1)
    at __webpack_require__ (bootstrap:84)
    at Module.ZAI4 (app.module.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Module.<anonymous> (main.ts:1)
    at Module.zUnb (main.ts:31)
    at __webpack_require__ (bootstrap:84)

When add polyfill https://stackoverflow.com/questions/53790880/uncaught-typeerror-reflect-definemetadata-is-not-a-function-on-angular-7-produc it throws another error:

Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at getCompilerFacade (core.js:562)
    at Function.get (core.js:10800)
    at getInjectableDef (core.js:333)
    at R3Injector.get (core.js:11098)
    at injectInjectorOnly (core.js:899)
    at Module.ɵɵinject (core.js:903)
    at Object.AppModule_Factory [as factory] (app.module.ts:111)
    at R3Injector.hydrate (core.js:11289)
    at R3Injector.get (core.js:11111)
    at core.js:11148

Also tried with clean Angular application and adding polyfill directly into index.html,

<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.13/Reflect.min.js" integrity="sha512-jvbPH2TH5BSZumEfOJZn9IV+5bSwwN+qG4dvthYe3KCGC3/9HmxZ4phADbt9Pfcp+XSyyfc2vGZ/RMsSUZ9tbQ==" crossorigin="anonymous"></script>

but does not work too, throws same error as above (the second one).

Maybe some hint here: https://angular.io/guide/deprecations#reflect-metadata

[deefactorial]

The Reflect issue can be resolved by adding:

import 'core-js/features/reflect';

to your pollyfills.ts file As for the JIT issue, it isn’t resolved for production builds with AOT. Angular 10 uses AOT for dev builds and production builds with IVY so this fix https://github.com/elastic/apm-agent-rum-js/pull/734 doesn’t appear to be working for Angular 9 and Angular 10 builds.

@vigneshshanmugam can you comment on this issue?

[emzet]

@vigneshshanmugam any progress ?