How to hide Typescript files in browser?

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)

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.