Google News
logo
Angular Interview Questions
An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.
 
The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.
 
This guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.
 
Here are some reasons you might want to use AOT.

Reasons Details
Faster rendering With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the application first.
Fewer asynchronous requests The compiler inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.
Smaller Angular framework download size There's no need to download the Angular compiler if the application is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.
Detect template errors earlier The AOT compiler detects and reports template binding errors during the build step before users can see them.
Better security AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

Choosing a compiler

Angular offers two ways to compile your application :

Angular compile Details
Just-in-Time (JIT) Compiles your application in the browser at runtime. This was the default until Angular 8.
Ahead-of-Time (AOT) Compiles your application and libraries at build time. This is the default starting in Angular 9.

When you run the ng build (build only) or ng serve (build and serve locally) CLI commands, the type of compilation (JIT or AOT) depends on the value of the aot property in your build configuration specified in angular.json. By default, aot is set to true for new CLI applications.
The Angular AOT compiler extracts metadata to interpret the parts of the application that Angular is supposed to manage. You can specify the metadata explicitly in decorators such as @Component() and @Input(), or implicitly in the constructor declarations of the decorated classes. The metadata tells Angular how to construct instances of your application classes and interact with them at runtime.
 
In the following example, the @Component() metadata object and the class constructor tell Angular how to create and display an instance of TypicalComponent.
@Component({
  selector: 'app-typical',
  template: '<div>A typical component for {{data.name}}</div>'
})
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { … }
}
The Angular compiler extracts the metadata once and generates a factory for TypicalComponent. When it needs to create a TypicalComponent instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.

Compilation phases  :  There are three phases of AOT compilation.

  Phase Details
1 code analysis In this phase, the TypeScript compiler and AOT collector create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.
2 code generation In this phase, the compiler's StaticReflector interprets the metadata collected in phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation.
3 template type checking In this optional phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the fullTemplateTypeCheck configuration option; see Angular compiler options.

Metadata restrictions :  You write metadata in a subset of TypeScript that must conform to the following general constraints:
 
* Limit expression syntax to the supported subset of JavaScript
* Only reference exported symbols after code folding
* Only call functions supported by the compiler
* Decorated and data-bound class members must be public
3 .
What is the Just in Time (JIT) compiler ?
Just in time compiler provides compilation during the execution of the program at a run time before execution. In simple words, code get compiles when it’s needed, not at the build time.
Just in time compiler compiles each file separately and it’s mostly compiled in the browser. You don’t have to build your project again after changing your code.

Most compiling is done on the browser side, so it will take less compiling time.

If you have a big project or a situation where some of your components don’t come in use most of the time then you should use the Just in time compiler.

Just in Time compiler is best when your application is in local development.
Initially, compiler was responsible for converting a high-level language into machine language, which would then be converted into executable code.
 
Just in time compiler, compiles code at runtime which means instead of interpreting byte code at build time, it will compile byte code when that component is called.
 
A few important points :
 
* In case of Just in time, not all code is compiled at the initial time. Only necessary component which are going to be needed at the starting of your application will be compiled. Then if the functionality is need in your project and it’s not in compiled code, that function or component will be compiled.

* This process will help to reduce the burden on the CPU and make your app render fast.

* One more interesting thing is, you can see and link to your source code in inspect mode because Just in Time, compiles your code with JIT mode and a map file.
JIT AOT
JIT downloads the compiler and compiles code exactly before Displaying in the browser. AOT has already complied with the code while building your application, so it doesn’t have to compile at runtime.
Loading in JIT is slower than the AOT because it needs to compile your application at runtime. Loading in AOT is much quicker than the JIT because it already has compiled your code at build time.
JIT is more suitable for development mode. AOT is much suitable in the case of Production mode.
Bundle size is higher compare to AOT. Bundle size optimized in AOT, in results AOT bundle size is half the size of JIT bundles.

You can run your app in JIT with this command:

ng build OR ng serve

To run your app in AOT you have to provide –aot at the end like:

ng build --aot OR ng serve --aot  
You can catch template binding error at display time. You can catch the template error at building your application.
Let's see what Angular 10 is, what's new in Angular 10, and the new features and breaking changes the Google-developed web framework Angular 10 has introduced to us :
 
* New Date Range Picker
* Warnings about CommonJS imports
* Optional Stricter Settings
* Keeping Up to Date with the Ecosystem
* New Default Browser Configuration
* Deprecations and Removals
The comparison of Angular 11 vs Angular 12 vs Angular 13, we learned about breaking changes, performance, and core structural changes, as well as several additional deprecations and upgrades. Let’s have a look at a table that compares the features offered by each :

Angular v11 Angular v12 Angular v13
TypeScript 4.0 TypeScript 4.2 TypeScript 4.4
Webpack 5 Support Webpack 5.37 Support Webpack 5.37 Support
Migration to ESLint Migrating from legacy i18n message IDs View Engine is no longer available
Deprecation of IE 9, 10, and IE mobile Deprecating support for IE 11 End of IE 11 support
Updates on Operation Byelog Improved component tests harness Improvements to the Angular CLI
Updated Language Service Preview Updated Language Service Preview Improvements to Angular tests
Strict checks with a flag Default strict mode Framework changes and dependency updates
Roadmap to provide early feedback Roadmap to inform about the priorities of the Angular team Support to Adobe Fonts
Linting Migration to default IVY-based language service Changes to the Angular Package Format (APF)
Improved Ngcc compiler Improved logging and reporting PR merges from community
Updated Hot Module Replacement (HMR) Support HTTP improvements Component API updates
Angular 14 could be installed via npm using the next flag.
 
Simply open a new command line interface and run the following command to install the latest version of Angular:
npm install --global @angular/cli@next
This will install the latest version of Angular CLI globally on your development machine.
 
Check the angular CLI version using below command
ng version
Before Updating : 
There aren't currently any changes needed before moving between these versions.

During the Update : 
* Run ng update @angular/core@14 @angular/cli@14 which should bring you to version 14 of Angular.

* Angular now uses TypeScript 4.6, read more about any potential breaking changes: https://devblogs.microsoft.com/typescript/announcing-typescript-4-6/

* Make sure you are using Node 14.15.0 or later

* Form models now require a generic type parameter. For gradual migration you can opt-out using the untyped version of the form model classes.

* Remove aotSummaries from TestBed since Angular no longer needs them in Ivy.

* Remove headers from JSONP requests. JSONP does not supports headers and if specified the HTTP module will now throw an error rather than ignoring them.

* Resolvers now will take the first emitted value by an observable and after that proceed to navigation to better align with other guards rather than taking the last emitted value.

* Update initialNavigation: 'enabled' to initialNavigation: 'enabledBlocking'.

* If you are defining routes with pathMatch, you may have to cast it to Route or Routes explicitly. Route.pathMatch is no longer compatible with string type.

* The promise returned by LoadChildrenCallback now has a stricter type parameter Type<any>|NgModuleFactory<any> rather than any.

* The router does no longer schedule redirect navigation within a setTimeout. Make sure your tests do not rely on this behavior.

* Implementing the LocationStrategy interface now requires definition of getState().

* Sending + as part of a query no longer requires workarounds since + no longer sends a space.

* Implementing AnimationDriver now requires the getParentElement method.

* Invalid route configurations of lazy-loaded modules will now throw an error rather than being ignored.

* Remove the resolver from RouterOutletContract.activateWith function and the resolver from OutletContext class since factory resolvers are no longer needed.

* Router.initialUrl accepts only UrlTree to prevent a misuse of the API by assigning a string value.

After the Update
There aren't currently any changes needed after moving between these versions.

Source : angular