How to hide or Uglify Typescript files in a browser?

Question

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

Does anyone know how to hide this? See image below.

Answer 1

In your file tsconfig.json:

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

If you disable source maps, your typescript will no longer be loaded from map files. But in order to completely “hide” them, you can delete them as soon as you click on your code during the production process, since typescript is absolutely not required for your application to work after it is sent to JS.

, , typescript JS, - , . , webpack ( angular -cli)

Answer 2

, .

Sourcemaps JavaScript TypeScript.

, sourcemap tsconfig.json . , outDir dist. , , src.

, , git.

Answer 3

As indicated in this post

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

Therefore, adding a flag --prodfixes the problem:

ng build --env=prod --prod

generated folder distworks on lite-server

and the result: