mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
test: use strict mode for ng_elements integration test
Apparently the Rollup bundle for these tests defaults to `es` format, meaning it expects to be loaded at runtime as native ESM. This was not happening because it was loaded as a regular `<script src="...">` tag (note the lack of `type="module"`). This is problematic because Rollup assumed it would be running in a scoped environment, meaning [this function](https://github.com/angular/angular/blob/adb8d1078d5f127085952ca81951c18e0178a038/packages/core/primitives/event-dispatch/src/event.ts#L45), which happens to be named `addEventListener` but does *not* implement the `EventTarget.prototype.addEventListener` contract, was being bundled as a simple: ```javascript function addEventListener(element, ...) { // ... } ``` Since this was loaded with no `type="module"` or `'use strict';`, the script executed in "sloppy mode", meaning all `var` statements and function definitions are implicitly global. Since `window` *is* the `globalThis` object, this random `addEventListener` function clobbers the actual `window.addEventListener` and breaks any calls to it because they're not implementing the same contract. Fix is to just use `<script src="..." type="module">`. Alternatively we could bundle in an IIFE, which Rollup does support, but in theory we could depend on external ES modules which aren't bundled, so the `type="module"` seems a little safer and more future-proof.
This commit is contained in:
committed by
Kirill Cherkashin
parent
0f6e850a65
commit
cf47eb41ff
@@ -11,6 +11,6 @@
|
||||
<hello-world-el></hello-world-el>
|
||||
<hello-world-onpush-el></hello-world-onpush-el>
|
||||
<hello-world-shadow-el></hello-world-shadow-el>
|
||||
<script src="dist/bundle.js"></script>
|
||||
<script src="dist/bundle.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -12,6 +12,6 @@
|
||||
<p>TestCardContent</p>
|
||||
<span slot="card-footer">TestCardFooter</span>
|
||||
</test-card>
|
||||
<script src="dist/bundle.js"></script>
|
||||
<script src="dist/bundle.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user