Angular 12.2: Global async-polyfill is generated when using target es2105

[dskgry]

Which @angular/* package(s) are the source of the bug?

compiler-cli, compiler

Is this a regression?

Yes

Description

Hi,
there seems to be an issue in angular 12.2.0 when generating bundles with typescript target es2015. I was able to reprodue the bug in combination with stencil web components, but I think this could be a general issue.

When async/await is used in the web components, the production bundle generates a global function for polyfilling async/await which is dangerous and broke our production code. This only happens with target es2015. Target es2017 works. Also angular 12.1.5 works as expected.

A minimum example is provided in the link below. This example also contains the compilation outputs for angular 12.2 es2015, es2017 and angular 12.1.5 es2015

Please provide a link to a minimal reproduction of the bug

https://github.com/dskgry/angular12_2_0_issue

Please provide the exception or error you saw

Target ES2015:

// generates this global async polyfill in the bundle
var r = (h, u, e) => new Promise((o, l) => {
    var i = s => {
        try {
            t(e.next(s))
        } catch (n) {
            l(n)
        }
    }, c = s => {
        try {
            t(e.throw(s))
        } catch (n) {
            l(n)
        }
    }, t = s => s.done ? o(s.value) : Promise.resolve(s.value).then(i, c);
    t((e = e.apply(h, u)).next())
});

Please provide the environment you discovered this bug in

Angular CLI: 12.2.0
Node: 14.15.0
Package Manager: npm 7.18.1
OS: windows 10 x64

Anything else?

No response

[petebacondarwin]

Can you describe what exactly broke? Was there an error message? When you say the polyfill is dangerous, what exactly do you mean by that?

[dskgry]

@petebacondarwin
Nothing exactly broke and there are no error messages.

All I can say is that the production-bundle generation is faulty since it generates an async polyfill, which is assigned to a global variable (in the example above the variable "r"). And this is dangerous since the global variable "r" can be overridden by any other script and then the async-polyfill does not work anymore. This is exactly what happend to us in production.

The polyfill is not assigned to a global variable when the target is es2017 or angular 12.1.5 is used.

[petebacondarwin]

It sounds like this is an issue with the Babel plugin that adds this helper during webpack bundling. I wonder if things have changed so that the Babel plugin is now run after bundling completes? @clydin ?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}