Allow .ts files in angular.json scripts to be transpiled to target ES version

[denkan]

🚀 Feature request

Command

• build
• serve

Description

There are scenarios where we need to include a specific file to the bundle. Today, we can do this by using the scripts option in angular.json. But this only works for .js files.

It would be great to be able to specify .ts files too, which then get transpiled into target ES version.
This would e.g. allow us to include separate files which reads from environments.ts vars correctly.

My specific scenario:
I'm implementing Firebase Messaging, which require firebase-messaging-sw.js in the root and contains config vars for messagingSenderId (which I have stored in environment.ts).

Describe the solution you'd like

When specifying an input with .ts extension, the builder transpiles it into .js.

"scripts": [
  { "input": "src/firebase-messaging-sw.ts", "inject": false, "bundleName": "firebase-messaging-sw" }
]

Describe alternatives you've considered

This solution suggests to transpile the .ts file before the Angular build (tsc my-file.ts && ng build).
But then we won't access the correct environment.ts, as it gets determent in the Angular build...

[clydin]

The scripts option is intended to be functionally equivalent to adding a script element to the index HTML file for an application. It is primarily a convenience option to remove the need for developers to manage multiple index HTML files within a single application solely to support multiple configurations with differing script element requirements.

To allow for the behavior as described in the above issue, the scripts option would need to be changed into what would essentially be a miniature application builder. Not only would TypeScript processing be necessary but also bundling (with the potential for ES target downleveling and other post-processing steps). Additional script options for specifying a tsconfig and bundling options would be needed on a per script level as well to support the requirements of the script. This unfortunately would be a large increase in complexity and is currently out of scope for this option. If generating service worker code becomes common, then a standalone builder and a separate project within the Angular workspace may be the most beneficial long-term solution for this problem space.

[flash-me]

Hi @denkan

why not manually transpiling your TypeScript files with tsc and appropriate tsconfig.json?

• Create a dedicate tsconfig.scripts.json
• Put your required files into to files array in the config
• tsc -b tsconfig.scripts.json

cheers
flash ⚡

[denkan]

@clydin
Thanks for clarification. Sad to hear it would be such a big effort to achieve.

@flash-me
Thanks for the tip. As stated in the end of my post, I've considered this option but was hoping I wouldn't need to replicate the logic for picking correct environment.ts for just one simple file, but instead getting it for free from the Angular team ;)

[flash-me]

Oh didn't see that. Oops 😁.

[alan-agius4]

Closing as per above comment by @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.}