How to compile a ts file to js in Angular and make it accessible in root when served?

Question

I need my file firebase-messaging-sw.ts compiled to firebase-messaging-sw.js to be accessible from the root.

I already created firebase-messaging-sw.ts in the src folder. But that doesn't work. I also added the .js file in angular.json.

So what I want is to make a ts file and compile it to js. But I don't know how to do it in Angular.

angular.json

"assets": [
              "src/favicon.ico",
              "src/assets",
              "src/firebase-messaging-sw.js"

Do you want to write a TS file, or use an existing JS file ? You're not very clear ... — user4676340, Commented Apr 10, 2019 at 9:50
I'll edit my post I want to write a TS file and use the compiled js file — Raymond the Developer, Commented Apr 10, 2019 at 9:52
If you write a TS file and wire it right, the resulting JS file will automatically be imported to your bundle. You don't need any additional step. — user4676340, Commented Apr 10, 2019 at 9:53
I don't need it to be bundled I need it to be seperate js accessible like this test.org/firebase-messaging-sw.js — Raymond the Developer, Commented Apr 10, 2019 at 9:57
I need to use environment variables from angular that's why I need t to be ts. So I don't think you understand the issue. — Raymond the Developer, Commented Apr 10, 2019 at 14:55

Kokodoko · Accepted Answer · 2019-04-10 13:59:49Z

6

You can always use

tsc myfile.ts

to compile a separate .ts file to a separate .js file, that has nothing to do with your Angular project.

Perhaps you can even run both commands at the same time in the terminal:

Terminal

tsc myfile.ts && ng build myproject

Or add it to package.json

"scripts":{
   "build" : "tsc myfile.ts && ng build myproject"
}

npm run build

answered Apr 10, 2019 at 13:59

Kokodoko

27.7k36 gold badges127 silver badges200 bronze badges

This works but is it possible to configure this within a tsconfig file?
– Raymond the Developer
Commented Apr 10, 2019 at 15:00
tsconfig allows for more options on how exactly to compile to js, but you still need tsc. But it might also be possible to add this process to Angular’s webpack file as a completely separate step
– Kokodoko
Commented Apr 10, 2019 at 15:15
Unfortunately, this isn't a good solution when the ts-file you're building depends on environments.ts vars. The correct dev/prod environments.ts is built after tsc has run.
– denkan
Commented Feb 29, 2020 at 13:47

Add a comment |

1 Answer 1