ngtsc(Angular latest compiler) compilation overview

  1. Create the ts.Program
  2. Scan source files for top-level declarations that have trivially detectable @Component annotations. This avoids creating TypeChecker.
  3. For each such declaration that has a templateUrl or styleUrls, kick-off resource loading for that URL and adds the Promise to a queue.
  4. Get diagnostics and report any initial error messages. At this point, the TypeChecker is primed.
  5. Do a thorough scan for @Component annotations, using the TypeChecker and the metadata system to resolve any complex expressions. Wait on all resources to be resolved.
  6. Calculate the set of transforms that need to be applied.
  7. Kick-off Tsickle emit, which runs the transforms.
  8. During the emit callback for .d.ts files, re-parse the emitted .d.ts and merge in any requested changes from the Angular compiler.

--

--

--

Front End Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CORS, A Short and Sweet Explanation

Interview Coding Problem

Lexical Scope In JavaScript —

How to add a Slider to your React project

Scan JS object for RegEx patterns

Let’s style console.log

10 JavaScript basic thing that a beginner should know

Vue 3 Component Library

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajit Singh

Ajit Singh

Front End Developer

More from Medium

Redirect to a Custom Login Page When Securing Your Angular App with MSAL

Introduction to building Ionic 6 Angular App with NX monorepo (Part 1)

Final Fantasy VIII & TypeScript

Keep your app NEVER FAIL