It appears that you are inquiring about three distinct questions:

• How do compilers and transpilers differ?
• Do Angular and TypeScript utilize compilers or transpilers?
• Does Angular have a dedicated compiler, and if so, what does it compile?

What sets a compiler apart from a transpiler?

@JörgWMittag provided an insightful response to this query. You can check it out here.

Do Angular and TypeScript employ compilers or transpilers?

Both TypeScript and Angular utilize actual compilers. They undergo lexical analysis, parsing, semantic analysis, and code generation similar to C/C++ compilers that produce assembly code. The classes/folders within both Angular and TypeScript are named "compiler," indicating their function. You can explore this further in Angular and TypeScript.

The Angular compiler is distinct from the TypeScript compiler, as they serve different purposes.

Is there a specific Angular compiler, and what is its function?

Angular features two compilers:

• View Compiler
• Module Compiler

The view compiler transforms the specified component template into a view factory, used to instantiate a view instance. Additionally, it compiles metadata information such as decorators like @HostBinding and @ViewChild.

For more detailed information and examples, it is recommended to read the following articles:

• Here is what you need to know about dynamic components in Angular
• Here is why you will not find components inside Angular

Furthermore, you may find the answer to What is the difference between Angular AOT and JIT compiler useful.

The module compiler's role is to generate a module factory containing merged provider definitions.

For additional insights, consider reading:

• Avoiding common confusions with modules in Angular

When moving from Typescript to JavaScript, processes like tree shaking, optional "less", and optimization take place during deployment. However, these processes do not involve traditional compilation. The result is a bundled and highly optimized code, but not compiled in the traditional sense, right?

Compilation refers to the transformation of a program from language A to language B, ensuring that executing the compiled program in language B produces the same results and side-effects as the original program in language A. Simply put, compilation is language translation from A to B, with various specialized terms for different scenarios.

• Assemblers translate from assembly to machine language.
• Disassemblers convert machine language back to assembly.
• Decompilers handle translations from lower-level to higher-level languages.
• Optimizers create faster or lighter code in the same language.
• Minifiers reduce code size in the same language.
• Obfuscators make code less readable in the same language.
• Transpilers convert languages at similar abstraction levels.
• Re-engineering tools maintain code formatting and intent during translation.

It's important to note that while JavaScript is often interpreted, languages themselves are not inherently interpreted or compiled; these traits are characteristics of compilers and interpreters. Every language can be implemented with either or both, with varying levels of optimization for execution.

So, JavaScript is still interpreted, correct?

Languages like JavaScript can be implemented with compilers, interpreters, or both. Ultimately, all code must be interpreted at some point for execution. For example, V8 and SpiderMonkey JavaScript engines use a combination of interpreters and compilers for performance optimization.

Language definitions can blur the line between interpreted and compiled code, showcasing the complexity of execution processes. The variety of tools and technologies available further challenges traditional notions of compilation and interpretation.

To get your code running in a browser, you need to tackle two key tasks:

1) You must transpile your Typescript into JavaScript, typically done using tools like webpack.

2) Next, you'll need to compile the angular abstractions into JavaScript, which includes components, pipes, directives, and templates. This aspect is handled by the angular core team.

If you're curious about the angular compiler, you can check out this talk by Tobias Bosch at AngularConnect 2016.

There's sometimes confusion between transpiling and compilation, but ultimately they are both just ways to transform code. In my understanding, transpilation involves converting code between languages at a similar level of abstraction (such as typescript to javascript), while compilation involves a decrease in the level of abstraction. Moving from templates, components, pipes, directives to plain javascript represents this shift, hence the term compiler.

Enhancements in Angular Compiler

Transitioning from Angular 4 to 5 brought about significant improvements in the compiler. The Angular compiler underwent a complete rewrite to enhance its speed and efficiency. Previously, Angular applications utilized Just-in-Time (JIT) compilation, which meant the app was compiled at runtime in the browser before execution. With the upgrades in Angular 5, the shift towards Ahead-of-Time (AOT) compilation was accelerated, resulting in faster app performance by reducing the amount of compilation needed during runtime. AOT compilation now comes enabled by default in all production builds starting from version 1.5 of the Angular CLI.

When preparing an application for deployment, executing the following command is pivotal:

ng build --prod

Several optimizations take place, including the generation of a production version, minification, bundling assets, filename hashing, tree shaking, AOT compilation, among others (toggle functionalities with flags like aot=false). Essentially, the --prod flag produces an optimized bundle of the application through AOT compilation utilizing the ngc (Angular compiler), resulting in streamlined code tailored for the browser (Yes, it pre-compiles templates).

Evolution of TypeScript Compiler

The TypeScript compiler, tsc, is responsible for transpiling TypeScript files and implementing TypeScript features, such as static types, into pure JavaScript devoid of TypeScript-specific keywords and expressions.

The TypeScript compiler encompasses two primary functions: transpilation and type checking. It transforms TypeScript code into JavaScript by:

• Removing all type annotations.
• Compiling new JavaScript features for older versions.
• Converting TypeScript-specific features into standard JavaScript.

During invocation, the compiler references configurations outlined in tsconfig.json (Detailed compiler options with default values can be found here).

While the TypeScript compiler operates like most compilers, there's a notable distinction – it continues emitting JavaScript code even when it encounters errors by default. To counter this, set the noEmitOnError configuration to true in the tsconfig.json file.

Important Note: tsc and ngc serve distinct purposes, and it's not a matter of choosing one over the other. For further clarity, refer to this insightful answer.

This response was formulated based on information from the following resources:

• Cloe, M. (2018). "Angular 5 Projects: Learn to Build Single Page Web Applications Using 70+ Projects".

• Dewey, B., Grossnicklaus, K., Japikse, P. (2017). "Building Web Applications with Visual Studio 2017: Using .NET Core and Modern JavaScript Frameworks".

• Freeman, A. (2019). "Essential TypeScript: From Beginner to Pro".

• Ghiya, P. (2018). "TypeScript Microservices".

• Iskandar, A., Chivukulu, S. (2019). "Web Development with Angular and Bootstrap - Third Edition".

• Hennessy, K., Arora, C. (2018). "Angular 6 by Example".

• Jansen, R., Wolf, I., Vane, V. (2016). "TypeScript: Modern JavaScript Development".

• Mohammed, Z. (2019). "Angular Projects".

• Seshadri, S. (2018). "Angular: Up and Running".

• Wilken, J. (2018). "Angular in Action".