My Blog

Author: saqibkhan

  • Angular Material and CDK Updates

    Angular Material and the Component Dev Kit (CDK) received updates for better accessibility and new components.

  • Deprecation of View Engine

    Angular 10 started the deprecation process for the legacy View Engine, paving the way for the Ivy compiler, which offers better performance and smaller bundle sizes.

  • Optional Stricter Settings

    Angular 10 introduced the ability to create new projects with stricter type checking and linting options, helping developers catch potential issues early in the development process.

  • Improved Data Binding and Template Syntax

    Angular 10 made improvements to the data binding and template syntax, reducing the need for unnecessary code and improving the clarity of templates.

  • Dynamic Imports for Lazy Routes

    Angular 10 added support for dynamic imports in route configurations. This allows for more flexible and efficient lazy loading of modules.

  • TypeScript 3.9 Support

    Angular 10 upgraded to TypeScript 3.9, which brought performance improvements and new features like better type checking and faster compilation.

  • New Default Browser Configuration

    Angular 10 introduced a new set of default browser configurations that included support for modern browsers, which improved performance and reduced the polyfills required.

  • Smaller Bundle Sizes

    Angular 10 introduced improvements to the size of bundles by default, thanks to the updated Terser tool for JavaScript minification, which reduced the size of production builds.

  • History and different versions of Angular

    The first version of Angular was Angular1.0 (also known as AngularJS) which was released in 2010. But here, we are talking about Angular so; let’s see history and different versions of Angular.

    Angular2

    Angular 2.0 was first introduced in October 2014. It was a complete rewrite of Angular so, the drastic changes in the 2.0 version created controversy among developers. On April 30, 2015, the Angular developers announced that Angular 2 moved from Alpha to Developer Preview and then Beta version was released in December 2015. Its first version was published in May 2016 and the final version was released on September 14, 2016.

    Angular4

    Angular 4 version was announced on 13 December 2016. The developers skipped the version 3 due to some confusion. Its final version was released on 23 March 2017.

    This version has some additional features:

    • This version introduced HttpClient, a smaller, easier to use, and more powerful library for making HTTP Requests.
    • It provides new router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing set of life cycle event such as NavigationStart.
    • It provides the support of conditionally disable animations.

    Angular5

    This version was released on 1 Nov, 2017. It provided some improvements to support for progressive web apps, also provides improvements related to Material Design.

    Angular6

    This version was released on 4 may, 2018. It was a major relaese which provides some features like: ng update, ng add, Angular Elements, Angular Material + CDK Components, Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable Providers, Animations Performance Improvements, and RxJS v6.

    Angular 7

    The latest version of Angular is Angular 7. It was released on October 18, 2018. It consists of many extensive features:

    • Updates regarding Application Performance
    • Angular Material & CDK
    • Virtual Scrolling
    • Improved Accessibility of Selects
    • Supports Content Projection using web standard for custom elements
    • Dependency updates regarding TypeScript 3.1, RxJS 6.3, Node 10

  • How to install Angular 7?

    Angular 7 Environment Setup

    In this page, you will see how you can install the prerequisites needed to run your first Angular 7 app.

    Install Visual Studio Code IDE or JetBrains WebStorm

    You must have an IDE like Visual Studio Code IDE or JetBrains WebStorm to run your Angular 7 app.

    VS Code is light and easy to setup, it has a great range of built-in code editing, formatting, and refactoring features. It is free to use. It also provides a huge number of extensions that will significantly increase your productivity.

    You can download VS Code from here: https://code.visualstudio.com

    JetBrains WebStorm is also a great IDE to develop Angular 7 apps. It is fast, attractive, and very easy to use software but, it is not free to use. You have to purchase it later, it only provides a trial period of 30 days for free.

    You can download VS Code from here: https://www.jetbrains.com/webstorm/download/#section=windows

    We are using JetBrains WebStorm in this tutorial.

    Install Node.js

    You should install node.js to run your Angular 7 app. It manages npm dependencies support some browsers when loading particular pages. It provides required libraries to run Angular project. Node.js serves your run-time environment as your localhost.

    See how to install node.js: install-nodejs

    Or

    Just go to node.js official website https://nodejs.org/en/

    Download and install latest version of node.js. In my case, it is 11.8.0

    How to install Angular 7

    After the successful installation, you will see command prompt like this:

    How to install Angular 7

    Use npm to install Angular CLI

    Run the Angular CLI command to install Angular CLI

    npm install -g @angular/cli  
    How to install Angular 7

    or

    Just go to Angular CLI official website https://cli.angular.io/

    You will see the whole cli command to create an Angular app. You need to run the first command to install Angular CLI. These steps are same for Windows and Mac.

    How to install Angular 7
    npm install -g @angular/cli  

ng new my-dream-app  

cd my-dream-app  

ng serve 

      Your Angular 7 Environment setup is complete now.