There is no way to add `"use strict";` to top of generated JavaScript files

[olfek]

Command

build

Description

Even after enabling alwaysStrict - https://www.typescriptlang.org/tsconfig/#alwaysStrict

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

[alan-agius4]

The Angular CLI outputs ESM modules, which are inherently strict by design, making the use of "use strict" redundant.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#strict_mode_for_modules

[olfek]

@alan-agius4 ...

"use strict"; // Different behavior with and without this.

function myModule()
{
    function two()
    {
        console.log(this.myGlobalVar);
    }

    function one()
    {
        console.log(this.myGlobalVar);
        two();
    }

    one.bind({ myGlobalVar: "my global variable value" })();
}

myModule();

With this example, without "use strict"; , I don't see the "inherently strict by design", I must be missing something.

[olfek]

@alan-agius4

https://jsfiddle.net/doc7s5ak/

[olfek]

I have another code base, with the same tsconfig alwaysStrict option set, and built by webpack, all the generated files begin with (()=>{"use strict"; .

[alan-agius4]

In the reproduction, since this file doesn't use module syntax and the script type is not set to "module", it's not treated as a module.

However, the Angular CLI always sets the script type to "module", which enforces strict mode.

Unlike esbuild, webpack doesn’t not output ESM modules, thus making “use strict” needed.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html

[olfek]

@alan-agius4

Ohhh okay, this - https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode#strict_mode_for_modules
is a little misleading, when reading I skipped the link to - https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules
and went straight to reading the code comment "// because this is a module, I'm strict by default" leading me to think that all functions are modules or something 🙄

So the key thing is the type="module" attribute on the script tag to run an HTML script as a "module".

[alan-agius4]

A script can be treated as module and strict by default either because it’s contains ESM module syntax or because the type is set to module.

In https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode#strict_mode_for_modules the code is strict by default even without type="module" as it contains ESM module syntax, ie: the export keyword.