fix(zone.js): fesm2015 bundle should also be strict module.

[JiaLiPassion]

Close #40215

fesm2015/zone.js is built to esm bundle with rollup, so the 'use strict';
statement is not generated in the bundle, even we put the 'use strict' in the src code,
rollup removes the code in the final bundle.

So if we load the fesm2015/zone.js as a module, such as ng serve, in the index.html

<script src="polyfills.js" type="module"></script>

Everything works fine, since polyfills.js is loaded as module, so it is always strict.

But in ng test, webpack concat the zone.js and loaded into the karma html. For other app and
test code, they are still strict since they are module because they have export/import
statement, but zone.js is a bundle without export, it is a side effect bundle, so after
loaded by webpack, it becomes non-strict. Which causes some issues, such as #40215,
the root cause is the this context should be undefined but treated as Window in non-strict mode.

Object.prototype.toString.apply(undefined);
// should be [object undefined], but it is [object Window] in non-strict mode.

So this commit always add 'use strict'; statement at the beginning of the zone.js es2015 bundle.

[alan-agius4]

LGTM.

Although I think it's simpler to just add it as part of the banner.

angular/packages/zone.js/rollup-es5_global-es2015.config.js

Line 18 in 4e8198d

* @license Angular v${version}

The fact that rollup is removing the use strict pragma makes sense since ES modules are strict by default.

However the problem here is that when used with Webpack this is causing an issue. Webpack will typically add the use-strict pragma to ES modules, however Webpack is unable to determine that zone.js is fact an ES module because it doesn't contain any expressions such as import or export statements.

[alan-agius4]

LGTM.

Although I think it's simpler to just add it as part of the banner.

angular/packages/zone.js/rollup-es5_global-es2015.config.js

Line 18 in 4e8198d

* @license Angular v${version}

The fact that rollup is removing the use strict pragma makes sense since ES modules are strict by default.

However the problem here is that when used with Webpack this is causing an issue. Webpack will typically add the use-strict pragma to ES modules, however Webpack is unable to determine that zone.js is fact an ES module because it doesn't contain any expressions such as import or export statements.

[gkalpak]

LGTM for dev-infra.
I can't really speak about the implementation, but @alan-agius4's suggestion of putting it in the banner sounds reasonable (and less "magic") to me.

Reviewed-for: dev-infra

[JiaLiPassion]

@alan-agius4, @gkalpak , thanks for the review. I have updated the PR.
Adding use strict to the license banner is much simpler, but it has another issue that is the es5 bundle will have double use strict generated.

such as bundles/zone.js will look like

'use strict';
/**
* @license Angular v<unknown>
* (c) 2010-2020 Google LLC. https://angular.io/
* License: MIT
*/
(function (factory) {
    typeof define === 'function' && define.amd ? define(factory) :
        factory();
}((function () {
    'use strict';

Which should not be a real issue.

[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.}