Introduction to Angular 11

In this tutorial we discuss what’s new in angular 11 and understand below concepts.

• • • What is angular
    • What is angular history or version
    • What are the advantages of angular
    • What are the new features in angular 11.

Angular.

Angular is a platform and framework for building single-page client applications using HTML and TypeScript.

A single page application is a web application or a website which provides users a very fluid, reactive and fast experience similar to a desktop application. It contains menu, buttons and blocks on a single page and when a user clicks on any of them; it dynamically rewrites the current page rather than loading entire new pages from a server. That’s the reason behind its reactive fast speed.

Angular 2 is complete rewrite of AngularJS and its written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.  There were only two version AngularJs and Angular2 which is know as angular and other versions are enhancing into the angular2.

Angular or Angular2 is a component based framework. So in the angular building block is component.

Angular History.

Angular team has skipped version 3 to avoid a confusion due to the misalignment of the router package’s version which was already distributed as v3.3.0.

Angular Advantages.

• • • • Performance: in Angular 2 is much improved this is because he supports offline compilation and fast change detection. The support for dynamic loading and asynchronous templating are features that help in improving the page load and response times considerably. Module loader is also much simplified in Angular 2. You can now use System.js as the universal loader to load the ES6 modules.
    • • Mobile Support: Regardless of the fact that Angular 1.x was meant for responsive application development, there wasn’t any mobile support. However, you could take advantage of some libraries to run Angular 1.x on mobile. On the other hand, Angular 2 has built-in support for mobile application development. Note that Angular 2 renders code differently for Web browsers and mobile browsers.
    • • Component Based Framework: Unlike its earlier versions, Angular 2 is completely component based. With Angular 2, you would just use components and directives — controllers and $scope are no longer used. Well, what are components anyway? A component is a controller class that is associated with a template. Here’s how a component in Angular 2 looks like.
    • • Typescript Support: Unlike its earlier versions, Angular 2 is completely component based. With Angular 2, you would just use components and directives — controllers and $scope are no longer used. Well, what are components anyway? A component is a controller class that is associated with a template. Here’s how a component in Angular 2 looks like.
    • • Dependency Injection: Dependency Injection is a software design principle that helps to abstract the dependencies of an object outside of it and make such objects loosely coupled with each other. Angular 2 has improved support for dependency injection. Modular development and component isolation are features that make dependency injection simple and easy to use and implement in Angular 2.
    • • Cross-platform: You can build and run Angular 2 applications on desktops, Android and iOS systems.

Angular 11 new features.

• • • • Updated Hot Module Replacement (HMR) Support: Hot Module Replacement is a mechanism that allows modules to be replaced without a full browser refresh. HMR is not an entirely new thing to Angular and developers were able to use it with previous versions as well. But with Angular 11, the amount of effort you need to configure the HMR has been reduced drastically and they have provided a CLI command for that. Now you can simply use the ng serve command with an hmr tag to enable HMR:
    • • TypeScript 4.0 Support: With this latest update, the Angular team has dropped support for TypeScript 3.9. Now Angular 11 only supports TypeScript 4.0.One of the main reasons behind this upgrade is to speed up the builds. Angular 11 ensures much faster builds than previous versions.
    • • Webpack 5 Support: As you know, webpack is used to compile a large number of files into a single bundle or single file. Webpack 5 is the latest version and was released in the last month. It is still not fully stable.However, Angular 11 provides experimental support for webpack 5 and you can use it with Angular 11 to try out new things. According to the release notes, the Angular team believe that they can extend this experimental support to achieve faster builds and small bundles once things get stable.If you are up to try webpack 5, you can start by adding the following lines to your package.json file:   “resolutions”: {  “webpack”: “5.4.0”  }
    • • Moving to ESLint :TSLint was one of the most popular linting tools among developers for a long period of time. But it was recently deprecated and replaced by ESLint.Angular is also moving from TSLint to ESLint with the version 11 update and you won’t be able to use TSLint for linting purposes in Angular again. Angular has introduced a three-step method to migrate from TSLint to ESLint.
    • • Updated Language Service Preview: Previously, this language service was based on View Engine. Angular 11 provides a new more powerful and accurate Ivy-based language service. Although this feature is also still in development, it has the capability of behaving similarly to the TypeScript compiler.

You can watch our video version of this tutorial with step by step explanation.