CODEWITHSUNDEEP
angulartypescript
Royal
Royal

Reputation: 407

How to hide Typescript files in browser?

I am developing an app with Typescript, Angular2 and Ionic2. Now when I am running the file in de browser, I can see all the source code from the .ts files..

Does anybody knows how to hide this? See image below.

enter image description here

Upvotes: 6

Views: 9189

Answers (3)

Mr.X
Mr.X

Reputation: 31257

As pointed out in this post

Uglification: rewrites code to use short, cryptic variable and function names.

Hence, adding the --prod flag solved the issue:

ng build --env=prod --prod

the generated dist folder is running on the lite-server

and the result:

ng build --env=prod --prod

Upvotes: 1

goenning
goenning

Reputation: 6654

You can see the original source code because you're emitting sourcemaps.

Sourcemaps are used by the browser to link you're JavaScript files to your TypeScript.

What you can do is disable sourcemap generation on your tsconfig.json when you're compiling to production. Besides this, you could also use the outDir property to compile all your app into a dist folder. This should be the folder you deploy to production, not your src folder.

There are another good reasons to use a different output folder, for example ignoring it on your git repository.

Upvotes: 4

Supamiu
Supamiu

Reputation: 8731

In your tsconfig.json file:

"compilerOptions": {
        ...
        "sourceMap": false,
        ...
    }

If you disable source maps, your typescript will no longer be loaded from the map files. But to completly "hide" them, you can remove them once you push your code in production, since typescript is absolutly not needed for your application to work once it's transpilled to JS.

Also, keep in mind that Typescript is transpilled to JS which is still client-side code, and it will be readable by the client. If you want to obfuscate your code, you should take a look at webpack (which is used by angular-cli)

Upvotes: 8

Related Questions