Whats new in Angular 9

Whats new in Angular 9 A Quick Guide to know whats new in Angular 9 Back Home Categories Online Courses Mock Interviews Webinars NEW Community Write for Us Categories Artificial Intelligence AI vs Machine Learning vs Deep LearningMachine Learning AlgorithmsArtificial Intelligence TutorialWhat is Deep LearningDeep Learning TutorialInstall TensorFlowDeep Learning with PythonBackpropagationTensorFlow TutorialConvolutional Neural Network TutorialVIEW ALL BI and Visualization What is TableauTableau TutorialTableau Interview QuestionsWhat is InformaticaInformatica Interview QuestionsPower BI TutorialPower BI Interview QuestionsOLTP vs OLAPQlikView TutorialAdvanced Excel Formulas TutorialVIEW ALL Big Data What is HadoopHadoop ArchitectureHadoop TutorialHadoop Interview QuestionsHadoop EcosystemData Science vs Big Data vs Data AnalyticsWhat is Big DataMapReduce TutorialPig TutorialSpark TutorialSpark Interview QuestionsBig Data TutorialHive TutorialVIEW ALL Blockchain Blockchain TutorialWhat is BlockchainHyperledger FabricWhat Is EthereumEthereum TutorialB lockchain ApplicationsSolidity TutorialBlockchain ProgrammingHow Blockchain WorksVIEW ALL Cloud Computing What is AWSAWS TutorialAWS CertificationAzure Interview QuestionsAzure TutorialWhat Is Cloud ComputingWhat Is SalesforceIoT TutorialSalesforce TutorialSalesforce Interview QuestionsVIEW ALL Cyber Security Cloud SecurityWhat is CryptographyNmap TutorialSQL Injection AttacksHow To Install Kali LinuxHow to become an Ethical Hacker?Footprinting in Ethical HackingNetwork Scanning for Ethical HackingARP SpoofingApplication SecurityVIEW ALL Data Science Python Pandas TutorialWhat is Machine LearningMachine Learning TutorialMachine Learning ProjectsMachine Learning Interview QuestionsWhat Is Data ScienceSAS TutorialR TutorialData Science ProjectsHow to become a data scientistData Science Interview QuestionsData Scientist SalaryVIEW ALL Data Warehousing and ETL What is Data WarehouseDimension Table in Data WarehousingData Warehousing Interview QuestionsData warehouse architectureTalend T utorialTalend ETL ToolTalend Interview QuestionsFact Table and its TypesInformatica TransformationsInformatica TutorialVIEW ALL Databases What is MySQLMySQL Data TypesSQL JoinsSQL Data TypesWhat is MongoDBMongoDB Interview QuestionsMySQL TutorialSQL Interview QuestionsSQL CommandsMySQL Interview QuestionsVIEW ALL DevOps What is DevOpsDevOps vs AgileDevOps ToolsDevOps TutorialHow To Become A DevOps EngineerDevOps Interview QuestionsWhat Is DockerDocker TutorialDocker Interview QuestionsWhat Is ChefWhat Is KubernetesKubernetes TutorialVIEW ALL Front End Web Development What is JavaScript â€" All You Need To Know About JavaScriptJavaScript TutorialJavaScript Interview QuestionsJavaScript FrameworksAngular TutorialAngular Interview QuestionsWhat is REST API?React TutorialReact vs AngularjQuery TutorialNode TutorialReact Interview QuestionsVIEW ALL Mobile Development Android TutorialAndroid Interview QuestionsAndroid ArchitectureAndroid SQLite DatabaseProgramming s new in Angular 9 Las t updated on May 26,2020 1.9K Views Wajiha Urooj Bookmark 1 / 12 Blog from Introduction to Angular Become a Certified Professional Our world is ever-advancing and to keep up with its pace, the Angular community is always dedicated to provide new features. This makes sure your applications are not left behind. On the 7th of February 2020, Angular released a marvelous new version of Angular i.e Angular 9. So, if you are an Angular enthusiast and are keen to know what Angular 9 offers, then this article on Whats New in Angular 9 will definitely help you quench your thirst.Before moving on, take a look at all that has been discussed over here:Understanding Angular VersioningUpdate PathsVersions SupportedWhat is new in Angular 9?Angular9 IvyBenefits of using IvyAOT and IvyIvy and LibrariesWhat is AOT?What is the difference between AOT and JIT?Working of AOT?Phases of CompilationUnderstanding Angular VersioningAngular version refers to the level of changes that are proposed by the r elease which actually helps users understand what happens when they upgrade to the new version. The version numbers that you see in Angular have three parts i.e major.minor.patch.The majorreleases usually contain a notable number of new features whereas minor release introduces smaller new features and they are completely backward compatible. Patchreleases are most often bug fixes that have very low risk.Update PathsAngular update paths depend on two factors i.e if you are updating within the same major release or from one major release to another.While updating within the same major release, intermediate releases can be omitted and you can directly upgrade to the latest minor releaseWhile upgrading from one major release to another, Angular recommends you do not skip any intermediate major releasesVersions SupportedVersions 4x, 5x and 6x are no longer supported. However, Angular 7x will be supported until the 18th of April 2020 whereas version 8x will have support until 20 November 2020.What is new in Angular 9?Angular 9 has a number of new changes which are:Compilation of applications with Ivy is a default in Angular 9Your Angular application is compiled Ahead-of-Time (AOT). This means the Angulars AOT compiler will compile all the HTML and TypeScript present in your code into JavaScript before your browser downloads and runs it. This conversion takes place during the build process itself and it also includes type-checkingAngular 9 requires TypeScript 3.7. Any lower versions are not supportedtslib or the TypeScript runtime library has now been made a peer dependency rather than a direct one. Earlier, this library would be installed automatically but now, you will have to explicitly add this using npm or yarnAngular 9 IvyAngular 9s compiling and rendering engine is known as Ivy. The older versions of Angular made use of View Engine. The bundle size produced by the View Engine is very large but with Ivy, this bundle has considerably reduced thereby helping Ang ular overcome its bundle issues.For example, the simplest Hello World program was about 36Kb which is quite a large bundle size for a simple Hello World program. So, the Angular team decided that they will keep a threshold value of 10Kb. This was called the cake threshold because the head of that team decided to give the team all the cake in case they reduce the bundle size to below 10Kb. The team was successful in reducing the bundle size incredibly to just 7.3Kb with the minified Ivy version and something even better i.e 2.7Kb with the Ivy Compressed version. This was indeed a great achievement and they did deserve all the cake!Benefits of Using IvySmaller bundle sizeVery helpful when it comes to debuggingBrings faster compilationHow does Ivy produce Smaller Bundle Size?To understand how Ivy reduces the bundle size, you will first need to understand how the View Engine works. When you compile any of your components using the View Engine, say for instance example.component, you bas ically get two JavaScript files. They are the example.component.js file which consists of the compiled TypeScript code and example.component.ngfactory.js file which is a static representation of the template code. So here, there will be a mapping of these two files which consumes a much longer build time.So, the Angular team decided that the second file, i.e the .ngfactory.js file, can be removed by just adding the template code within the JavaScript code itself. The Ivy makes use of function calls rather than iterating over each element as in the View Engine.Helpful in DebuggingWith Angular 9, you will not have to debug through the framework, but rather, you can do it on the component itself which helps you debug your code instantly.Faster CompilationEarlier, when you would make use of the ng build command, the whole application gets recompiled. This was because the Angular components were aware of all the dependencies of themselves.For example, if your application has a component that contains *ngIf then, the component would also know what this *ngIf needs in order to compile it. So in case, you make changes to any of the *ngIf dependencies, all components that contain this *ngIf need to be recompiled. As a result, the team came up with an idea of the Locality Principle which brought forth single file compilation. The components that contain *ngIf dont actually need to know its dependencies. So in this case, if some component is recompiled, nothing else will be needed to recompile putting an end to global recompilation. The Ivy calls the constructor of the *ngIf which knows the exact dependencies of it.AOT and IvyAOT along with Ivy speeds up the creation of applications. To activate AOT for your project, open the angular.json file and set aot to true.Ivy and LibrariesYou can build Ivy applications with libraries of the View Engine compiler using ngcc or the Angular compatibility compiler. To build your applications efficiently, you will have to run ngcc afte r every installation of third-party packages. In order to do this, insert the script in the package.json file as follows:Each time you install a new module, the postinstall script will be executed.NOTE:In case you are installing multiple libraries in a row, postinstall can be slower than allowing the Angular CLI to run ngcc on builds.What is AOT?As mentioned earlier, the Angular AOT compiler compiles your codes HTML and TypeScript into JavaScript before the browser downloads and executes it. Here are a few reasons why you must use the AOT compiler:When you use AOT, the rendering becomes faster. This is because the browser can download a pre-compiled version of your project and load the executable code. This helps the application to render instantly, without it having to compile the code first.The AOT compiler will inline all the external HTML and CSS within the applications JavaScript which in turn eliminates discrete ajax requests for these source files.When applications are alread y compiled, there is no need to download the Angular compiler. This helps in reducing the size of the Angular framework being downloaded as the compiler is half the size of Angular itself.Angulars AOT compiler will help you find template errors during the build process itself.Reduction in injection attacks as the HTML templates are pre-compiled into JavaScript before they are rendered on the client-side thereby providing better security.What is the Difference between JIT and AOT?AOT loads the application much faster than the JIT compiler because JIT compiles the application at runtime.AOT does not have to download the compiler at all, unlike the JIT compiler.The bundle size produced by JIT will be much larger as it contains the compiler code as well.In case of AOT, the template binding errors can be detected during the build time itself unlike JIT where the template errors are discovered at the time when the application is displayed.Using AOTWhen you use ng serve or ng build, the JI T compiler will come into action. To use the AOTcompiler, you can use the same commands with the aot extension as follows:ng serve aot //to build and serveng build aot //to buildWorking of AOTAOT interprets the application by making use of the metadata which is specified within the @Component, the @Input decorators or within the constructors. The AOT compiler will take all the metadata and then, it will generate a factory for it. For example, if you have a component as follows:Angulars AOT compiler will extract all the metadata of DashboardComponent once and will then create a factory. Whenever an instance of this class is to be created, the AOT compiler will call the factory that will produce a visual element. This will be bound to a new instance of the target component class with its injected dependency.Phases of CompilationApplications are compiled in three stages by the AOT compiler:Code Analysis In this phase, the AOT collector will collect the metadata, analyzes the sy ntax and represents it in the best possible manner. Any error in the metadata syntax will be recorded and there will be no metadata interpretationCode Generation Here, the collected metadata will be interpreted by the compilers StaticReflector and will also check for metadata validation once again. If there are any violations, an error will be thrownTemplate Type Checking This is an optional phase where the Angulars template compiler utilizes the TypeScript compiler so as to check the validation of binding expressions in templates. If you wish to enable this, you can set the fullTemplateTypeCheckconfiguration option to true as shown below:If you are looking for an Angular update, check out the following link:Angular Update PathThis brings us to the end of Whats new in Angular 9 blog. I hope this blog was informative and added value to you. I would recommend you to go through this Angular 8 TutorialEdureka video to watch the video and learn how to create an Angular application from s cratch.Angular 8 Tutorial | Create Angular Project from Scratch | EdurekaThis Edureka Angular 8 Tutorial will help you learn Angular 8 completely along with a step by step demonstration on how to create an Angular project from scratch.Check out the Angular 8 Training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.Recommended videos for you Whats New in Angular 4 Angular 4 Features Watch Now Are You Riding The AngularJS Wave Yet? Watch Now AngularJS : Superheroic JavaScript MVW Framework Watch Now AngularJS Develop Res ponsive Single Page Application Watch Now AngularJS-Superheroic JavaScript MVW Framework Watch Now Angular 4 Tutorial Getting Started With Angular 4 Watch Now Angular JS : Develop Responsive Single Page Application Watch Now Web Development Trends and Predictions Watch Now Angular JS Tutorial for Beginners Watch Now Animation And Testing In AngularJS Watch Now A Work Day Of A Web Developer Watch Now Deep Dive into AngularJS Javascript Framework Watch Now Web Development with HTML5, CSS3 JavaScript Watch Now Trendy Web Designs using HTML5 Watch NowRecommended blogs for you Everything You Need To Know About Opacity In CSS Read Article How To Implement JavaScript Trim Method? Read Article JavaScript vs jQuery: Key Differences You Need to Know Read Article Angular ngModel: Know all about the ngModel directive Read Article All you Need to Know about Comments In HTML Read Article How To Best Use Superscript Tag In HTML? Read Article How To Best Utilize Text-Shadow Property In CSS? Read Article Angular Directive: Learn How To Work With Directives In Angular Read Article Everything you Need to Know About Inheritance in JavaScript Read Article Important JavaScript Loops You Need to Know Read Article Angular ngClass : Know All About the ngClass Directive Read Article Everything You Need To Know About Stream In Java Read Article Animating AngularJS Apps with ngAnimate Read Article Top 45 jQuery Interview Questions and Answers You Need to Know Read Article All you Need to Know about MVC In AngularJs Read Article How To Best Utilize Onclick In JavaScript? Read Article How To Best Implement Minify In CSS? Read Article Everything You Need To Know About CSS Selectors Read Article How to Upload File in AJAX? Step By Step Guide Read Article All You Need to Know About Inner HTML in JavaScript Read Article Comments 0 Comments Trending Courses in Front End Web Development Angular Certification Training15k Enrolled LearnersWeekendLive Class Reviews 5 (5700)