Angular After Dark: Book reading of Accelerating Angular Development with Ivy Chapter 2

hello welcome to anger after dark i'm last bring i'm the author of this live stream angle of the dark and i'm also the author of recently released book accelerating angular development with ivy i'm also not the only sole author i'm the co-author that you might see here so it's me last frink it's jakob and daisen also at dane and we have santoshiada from india who wrote the foreword hi oscar welcome to the stream i'm just celebrating the book release and i want to read chapter 2 because that's a chapter that's available to read for free and it's a very pretty exciting one depending on what you like to to learn uh but um yeah it's it's available for free so let me show you how you can read it yourself but i'm basically going to try to read the whole thing it's about 20 pages and pretty technical so i'm going to read it all and let's see how it goes please let me know if the font is too small for the book we will figure something out i have a few solutions in case it doesn't work out with the first try so first of all there's a public github repo for the book it's on the pack publishing organization it's called accelerating angular with development with ivy and inside of this one you'll find uh down here there's a link into the older project for all the different feature apps and here in part two you will be working with the angular academy real world application there's four chapters where just hands-on with coding using all the skills you learned in the first part and a few ones for the third part as well which focuses on tooling and the compiler and a few other things anyways of course there's links to somewhere to to the actual book one of them is at the top here if you click the image here you'll go to the pack publishing product page this is where chapter 2 is actually available the full chapter so you can read it immediately on this address it will be down here right so here's everything if you want to read it for yourself but i'm going to grab a pdf copy here and i'm going to start with the first pages just to see what's in there and then we'll we'll continue to chapter two so the title accelerating angular development with ivy subtitle a practical guide to building faster and more testable angular apps with the new iv engine and just some information about publishing and the people involved there and here we might already need to assume i can kind of see here so let me zoom in a bit so this is the dedication of the authors jacob and myself so mine reads this book is dedicated to my daughters i have two twin daughters they're 10 years old um because they inspire me to always do better and also my greatest thanks to my wife for supporting me and all my extracurricular activities such as writing this book and so just doing this live stream after dark and jacob's dedication is he dedicates the book to the angular community all right let's try to scroll here i'm not good at this so here's the forward by santosh angle ivy was first introduced in angular version 9 in 2020 and it has been kind of a black box for many developers few developers know much about ivy but lars spring is one of the leading ivy experts in the world thank you santosh this is the first book that goes into more detail about iv features and tooling it is a must read for all developers at all levels even if you're an expert in angular you will learn a lot from this book this is the forward by santosh yada who's a google developer expert in angular he's a github star of zero ambassador and the co-founder of this is angular and this is learning together with me and he's a freelance software consultant as well so yeah that that that's right that about sums it up you'll learn uh i mean this is not for an angular beginner you you need to know what a component and a service and dependency injection is and setting up a project things like that but other than that this book is for you if you're if you've used angular for a few years or if you're an absolute expert i guarantee you i guarantee you you'll learn something this is uh assuming that you know angular all these things we just talked about it's assuming that you have been using angular up until version 8 maybe newer than that but you haven't paid much attention to the new tooling the new features and apis and major changes in iv the iv engine and iv generation of angular so the book covers versions 9 to 12. and it tries to highlight the features that i find most interesting while at the same time not not covered very well or at all by documentation articles videos books until now so plenty of plenty to learn here yeah and this is some more information about me and about jacob and drayson and a few more dedications here mine reads i want to extend my thanks to my computer science professor hans hittle for being an inspiration early in my career and for teaching me regular expressions and jacobs reads i want to thank my wife anita and my daughter sophie for understanding why i spent all those hours in front of a computer screen and yeah i know that feeling [Music] and here's the reviewer anu who reviewed the one of the early drafts early final drafts of the book in its full length so thank you for your feedback anu and his dedication is i'd like to thank my wife hima for always giving me the freedom to pursue my interests so lots of wives and and family supporting authors like us okay oscar you have a question here is there's a good section that talks about aot on ivy with aots default okay so you have the book i guess and this is the table of contents so that must be in part three which are the final four chapters so let's try to locate that here i guess oh here it is yeah chapter 12 embracing ahead of time compilation i can't show you the content here i can only show you chapter two you'll have to buy the book for the rest or go into the examples in the repo but yeah let's have a look at the content of that technical requirements using the a aot compiler for all development phases for example ahead of time compilation for builds component templates unit tests and runtime then there's a section on dealing with the aot compilers limitations for example providing values using functions declaring metadata using functions using tag template literals and component templates initializing metadata variables and then the final section is initializing asynchronous dependencies so providing an async dependency with a static platform provider or resolving an asynchronous dependency within the application initializer so um yeah and oscar recommends this uh 12th chapter i'm glad you liked it so yeah so this is the book in its three part is his first part is chapters one two four and that's all about new features and typescript and angle and angular components and tooling and configuration comes with angular a bit of testing and css custom properties and the new provider scopes that are called the platform and the any provider scopes and these two in particular are some some new major features that haven't gotten a lot of attention they're kind of just there almost accidentally accidentally so this chapter here goes into details like it's let's see how much is that my math doesn't work my calculator doesn't work right now how many pages is this is it 18 pages yeah something like that about these two topics and then the the chapters five to eight use these features to add additional features to this real world application called angle academy jacob and drazen were wrote the second part uh the hands-on part and i wrote parts one and three and um but let's let's have a look at chapter two here the outline the table of contents it's called boosting developer productivity through tooling configuration and convenience so there's some technical requirements we're going to look at those then there's using predictable style bindings outputting faster and smaller bundles with aot compilation taking advantage of strict mode and other new configurations enhancing our angular testing experience leveling up our developer experience and then some sub uh topics so those are the 20 pages i'm going to read for you now and now it becomes important that we find the right font size here okay let me try this one 200 zoom i don't know 225 are two yeah 225. okay there we go boosting developer productivity through tooling configuration and convenience that's chapter two of accelerating angular development with ivy and uh yeah this is the book as as it will look in the physical copy as well this is a pdf let's get into it the structure of the different chapters are reminded of each other there's an introduction explaining the topics that we're going to discuss then there's some technical requirements and then the main content of the chapter divided into a few sections and then finally a summary uh something or conclusion with a summary uh discussing what we learned and what's in the next chapter things like that maybe referring to later chapters for in-depth explanations of some of the topics that we touched on for example in this one it mentions aot compilation and there is an entire chapter about that that we just discussed anyways let me try to read this i'll need some water first and remember you can read this chapter 2 for free as well on excuse me on the on the product page on packpop.com for this book so across data binding and attribute directives there are many options to dynamically change styles in an angular application angular ivy supports multiple styling application programming interfaces apis in a predictable way this chapter teaches us about angular iv style binding precedence rules through a simple example that uses almost every possible style api in angular through a few examples we will explore how directive and component inheritance and the sharing of metadata have changed in angular iv before that we learn which metadata properties are shareable through inheritance so those are a few interesting topics i hope the ahead of time compilation was introduced in one of the first major releases of angular angular iv is the first generation to enable it in all phases of the application life cycle from development through testing to builds and there's a here just zooming in a bit more or removing some tooling okay we will discuss how this affects our workflow and bundle size after briefly peaking under the hood of angular to discuss some of the internal building blocks that have enabled the performance improvements needed to make this change the strict mode preset available with angle iv enables additional compile time checks of our angle applications as well as bundle optimizations angular ivy and its supported versions of typescript have added significant speed improvements and stricter checks to tests we will learn about this through examples that are easy to understand angular's compiler analyzes our application code at build time this is nice but some of the compiler error messages suffer from missing context that's speaking of the view engine error messages in angular iv contextual details have been added to several compilation error messages in this chapter you will see iv compilation error examples compared to compilation errors from earlier generations of angular as we discussed how it improves the developer experience now this is an area where the later versions of angular has really improved a lot i know joe's cool horn from the angular team has been working a lot of these error messages and improved them in each major version and even some feature versions so a big round of applause for that they are very very helpful compared to early on that also goes for the strict template type checkings that's also discussed in this chapter and yeah all the error messages from that they are extremely helpful whereas in view engine and template compiler generation of angular error messages were a bit more mysterious and lack a lot of context about where did this error occur and what does it mean and how do you fix it to the point that now today we have ng error codes for many of the compilation errors and there are even videos on the angular ill websites explaining about those errors and and what to do about them okay angle is known for great tooling and support for strong typing through typescript however we have not been able to type check all parts of our component templates in the first or second generation of the angular framework that's the template compiler and the view engine generations the iv generation completes the component template type checking story for the angular framework that's with the strict template type checking automated migration schematics are a wonderful piece of tooling that is part of the angel framework since ib was released they include messages with descriptions and an option to run them in separate commits as we will see in this chapter the versions of the angular language service introduced with angular ib have allowed for better integration with ides such as visual studio code additional tool tips are added to component templates and additional details have been added to existing tooltips syntax highlighting has been added to inline templates and improved for external file templates we're going to see some screenshots i hope they're in color in this pdf they're not in the printed copy of the book but in the github repo there are all the images are available in color as a downloadable zip file but yeah there will be color screenshots of some of these errors and tool tips and things like that in the second chapter of the book we're going to cover these topics using predictable style bindings sharing metadata through directive and component inheritance outputting faster and smaller bundles with aot compilation taking advantage of strict mode and other new configurations also enhancing our angle testing experience and leveling up our developer experience so after finishing this chapter you can boost your developer productivity by taking advantage of the latest improvements in tooling configuration and other angular features now comes the technical requirements they're specific to each chapter so it doesn't go into detail about which feature requires which version of angular type script it's kind of a minimum version that suppose supports all the features and tooling explained in each chapter or in this chapter in particular although in some sections in some chapters specific versions are mentioned for this chapter some of the features of tooling requires angular 12 0.0 and typescript 4.2 at the very least and then there's a link to this github repo even pointing to yeah the two feature apps and chapter two so we'll look at that when uh i mean let me just find it and we can see which feature apps are in there okay going up to the code we have an angular cli workspace with many different apps um so chapter two there's one for inheritance and one for style binding so there we go and we'll look at each one after reading the section they cover okay let me scroll down a bit so using predictable style bindings oh oscar has a question can you share those video links uh so you must be talking about the ng errors well let's see if we can find an example uh if i search for i have to zoom in here so you can see it let's search for ng101 i think that's an error message no ng110 what's that error message isn't it like oh okay yeah okay ng0100 expression has changed after it was checked this is the most dreaded error message of angular compilation and here's a video by the angular team explaining this error so now you'll get an error message with this code so you can go and look that up in in the angular documentation and there's a video explaining it there's a description and debugging instructions so of course this is another part of of angle iv that has been improved a lot uh the documentation ever since dave shevitz joined as kind of the lead taking the lead on the angular documentation and i know they have several people working on it now full time so he's done a lot to restructure and reorganize and improve almost all parts of the the angular documentation at this point so huge shout out today all right going back to the book we are going to discuss using predictable style bindings angular has many ways to find styles and classes to the dom elements ivy introduces predictable style bindings because of a precedence rule set that covers all of angular's style binding apis except for the ng-class and ng-style directives and then a fun fact now i guess that's in the next paragraph template element bindings have higher priority than directive host bindings which have higher priority than component host bindings binding of individual css classes and style properties have higher priority than binding maps of class names and style properties binding values that define the full class or style attributes have even lower priority the ng class and ng-style directives override all other bindings on every value change bottom values and style bindings are treated differently finding the undefined value will defer to lower priority bindings while null will overwrite bindings with lower priority and this sounds complicated and let's see what it's all about with an example here so we have an app component and it's using here it's using some component called app host binding there's an ng style binding there's uh what's that called the template property binding style binding i think and the template map style binding and then the static style template star binding then on this component we also applying a directive called app host binding so this component will have some style bindings they will be overridden by the style bindings in this directive and the ones that we have in line in the app components template they will override the equivalent bindings here in in the component and directive bindings so pink red orange yellow blue purple gray green yeah so which color does this one have here in the directive we have some host style bindings there's the host directive host property binding and the directed static directive host style binder in the component we have the component host property binding and the component static star binding so the question is which color will this element have which background color if we put it into an app and i created a talk about this going into even more detail let me see if i can find it here speaker deck yeah this one confidence and templates and styles with angular iv so this is a full talk covering strict template type checkings going into examples and discussions about each strict template type checking rule and then also this style precedence rules and there's somewhere in here there's a demo for style binding that we can we can look at here it is no i have to copy this i guess uh eclipse um edit angular iv style binding precedence that's the url so let me post that one that stack blitz in the chat here and uh let's have a look there's a i mean the the app in the repo is very similar the feature app for this chapter is very similar to this one so here uh right now the background color is hey stop doing that background color is crimson red because we're using nd style and you might remember that i wonder what's best dark or light we'll use dark this is angle after dark okay so ng style always overrides every other possible style binding it's the exclamation mark important css robot for angular style bindings so when we remove this another color will turn up and i wonder which one it is it will probably be hot pink because this has the highest priority uh or the highest precedence of all the different style bindings used here another well let's check yeah now it's hot pink and another thing to know is that the ordering of the style bindings doesn't matter anymore so moving down here it's still hot pink the type of style binding is what matters and that's what the precedence rules that uh is is defining so removing hot pink and we'll have a coral background color that's the next precedence that we have applied and removing that we have the template static style binding which is gold removing that and then what's the most important thing after the template bindings well it's a the directive host bindings are more important than the component host binding so we'll have to look into the directive here and we do see that there's uh the red directive host property style binding here with rebecca purple applied rebecca purple is named after eric meyer's daughter who passed away to cancer some years back and it's this beautiful rich deep purple color that i really really like anyways removing that and we'll go to olive green and that was the final ones of the host style both directives start binding so we might as well remove that and remove from here and this doesn't really change anything oh something happened here oh yeah that was probably an ng module somewhere okay so now the only thing we have left in our template is this app hostile component so let's look at its style bindings it has this component host property style binding of navy blue as we see here removing that will move to the tan this is a static component host style binding and that was the final one removing that and there's no background color left i have a style somewhere which makes it white or transparent or whatever so it's here but you can't see it that was the demo here and this if you go look at this talk confidence and templates and styles with angle ivy the slides i just posted here there's in the description there's a recording or even two i guess of of this talk and i recommend you go and check that out it goes a bit more into the practical side of more examples than the book actually does but of course it was inspired by the book actually it was armin vadanyan who i proposed to pick two topics from the book and these were the ones he found most interesting strict template type checking and style binding precedence so then i created this talk okay so that this is a very similar example we have here in the book in this chapter i won't read all the code again but in the preceding code example we see components and a directive using many different types of style bindings despite this it will output only a single style rule to the dom for the app host binding element the background color of this rule will be evaluated as pink and this is what's important to be aware of despite all these star bindings applied to the same dom element only one style will be output at runtime and this is evaluated by angular at runtime and changing as the bindings change because here we have um here we have values but it could be tied to variables that are properties that are changing based on some conditions or events happening so they can change the runtime there will always be one value for each property added by angular at runtime all right the order in which the background colors are applied as shown here with the highest precedence first pink so it was the pink color because of the ng-style directive binding if we remove that it would have been red because of the template property binding then orange because of the template map binding if we remove that it would become yellow because of the static style value removing that it would become blue because of the directive host property binding and after that it would have been purple because of the static directive host style binding then gray which is a component host property binding and finally green because of the static component host style binding as seen in this example the order in which the bindings are mentioned in templates and metadata options does not matter the precedence rule set is always the same so we can change all these bindings the source order and it won't matter with a single caveat that i hope i mentioned in the book having predictable style bindings makes it easier to implement complex use cases in our applications it is worth mentioning that another reason for introducing this breaking change is that ib does not guarantee the order in which data bindings and directives are applied and this is the one of the reasons for this change uh because in view engine order of the bindings and the directives and all that the source order mattered but iv will no longer guarantee that order that it's applied in the same order as it's described in the template so uh that's the reason for making it predictable with these preceding rules before it was a bit more unclear and probably not documented at all or very well and a very happy accident of creating these style precedence rules is that now we have support for css custom property bindings in angle and that's covered in i believe it's chapter 3 or something like that hello mr one is there an angular 13 migration on nx13 not yet but it will come in an 13.x nx release so it's written as part of the nx14 roadmap but the angular 13 migration in itself will be released as a major version of nx sorry a feature uh a minor version a feature version so it will be 13 dot something that will contain the angular 13 release 13 that something of nx okay so in this section we witnessed the following styling precedence rules in effect from highest priority to lowest tempted property bindings template map bindings static template class and style values directive host property bindings directive host map bindings static direct directive host class and style bindings component host property bindings component host map bindings static component host class and style bindings this is the precedent ruleset of angle iv you're welcome mr one the order in which style bindings are listed in code only matters if two bindings share the same precedence in which case the last one wins so we saw that if i switched around the style bindings it didn't impact the value because the precedence were different but if there are two bindings with with exactly the same precedence the last one declared in the source order wins these precedent rules are also visible in the angular documentation let's see if we can find them and of course this is where i got the inspiration from style precedence if we search for that we will we shall find helpful information in the angular documentation so here it's also explaining these three different layers so we have template bindings directive host bindings and component host bindings and examples of each type of binding and what else something about specificity yeah okay so it's covered by angular documentation i covered it in a different way in my book and with this example that's now in the stack blitz and i also discuss it even more in detail in that talk called confidence and templates and styles with angular iv okay so last important learning here the energy class and ng style directive bindings overwrite all other style bindings they are the exclamation mark important equivalence of angular style binding so use them very sparingly they should be a last resort there's an order to this madness of many different style binding apis so try to figure that out first same as trying to win the specificity wars you should understand it and keep the lowest specificity possible that will override the styles when when dealing with css instead of using important keyword and css because that's that won't make it any easier so same thing here avoid energy class and empty style it used to be the case that they could express some style bindings that you couldn't do with any other style binding api but that's no longer the case the only reason to use them is to overwrite everything else shouldn't be used for anything other than that and even that shouldn't be done very often so try to avoid that now that we can predict how multiple style bindings and values affect our ui let's look at how we can use class inheritance to share directive and component metadata so that was all about style binding precedence and now we'll look at inheritance i don't recommend using inheritance very often but if you do in angular this section covers what can be shared the metadata options for components and directives that can be shared because this changed as well in angle iv and they they added like optionless decorator factories for ng module directive i think component still needs at least a template or it won't render but you can if you have a base directive or base component maybe you can then apply an empty directive decorator i don't know for sure or you can just add a component decorator with an empty template anyways i thought this was interesting to explore more in detail what can and cannot be inherited of all the different directive metadata for directives and for components because this is something i'm not sure is covered at all in angular documentation there's well there's some migration guides for ivy mentioning why and how we apply the directive and component decorators to base classes because it is a breaking change in some view engine based classes you didn't have to add the directive and component decorators and even the injectable as well but now uh every time we use a feature as we'll see a specific feature of the framework we have to add that um we have to add that one of those decorators all right so sharing metadata through directive and component inheritance that's this next section angle iv changes directive and component inheritance in a more explicit but predictable manner which allows the bundle size and compilation speed to decrease uh so yeah this is one of the reasons for this change is that it was difficult for the compiler uh to figure out things like dependency injection and adding uh annotations on the classes when there were no decorators on the base classes so now we have when we're extending a class the base class also needs to have a decorator and so does the subclass as well a base class is using any of the following angular specific features it has to have a directive or component decorator applied so that could be the dependence a dependency so any this is i i think i hope i changed this in the actual book uh this might not be the final final version of the pdf uh because it's kind of this is a misunderstanding by a reviewer or an approved reader or something there's no dependency decorator what i mean here is if you inject a dependency in the constructor you have to apply the directive or component decorator but the attribute that is a decorator you don't see it used very often but this is instead of having an input property we can pass a string as kind of an attribute on a custom element and we can inject it directly in the constructor but then it won't we won't be able to change that value but that's the same with a custom element and an attribute whereas an input property of a component is more like a property on a web component a custom element so if we're using dependency injection are we using an attribute decorator on an injected parameter in the constructor then we have to apply a directive or component decorators if we have an input or output property in a class we also have to have a directive component decorator now and the same goes for the host binding or host host listener bindings also the same goes for view child view children content child and content children queries as soon as we're using any of those we have to add the directive and component decorator so to support this this is new in ivy we can add a directive decorator without any options so just the add sign then directive and then parentheses with no arguments this conceptually works like an abstract directive and will throw a compile-time error if declared in an angular module so base directive or base component classes shouldn't be or cannot be declared in an angular module only the subclasses extending that base class well a directive without any options if you try to add that to the declaration array of the module a compile time error will be thrown so we could make these base class the base class abstract the abstract keyword but that would cost to have us to extend it to test it so there's a tradeoff there by extending base directives we can inherit the inputs outputs host and queries metadata options some of them will even be merged if declared both in the subclass and the base class components are able to inherit the same metadata options from their base class but are unable to inherit styles and template metadata it is possible to refer to the same style urls and template urls though also a template can be if you use an inline template rather than an external file you can share let's say part of the template could be in a variable shared between two component templates or even the full template can be just in a string variable but it has to be static it cannot be lazy initialized or synchrony asynchronously initialized because declarables have to be resolved at compile time otherwise we cannot use aot compilation and everyone should be using that now for all their angle applications to the point that the angular team is considering removing jet compilation entirely so if you're not an aot compilation yet go ahead and make that effort and it'll also be worth your while in many ways okay so the book then reads let's write some example components that share behavior through a base class first we will create a base search component as seen in the following code snippet then some imports here a component which has the selector app based search it has a template which is empty the class is called base search component it has native private member with the hashtag in front of it or the pound sign so hashtag search is a new event emitter of string so this is an alternative or the standard way of adding private members to classes this is almost finally finalized in the ecmascript standard and also as of the very recent versions of typescript it's properly supported for methods properties static methods static properties and typescript classes but it is an alternative to the private keyword the private access modifier of typescript where the private uh keyword the private access modifier is only private ad compile time this hashtag the the native private class members they are actually private at compile time now sorry at runtime so they are truly private and instances of the same class i don't think they can even access each other's which is a kind of a strange [Music] feature of most programming languages that private members can be accessed by other instances of the same class which is kind of strange when you think about it i don't think that's the case with uh javascript private members but i'm not 100 sure okay so we have a private search event emitter that will emit a string at some point we have an input property called placeholder it has a default value of search dot dot we have an output property called search and it's uh piping on that event emitter called the private search field and we use debounce time with 150 milliseconds and then distinct until changed so that we're ready waiting for keystrokes to hold the pause before emitting a search term also we won't re-emit the same value twice two times in a row we then have an event handler called on search it accepts an input event so we're then the input events target which is an expect to be an html input element we're unpacking the value of that and storing it in the query variable or constant variable here if curry is null we will do nothing so return but if it is a string we will emit it through the private search event emitter which will then be piped through the deep bounds operator the distinct until changed operator and out through the output property called search and that was it for the base class the base search component has an event handler that handles input events representing a search query it debunks the searches for 150 milliseconds and ignores duplicate search queries before outputting them through its search output property additionally it has a placeholder input property so you might have noticed that this base class doesn't have a template so it won't do anything it won't even bind to all of these and it's not meant to be used on its own either it's meant to be extended right that's why it's called the base search component so next we will create a simple search box component that inherits from the base search component this is seen in the following code snippets so importing the component decorator importing this base search component from another file and then this is a component with the selector of app search box it has style urls and look at that it uses space search styles as well so they are also shared between this class and another class probably then we have the template inline it has an input element of type search and then it binds with the property binding it binds to the placeholder property which is a property in the base search component class but since our search box component class extends that it will also have a placeholder property which is which is actually an input property then similarly we bind to the input event on this input element and we pass it to the message handler the event handler called onsearch which is also part of the base search component class so looking at this final line here it no properties no methods are defined in this search box component class but it's binding to the onsearch event handler and the the placeholder input property that comes from the base search component and interestingly it's sharing some styles from base search sassy styles as css yeah so the search box component uses base search styles and can add its own component specific styles if it needs to then we would add a comma and list a file with styles exclusive to this search box component okay the input element in its component template binds to the placeholder input property it inherits from the base search component likewise the input event is bound to the on search event handler that it inherits so let's create another component that inherits from the base search component the following code block lists the suggested search component it's called the suggested search component so importing component also this time importing the input decorator and then importing the base search component and let's look at this class it has a selector called app suggested search it also uses these base search styles it has a template with an input element and this html5 data list element which has some options in it so this is a an auto completion set data set that would be yeah this one these are the also complete options for that are bound to this input element by adding the list attribute and then specifying the id of this data list so down here i'm not sure if you've seen this before but this is part of html5 so it's a native autocomplete but we're using angular to fill in the options here so looping over suggestions for each suggestion we're adding an option element with the value bound to the suggestion and then also this the suggestion is displayed all right so the class is called suggested search component it extends the base search component and it adds an input property called suggestions that's a read-only string array that's initialized by default to an empty array in addition to the inherited input property placeholder the suggested search component adds a suggestion input property which is a list of search query suggestions the component template loops over these suggestions and lists them as option elements in a data list element that is tied to the input element similar to the search box component the suggested search component binds to the on search event handler and the placeholder input property it also uses the base search styles then an important note as seen in these examples we do not have to add duplicate constructors in subclasses to enable constructor injection i'm not sure but i think in view engine or at least some earlier versions of angular you had to add that a duplicate constructor uh to enable a dependency injection it might have to do with the fact that you could not or did not have to add the decorator to this the base class or maybe it was the other way around maybe the subclass nah anyways now we know the rules as listed in the introduction to this section every time we're using some of these angle decorators or features we have to add a directive or component decorator to the base class as well as the subclasses okay but yeah importantly we do not have to add duplicate constructors so the here the suggested search component does not have any constructor it's inheriting the one from the base search component because we don't need additional dependencies if we did need additional dependencies we would have to call super and pass the dependencies required by the base search component class right directive and component metadata is the special glue that ties typescript classes to the dom through component templates and data binding through classical object oriented programming patterns we are familiar with sharing properties and methods through class inheritance in this section we learned how ib has enabled us to share metadata in a similar predictable way through metadata enable class inheritance that was all for this section the next topic we are going to explore is alg compilation ib heralds the era of aot compilation everywhere in angle applications all right next section outputting faster and smaller bundles with aot compilation angular ib is first and foremost an internal rewrite of the angular compiler the angular runtime and a few more pieces of the framework a lot of effort was put into maintaining backward compatibility with application code written for the view engine the generation of the angular framework that is version four through eight and even up to recently vue engine was still supported i think is 12 or 11 or one of those is the late the last i think 12 is the last major version of angular to support view engine in 13 it's not available anymore the only exception there is you can still use view engine compat libraries by using the angular compatibility compiler that will be the case for a few major versions but we should start migrating our libraries to a partial iv compilation and then but i will break compatibility with earlier versions of angular using view engine so it's a trade-off and we have to make sure to explain it well in the documentation of our angular libraries okay at the heart of this new generation is the iv instruction set which is a runtime dom instruction set similar to the incremental dom library also by google in a nutshell an angular component is compiled into two lists of instructions that when executed by ib will initialize the dom with the first list of instructions and update the dom with the second list of instructions whenever changes are detected the iv instruction set is lighter than the view engine equivalent which the runtime had to translate before applying it in view engine it used to be the case that a large angle application would eventually have a smaller jit compiled bundle than the aot compile bundle for the same application with ib this is no longer the case for small angle applications ib adds the benefit that the iv instruction set and the individual parts of the runtime r3 shakeup this means that we are not paying for the parts of the framework runtime that we are not using in that they are removed from the output bundle for example angular's animation and globalization apis are not part of our application bundle unless we are using them this is very important in microfront ends and web components where we need to minimize the overhead of the angular framework angular version 11 is the final major version supporting view engine okay so that answers my question unless this is not a final final version of my book because i did double check facts like this version specific thing so let me check in the book for the definitive answer so it should be on page 42. right yes okay it says the same thing so angular version 11 is the final major version supporting view engine i don't feel 100 sure of that i thought that version 13 which was recently released was the first one to entirely remove view engine but i think i double checked it when finalizing this book so the book says 11 but uh yeah i'm not i'm i'm not 100 sure i'm not 100 sure okay there are more details like this so angular version 11 is the final major version supporting view engine the ib instruction set is kept as a code generation api meaning that our code should not rely on it so the actual iv instructions angular libraries supporting angular versions 9 to 11 are not recommended to ship iv compile code instead the angular compatibility compiler is used to transpile the view engine compiled libraries to ivy unfortunately this means that our initial build time increases as the angular compatibility compiler must compile each angular library entry point in our node module folder this is especially hard to manage in managed build pipelines read about the angular compatibility compiler in chapter 10 called using the angular compatibility compiler so yeah there's an entire chapter chapter explaining the angular compatibility compiler all its parameters and how to optimize it for local development for ci cd pipelines and for mono repos as well so that's chapter 10 of the book as of angular version 12 it is recommended for angular libraries to ship partially iv compiled bundles using the iv compiler this means that our application can more fully enjoy incremental builds that speed up the overall build time this is because of an iv concept known as the principle of locality the ivy compiler only needs to know about the public api of for example child components rather than having to know about their injected dependencies and mention them in the compiled output of the parent component in general iv results in decreased build time except for the time it takes to run the angular compatibility compiler on angular libraries including the angular frameworks packages themselves yeah you heard right the add angular packages are compiled with view engine which means they have to go through ngcc which means things are very slow especially the angular material packages so maybe that has changed in version 13 i'm not sure but that would be great as we discussed using the iv compiler also results in decreased bundle sizes overall however if we are using most parts of the framework runtime our main chunks bundle size might increase while the size of lazy loaded chunks decreases with the introduction of angular iv we can now use aot compilation during all phases of development this removes subtle but important differences between development testing the build process and the production run time the short explanation in this section is just enough to give us an overall idea about the effect that aot compilation has on ankle applications however this book is a practical a pro practical approach to developing angle iv applications in everyday development we do not have to be familiar with the internals of the angular compiler the rendering engine and the runtime but you can read more about the impact and limitations of angular's aot compiler in chapter 12 called embracing ahead of time compilation yes there is an entire section as we discussed and as recommended by oscar just about the aot compiler and its limitations there are not many uh anymore but i remember when it was introduced in angular 4. there were a lot of limitations and so it was not easy to migrate but only few are left now most of them are not limitations anymore or you can add strict template compilation strict template type checking and strict typescript compilation to [Music] detect things that are limited in aot compilation and fix it okay in the following section the next one we look at the compilation presets and configurations introduced by ivy and it's accompanying typescript versions because you might know that each major and even each minor version of angular supports one two maybe three types of or versions of typescript let's look at that i happen to maintain an angular compatibility matrix i will add that to the comments zoom in please there we go so here's the gist and this is a compatibility matrix between angular cli angular node.js typescript and rxjs versions that i've maintained for a few years it's based on changelogs hands-on experience and metadata note that major notejs and rxjs versions above officially supported versions are not listed and important notice minor typescript versions also contain breaking changes i think i've only seen one new version of typescript that didn't contain breaking changes so typescript doesn't use semantic versioning it uses marketing driven versioning so whenever they feel like oh it's probably time for a new major version they will release a major version a minor version contains breaking changes and that is why any version might any minor version of angular will support just one or two or three versions of typescript but it's also interesting that supporting a new minor version of typescript is not a breaking change although there are breaking changes in between two three and two four of typescript so angular doesn't really have full semantic versioning as well and they don't have any migrations to switch between versions of typescript either so that's something you should be very aware of you might see a compilation error when upgrading to a new feature version a minor version of angular and it could be because of breaking changes in in a new version of typescript supported by that version of angular luckily every version of typescript comes with a blog post an announcement that discusses these breaking changes so something to be aware of let's look at the the recent versions down here so angle of 13 which was recently released this is the angular cli version 13.0 and the angle version 13.0 it supports three major versions of node.js 1220 or later minor version 1450 or later minor version and 16 2010 or later minor version of node.js and this is typescript it only supports typescript 4.4 which is the latest one but it also supports rxjs version 6.5 or 6.6 or even 7.4 or later minor version and this is actually i think is this now the default version of rxjs when generating a new workspace it might be yeah but of course there are breaking changes between rxgs6 and 7 and there are no automated migrations so but there's a long long uh list of the breaking changes on the rxjs website so a guide to my greeting manually kind of or at least what to be aware of okay enough of that enough of that okay taking advantage of strict mode and other new configurations is the title of this section angular has always been big on tooling iv adds and enables additional configurations that help us catch errors early and output smaller bundles such as strict mode when we create an angular workspace using the engine new command the strict parameter flag is on by default as of angular version 12. uh i don't remember exactly when it became available maybe in version 10 of angular or something like that but it was not the default option until angular version 12. when we use the strict workspace preset it enables additional static analysis the strict parameter flag is also supported for project generation schematics such as ng generate application and ng-generated library the strict preset sets the following typescript compiler options to true force consistent casing in file names no implicit returns no fall through cases in switch and strict the strict option is a preset that involves many other strict settings but also any future strict compiler setting for typescript so setting that to true will keep the best static type check experience for our application these options help us catch a lot of potential errors at compile time refer to the typescript documentation for details about the individual compiler options a strict typescript compiler option is a shorthand for enabling all the following compiler options as of typescript version 4.2 always strict no implicit any no implicit this strict bind call apply strict function type strict null checks strict property initialization and additionally future strict typescript compiler options will be enabled automatically when using the strict shorthand funnel budgets are reduced in strict mode the initial bundle warns at 500 kilobytes and errors and one megabyte while component style is worn at two kilobytes and air at four kilobytes strict mode further enables strict template type checking which will cover later in this chapter now for angular compiler options added in iv only a few angular compiler options defaults have changed in ib in angular version 9 the default value of the enable iv option was set to true for applications but fault for libraries this changed in angular version 12 where the enable iv option was removed entirely when view engine support was disabled for angle applications and the partial value for the compilation mode was added for partial iv compilation of angular libraries the strict templates option is introduced with iv its default value is false but it is set to true when generating an angular workspace by using the engine new command which enables the strict parameter flag the same applies to the full template type check option which is implicitly set by the strict templates option so setting strict templates to true also enables all the rules that were previously available in view engine that were known as the full template type checking the default value of the strict injection parameters and strict input access modifiers options is still false but it is set to true when generating an angular workspace by using the engine new command now that you are aware of the many helpful configuration options introduced by angle iv you can gain more confidence about how your angle applications will behave in production runtime next up is a favorite topic of ours testing that's me and jacob both ivy and its related type of versions introduce substantial improvements to the angular testing experience and yeah i think i i wrote an article about this at some point angular 9 testing something what was it called ah ours yeah here it is next level testing in angle version nine i'll write it in the comments as well here it is so this was an article i published it january 27 2020. because it's about all the new additions to the very first version of angle iv version 9. all the new additions to testing and improvements so aot compilation tests finally faster builds for tests uh faster tests stronger typing and a new concept called component harnesses and all of this is covered in the book in even more detail so enhancing our angular testing experience iv is a major milestone for angular tests besides the stronger typing and tests discussed in chapter 1 discovering new apis and language syntax it adds major speed improvements and useful test utilities one of which is component testing harnesses which we will cover in chapter 4 exploring angular component features sorry angular components features angular components is one of the angular teams that developed the angle material angle cdk and the angular google product packages such as google maps for angular and the youtube player for angela that are also covered in chapter four in this section we explore how we can introduce values of unexpected types using a typescript annotation which improved which proves to be useful in tests after that we discuss another important aspect of aot compilation in angle iv expect error compiler annotation typescript version 3.9 introduces a special compiler instruction comment that is useful in tests the add ts dash expect this error annotation comment allows values of incompatible types to be passed to functions in the following statement as an example let's write an add function and verify that it rejects strings even at runtime for robustness so here we have a function add has the first parameter called left which is a number and then right parameter which is also a number and it returns a number it calls assert is number on the left parameter answer this number on the right parameter and then finally it returns left plus right the robust add function in the previous code snippet applies an assertion function for both operands the left and right operands let's test that an error is thrown if strings are passed as follows so now comes the test suite describe add it rejects a string as left operand first we assign a constant called text input we have the string value of 2 then we assign a constant value variable 4 with the number literal 4. now we add this fts expect error annotation so that we can pass a string parameter as the left operand of our app add function so now we expect that calling add with the text input and the four variables passed to flow and the next case here is it rejects a string as the right operand that's the second test case so we have the constant variable three with the number literal value of three then we have constant text input which has the string value of five and now we're going to use the add ts expect error annotation to allow for compilation errors um to expect that calling ad with the three and text input values passed will throw an exception if we remove the add ts expect error comments the typescript compiler froze errors because of the incompatible values we pass in the tests in the previous code block how is this different from the add ts ignore comments well the add ts expect dash error comments warn us if a compilation error is not thrown in the statement that follows this raises our confidence in the code next section here faster tests with aot compilation angle iv introduces aot compilation to tests this makes the test environment close to the production environment which is a good trade as it allows us to catch errors early until ivy angular had a long-standing issue of relatively slow tests when they involve component tests using testbed the tests were slow because the test runner was reading parsing and compiling one or more files for every component per test case not per test suite not per test run ivy introduces the principle of locality as well as cache for compiled declarables and angular modules which speeds up component tests significantly additionally rebuilds of rebuilds are faster which improves speed when writing test and fixing bugs with these pieces of valuable information you know you now know how iv can greatly impact your developer workflow when implementing unit tests or component tests especially as mentioned in the introduction of this section we have saved one of the most exciting features for chapter 4 exploring angular components features mainly component testing harnesses but for this next section of this chapter it's all about how iv boosts our productivity by improving the angular developer experience moving on leveling up our developer experience iv improves the developer experience in many ways in this section we learn about the most noteworthy of them improved compilation errors compile time errors are a positive side effect of angle using an aot compiler however some of the build errors have needed additional context to aid in pinpointing the source of the error as an example look at the error message in the following listing that is output when using an unknown element in an angle application that uses view engine so it reads error an app header is not a known element one if app header is an angular component then verify that it is part of this module two if app header is a web component then add custom element schema to the ng module schemas of this component to suppress this message error app header my contact which component has the error how do we fix it the next listing shows the error message that is output for the same mistake in an angular application using ivy error in source app app component html column one line one error ng 8001 app header is not a known element okay so let's put this to the test now we have an error code ng 801 or 0001 let's search for that on the angular docs ng 8001 unknown html element or component so there's not a video for this one yet but there's a description one or more elements cannot be resolved during compilation because the element is not defined by the html spec or there's no component of directive which such iman selector this is the compiler equivalent of a common runtime error ng0304 tag name is not a known element debugging the error use the element name in the error to find the files where the element is being used check that the name and selector are correct if the component is from a different module or import check that the component is exported from its origin module and import it into the correct mod modules now this is ah i really want to submit a pull request to fix this typo should say star.module.ts file but anyways uh do that at a later time or you can do it just go ahead and press this button and you will open a pull request to this repo yeah okay and declared in the import list when using custom elements of web components ensure that you add custom element schema to the application module if this does not resolve the error check the imported libraries for any recent changes to the exports and properties you are using and restart your server okay so a lot of things to to try out to try to fix this error but additionally look at this error message here one if app header is an angular component then verify that it is part of this module two if airplayer is a web component then add custom element schema to the ng module schemas of this component to suppress this message and then some additional context here we saw already in the first line that the error is in this file source app app component html um line one column one but here we see exactly where the issue is it's in line one of this this file up here and it's highlighted with this tilde it will show up as an inline tool tip if we have the angular ib language service installed and using for example vs code and it'll be highlighted here but also if we compile it we'll get this this will error message then it goes to see how is this file this template file imported well it's important in this file the source app app component.ts in line 5 column 16 we see that template url is pointing to app component html which is this file so it's sort of a stack trace of this is where the error occurred and this is the component model importing this template and then finally uh it's also under lining or highlighting uh this this path here to show exactly where the importer the the the binding of the template and the component bottle happens and then the final description here is error occurs in the template of the component app component so we have many different pieces of knowledge to go and see where the error is happening say if we ran the ng build and we just got this error message now we can see oh it's in the app component html which is important by the app component the sorry the app component ts and which is called the app component class so many good pieces of information very good compared to the view engine equivalent where there's an app header somewhere and we don't know which component it's supposed to use all right the file path of the component model and the component template files are both listed as well as the line number and the content of those lines it is now much clearer where the problem was encountered a big win for developer productivity let's look at another example if we accidentally add a duplicate comma to the imports array of an angular module as seen in the following code block a build error will be output so we have a bunch of import statements then we have an ng module it declares an app component it imports the browser module and then the common module but look at that in between them there's two commas with nothing in between and then we have the empty providers array the bootstrap array with the app component bootstrap and this is the app module class so this is the error here how on earth would we discover that let's look at the error message in view engine first i think view engine outputs an error message similar to the one shown in the following listing error in source app app module ts 1127 era during template compiler that module expression form not supported source app module ts 1127 era during template compile event module expression form not supported cannot determine the module for class app component in c project sandbox angular cli 8 app source app app component ts add app component to the engine module to fix it so that's all the information we get good five saskar okay you're liking my robot voice for this compilation error okay so we get the relevant files and line numbers but the error description expression form not about it is not very helpful here's the equivalent error message output by ivy error and projects second app source app app module ts line 11 column three error ts 2322 the type type of common module type of browser module or undefined array is not assignable to type any array type any or module with providers array the type type of current module or type of browser module or undefined is not assignable to type any array type any or module with providers the type undefined is not designable to type any array type any or module with providers now that doesn't mean much but now look at the error message here so line 11 imports this is the one having the error and it doesn't point out exactly this uh this section right here where we have two comments but at least the pointers to imports is the uh the metadata having the error then hopefully we can go in and figure out that this is where the error is so in the previous listing we immediately see that there's an issue in the imports array and that somehow an undefined value ended up in it contact is provided so the source code is output and the error description is improved i mean it's not perfect but it does state that there's an undefined value somewhere here um it's also [Music] yeah i don't know here mentioned here so there are some hints here and then most importantly is telling us that the errors in the imports metadata all right finally let's look at the improved description of an error triggered by a piece of code that is not statically analyzable as follows so we import the component decorator we create a constant variable called template and we assign the value of location.href so this is the url at runtime now we declare this app component and the template will be location href crazy right the template option in the previous example is not statically determinable because it relies on information only available at run time so here's the error message output by view engine error in node template specified for component app component in the previous listing we see that the view engine error message is for metadata that is not statically determinable it tells us which component has an error but it does not help us understanding how to fix it the type information shows that location.href is a type string so why does appcomponent not have a template option according to the compiler the error message output by ivy is a lot more helpful as seen in the following listing see uh here it is error in source app app component cs line eight column three error ng 1010 so another error that we can look up in the angle documentation i won't do it for this one but it says template must be a string and then value could not be determined statically and then line 8 template this is in the app component uh also in line three column eighteen we see explicitly that line three here uh this is the issue location. href is underlined unable to evaluate this expression statically because location is defined by the the dom lib type script definition and then it says a value for location cannot be termed determined statically as it is an external declaration means that this is a runtime value we cannot access this value at compile time and we have to be able to determine the template at compile time not in runtime when we're using aot okay so then there's an error here with the app component not listed in ng module but it's because there's compilation errors in the app component so the error message output by ivy doesn't just show us the line and expression that are not static determinable statically determinable it goes one step further and shows us that the entire location object is non-deterministic at compile time so very very helpful for this very strange error you can all read more about the aot limitations in the chapter recommended by oscar chapter 12 embracing ahead of time compilation you can go back to the beginning of this video where we i read out the and discussed the different sections of that chapter chapter 12. a sip of water then we'll continue the next section is strict template type checking and this is another topic that is covered by that talk i i mentioned earlier the confidence in templates and styles with angular iv so just listing it here again in the in the gap so here you'll you'll find it's a talk that goes more in depth with style binding precedence that we discussed earlier read in this chapter too and strict template type checking so there's recordings here two different recordings for this talk i hope that they're both good so yeah anyways now for the content of the book on this topic strict template type checking so view engine had basic and full modes for template type checking but ivy introduces strict template type checking in addition to the full mode template type jack strict mode enables several checks outlined as follows property binding types are checked against their corresponding input property type property binding type checks are strict about null and undefined values generic types for components and directives are inferred and checked checks the type of template context variables including dollar implicit checks the type of the dollar event template reference checks the type of template references to dom elements save navigation operations are type checked array and object literals in component templates are type checked attribute bindings are type checked all of these checks were not possible in view engine or template compiler they are only available as part of iv versions of angular with iv enable of course so from yeah was this introduced in ib 9 or 10 i'm not sure anyways you have to add these you have to add strict templates set it to true and a few other options um i i go into the detail about all of them in that talk if nothing else go look at the slides they're meant to be a quick reference to the different settings and then they're discussed more in depth in the actual presentation okay the strict check of null for property bindings is important for property bindings using async pipe as it initially emits a null value this means that input properties being used with async pipe must either have a type that includes null or use the concepts known as template guards and input sitter type-ins next section and by the way those are explained a bit more in the talk as well okay next section is an even better update experience as part of ivd angular cli adds three improvements to the update experience when running the ng update command the angular cli first downloads the latest stable version of the angular cli and uses it that that latest version for the update to take advantage of the most recent improvements as part of the ng update command automated migrations are run by the angular cli for every migration and message is shown such as the example shown in the following listing executing migrations of package angular core static flag migration removes the static flag from dynamic queries as of angular 9 the static flag defaults to false and is no longer required for your view and content queries read more about this here https v9 angle i o slash guides less migration dynamic flag migration completed this migration by the way is discussed a lot in detail in one of the the later chapters in the book of the ones about migrating to ivy because even though it's an automated migration this one is very special because it changed all the way in version eight nine and ten and behavior has changed a lot so it's important to understand what's going on there when migrating from even from seven to eight to nine to ten and so on so finally the dash dash create commits parameter flag is introduced in ivy to create a git commit per migration to make it easier to debug the update process we will cover the angle update process in more detail in chapter 11 migrating your angular application from view engine to ib that chapter is not only useful when migrating from und into ivy it's also a guide that lays out the entire process of maintaining angle updates and and some of the its angular's own dependencies and how to deal with those and it goes into detail about both the automated migrations what they're doing and code examples and also manual migrations that are recommended but not required yet but you should do them to be future proof and also some optional automated migrations so optional they will not be applied without you opting into them but they're mentioned there in that chapter as well all right a section another section of chapter two this is the one with the screenshots better ide integration iv introduces remarkable improvements to the angular language service which integrates with our ide such as vs code template and style urls are verified inline as seen as the in the following screenshot where an error is displayed this is especially helpful when renaming components so here there's a tool tip there's an error underlined in the template url the template url value is app component htm so the tool tip when hovering over this highlighted error line with an error it says url does not point to a valid file ng so this is a an error from the angular compiler or the angular language service with the um calls the compiler with this with the strict template type checks and other things like this one all right that was figure 2 1 invalid template url error this was not possible in view engine so good luck finding this error at least now it makes it very easy another neat improvement is that we can use the go to definition id command to navigate to component template or style sheet file this makes it easier to work with one specific component for example i can highlight the template url or style url defined in the component model and press i press f12 in vs code and then i i go to that template or style file iv versions of the angular language service gives us an additional context and tooltips for component models the following screenshot shows a tooltip for a child component element in a component template in the tool tip we can see the angular module that declared the child component in the example we see the child component the class is declared by app module so that that's figure 2 2 ng module annotation in the component element tool tab so this is in the component template i'm hovering over a component element the app child one and then i see this is a component child component is the class name and it's declared by the app module that's very interesting okay similarly the tooltip that appears for a component model also shows the angular module that declared this component as seen in the next screenshot here we see that app component is declared by app module figure 2 3 ng module annotation in the component model toolset so hovering over app component the model class here we see that it's a component app component is declared by app module this is how this reads so with iv we can see method signatures in a tooltip as seen in the following screenshot this helps us reason about event handlers so that is the description of figure 2 4 component method signature in the tooltip so we're in a templar we hover over this add method or event listener and it says it's a method on the heroes component class called add it accepts a name parameter which has to be a string and it returns a void so undefined that's hovering over an event listener of the component in its template very helpful and we can also go to that method by right-clicking it and selecting go to or something like that or pressing f12 in vs code for example iv's angular language servers enables us to see type annotations of ui properties and the dollar implicit template reference this allows us to get type information about an iterable ui property used with the ng4 directive as seen in the following screenshot so there i'm this is figure 2 5 iterable ui property tooltip so i'm hovering over the hero which is defined by let hero of heroes and we see that hero is a variable that contains a hero type this was not possible in view engine either because it was not possible to get the type the type of the ng4 uh iterables but that's not now possible with strict template type checking okay the next screenshot shows how ibm ib enables us to get type information about the named iterator template reference in each loop cycle so similarly if we hover over the heroes mention in the sec line 14 we see that it's a property of the component model so heroes component dot heroes and the type is a hero array so that was figure 2426 named iterator template reference tooltip combined with strict template type checking as described earlier in this chapter this allows us to catch type errors and components early and consistently improved angular language service released with iv adds syntax highlighting to the inline component templates and styles as seen in the following screenshot this makes single file components easier to use so this is an inline template and inline styles we can see syntax highlighting this was not possible with view engine it's only possible with the angular language service and iv versions of angular so this makes it easier to use single file components that i tend to prefer myself so thank you for that but one issue is certain extensions won't work such as auto completion and the html and the css so that's a trade-off but i really hate renaming components because you have to rename so many different files so really prefer single file components even including a scam in the same file as well so a single component angular module which can then be migrated later at some point hopefully to standalone components all right that was figure 27 syntax highlighting for inline component templates and styles and it says that inline templates even benefit from the ability to add syntax highlighting to template expressions also introduced with ivy yeah so that was not syntax highlighting was maybe auto completion as well probably just syntax highlighting was not possible in the template expressions even in the external template files before in view engine finally ib adds support for style preprocessors such as sas and inline styles by introducing the inline style language option to the angular and angular dev kit build angular browser and the at angular dev kit build angular karma builders for example inline style language scss now for the summary so we're at the final part of this chapter now we'll recap what we have learned in this chapter we learned how angle iv boosts our developer productivity through even better tooling and predictable apis we started out by learning the many ways of binding styles to elements using angle iv through a comprehensive example we saw how the order of style bindings does not matter however we learned that the type of style binding matters as it follows a precedence or priority defined by angle iv this makes the resolution of multiple style bindings predictable which is important for implementing certain complex use cases finally we discussed that this change was necessary because ivy does not guarantee the order in which directives and data bindings are applied iv requires directive and component decorators on base classes that rely on angular features such as input and output properties or gel queries we learned how this results in a pattern that makes it easy to share metadata through inheritance in a predictable way to learn how ib's aot compiler is faster and for certain angular projects produces smaller bundles we discussed how a lot of the internals were re-written between view engine and ib we learned how the iv instruction set is a good fit for tree shaking to remove the parts of the frameworks that are unused by our applications with this chapter completed you now know how angular strict mode preset and other configurations allow us to catch errors sooner resulting in a more robust codebase we discussed how angular iv significantly improves the testing experience as it introduces major speed improvements and useful test utilities we saw examples of how typescript allows us to expect a type error in tests to create apis that are more robust at runtime we discussed how aot compilation is enabled in test to reduce the gap between tests and runtime this can significantly improve developer feedback when implementing tests and application code not only did ib improve our testing experience but it is also a productivity booster when it comes to the overall developer experience this chapter compared compiler error messages from view engine to the same type of error messages in ib to demonstrate the additional context they include we discussed how strict template type checking finalizes type checking in component templates finalizing meaning now we can see the types of every part of the component template we briefly discussed how iv improves the update experience through messages that are output during automated migrations and now we can use the dash dash create dash commits parameter flag to split the automated migrations into individual git commits we ended by discussing most of the improvements in angular's id integration such as new invalid template and style url errors tool tips displaying and declaring angular modules and syntax highlighting for inline component templates and styles chapter 3 introducing css custom properties and new provider scopes and chapter four exploring angular components features are going to prepare you for the iv features you're going to need to implement features on an existing angular application in part two build a real world application with the with the angle iv features you learned we will discuss topics such as css custom properties the clipboard api component testing harnesses and the platform provider scope all in the context of angular yeah i think that was it it was and that's all i'm allowed to show you of the book chapter 2 because it's also uh it's also available on the let's go back to the root of this github repo for the book and if we click the image here we'll go to the product page on packpop and we'll see that chapter 2 is actually available here so you can read this whole thing yourself on packpop.com of course the book is available also on all the different local amazons and many other online bookstores and you can buy it as you saw here you can buy the book has a paper bag so it has this thin paper cover i wish it was a hard cover but that's not the case and it looks like so on the spine and the back looks like so um yeah 200 pages three parts 12 chapters 12 feature apps one real world app and that's what we're going to look at as the final part of this um walkthrough of chapter two we can look at the apps the feature apps that are part here part of this the repo here so there's one feature app for inheritance which we did discussed is this was inheritance of the metadata so going into search here we see that we have this base search component so it has this private class member and event emitter string it has an input property placeholder with the default value of search dot dot dot output property search that pipes through this private search event emitter but d bounces uh 150 milliseconds and distinct until change and then we have an event handler here on search accepts an input event and it expects this to be an html input element uh this this value is then stored in the query constant but if it's null we do nothing but if it does contain a string we will emit it through the search uh private property which is then output here after debouncing for 150 milliseconds and making sure that it's a distinct value compared to the last one emitted so that's the base search component you're not meant to use this on its own as you might see here no template but we can extend it and oh it also has a few styles here but it's just saying that apply display block to the host element because it's a custom element all right so we also have the search box component it extends this base search component and it uses the base search styles it adds an input element to its template of type search and it binds to in the placeholder property of this input element to the placeholder property which is part of the base search component here if you remember there it has this placeholder input property so we can bind to that in our template in this child component search box component so no implementation other than the metadata here in the component decorator but it's inheriting these event handlers and input properties and also the output property all right then we have another component extending the base search component class that's the suggested search component so it also has this input element but it has a list so the id is search suggestion so you can go down here and find it this data list it doesn't render anything until you start entering something in this input field then it would be a native autocompletion which has these suggestions here that we have rendered using angular so we we're looping through all the suggestions which is an input property introduced by this class so just the search component but it also inherits the input and output properties and event handler defined in the base search component so that's it you can you can spin up the app yeah we could do that i have it open here so i'll use nx console i'll say so i'll find chapter 2 inheritance i can press run here and it should open it up alright here it is tuesday i don't know what this one is this is probably i should check out the app component man it's been a while since i did this here it is app component okay so it has the app search box so that doesn't do anything of course it's just rendered hello nothing happening but then we have the app suggested search so it's has a placeholder of day of event and then the suggestions are days a week and as we might expect oh get lok hail a locale day names based on the locale id and uh yeah this is something i haven't used much but this is an api that has also been expanded in ivy i'm not sure these ones are new but yeah interesting you can format here indicate get the localized day names and but this app might be set to english i guess yeah so yeah the days of the week formatted using this form style.format and translation with wide so let's see the result of that we have the weekdays here so if i say t it will suggest this might be a bit small to you but it's suggesting tuesday thursday saturday because they all have teas in them i'll click saturday and i can also no it's not like it's only a drop down of of these suggested options i don't know what if i have nothing can i get the suggestions yeah i can get all of them here and okay sunday as the first day of the week interesting so i wonder what if i change it to say french oh locale id oh english is the default i guess i would have to add a locale um to use another look and i don't want to set that up but this is actually something also discussed in a chapter of the book probably chapter one even all right i guess we can also look at rather than having the github repo open we can just look at it here so let's check out the other chapter 2 app that's the style bindings one we have an app component and this was the example with all these different style bindings and using the host binding component with some star bindings using the host binding directive with some style bindings and then there are template style bindings here as well so that was an example very similar to that stack blitz example you saw earlier in this video so i can spin it up let's do that chapter 2 style bindings there we go yeah so now it's pink right if i change the order it's still pink order doesn't matter the precedence matters or the priority of the binding based on the type of the binding so if i remember if i remove the nv style which is like the exclamation mark important of css but for angular style bindings if i remove that it will become what red if i remove this property stamp property binding it will become orange if i remove this template map binding will become yellow if i remove this static template star binding it will become what that will depend on which has the highest precedence uh component host bindings or directive host bindings and the answer is directive host binding so we'll have to look here to see what color it will have so it will be either blue or purple but the property binding is more important than the static style binding so my guess is blue let me save this one first and blue it is and changing the order here doesn't change the value the evaluated style value either so but removing the blue now we're left with the purple static style host binding of a directive removing that let's and now it's some sort of gray so let's go to the app host binding component and look at its host style bindings so it has a component host property binding of gray removing that we're left with green which is the static hostile binding of the component and removing that there are no style bindings left so no background color now all right let me roll back all these changes and now it's pink again very good that was it from me for today a two-hour session walking through chapter two of accelerating angular development with ivy a practical guide to building faster and more testable angular apps with the new iv engine by large skier frank nilsson and jacob andrezen from denmark went forward by santosh yadav google developer expert for angular published by pact publishing and uh yeah there's like a description of what i learned here uh yeah i shared chapter two because that's already available on the packed website so i figured that would be okay um so yeah that was an exciting uh chapter um chapter one what was that nothing that's uh let me have a look in the table of contents but that's about new angular and typescript features important ones major ones in my opinion so there's uh the chapter one is called discovering new apis and language syntax it has modernizing your code with powerful language features so those are typescript features and recent versions the optional chaining operator the knowledge coalescing operator the handling knowledge values with the new operators combined and the native private class members that we saw and the second section of the first chapter is optimizing regional support with improved globalization apis for example bundling localizations lazy loading locale data dynamically setting the dear attribute based on locale direction and art direction using directionality query this is a really interesting example i spent way too much at this first chapter writing this example and it uses interx component story if you go to the repo and see the full example so yeah that's a direct bi-directional directionality aware media directive for figures yeah and it supports all the different locales that angular has and loads them lazily through a picker locale picker and then it changes for example from left to right or right to left based on the selected locale and then you can have different images for different directionalities so that's art direction direction aware another section in chapter one is enhancing tests with stronger types and new apis that's resolving strongly type dependencies with testbed and jack and stopping custom angular material svg icons with the fake fake matte icon registry so that was all the headlines of chapter one and now we saw chapter two the entire thing chapter three is introducing css custom properties and new provider scopes so first section there is uh using the css custom properties with angular that's something that was accidentally enabled or added support for because of the style binding precedence changes in iv so a second section is discovering the any and platform provider scopes they have subsections one for the any provider scope one for the platform provider scopes these are some very interesting topics uh actually major features capabilities of the angular frameworks related to dependency injection but adds new capabilities to dependency injection they are pretty interesting and barely mentioned in the documentation and where they are they focus on the kind of the hierarchy created of injectors but doesn't focus on so what can you use this for but this is covered with some examples in this book and you can see next examples in the the repo as well on qatar and chapter four is the final one of the first part of this book that's exploring angular components features so all the new features introduced in iv by the angular components team so it's covering the angular youtube player the angular google maps components the clipboard api and testing as a user with component harnesses and so these four chapter first chapters prepares us for part two where we start with this real world application called angular academy which is a learning app and then you add new features by using the new framework and language capabilities that we learned in this first part the first four chapters for example chapter four sorry chapter five is all about using css custom properties in a real world app so it's building a theme picker using css custom properties and controlling css grid templates using css custom properties chapter 6 is using angular components so there's an there's like a description of some of the structure of the angle academy application and then we add the features to show course videos using the angular youtube player and then finally finding your school using the angular google maps components chapter seven is called component harnesses so there's a section where we use angular materials component harnesses there's a section where we are creating a component harness for our own component chapter eight is called additional provider scopes so this is the last one of the part two chapters where we're working with this angle academy real world application so the sections here are revisiting the root provider scope so it's just a brief recap of how does the provided and root short provider scope shorthand work and then comes using the any provider scope for configurable theme service and then next section is sharing information across application boundaries using the platform provider scope yeah that was part two which is the hands-on part of the book that part one prepared you for by using more simpler and less extensive examples uh usually for all the new things and then now working in one app throughout four chapters and part two of this book the final is part is part three chapter nine is debugging with the new ib runtime api so that is uh all the there's about 10 new functions replacing ng probe they're all mentioned and some of them most of them are explained a bit and the next section is inspecting a component instance then inspecting event listeners dominant listeners and custom component event bindings then finally inspecting an embedded view context so these are all things you could do with the new angle iv debugging api at runtime in development mode so that was an entire chapter chapter 9 and then chapter 10 is all about the angular compatibility compiler so you'll learn and there's the introduction to the angular compatibility compiler there's so what is it and what's the angular linker that's going to replace it next section is using the angular compatibility compiler so we get all the angular compatibility compiler options that are relevant and then we learn to improve the angular compatibility compiler for our ci cd workflow and finally targeting a single application in a monorepo workspace so there's recipes for optimizing for local development there's recipes for optimizing for specific versions of angular there's recipes for improving in the ci cd workflow optimizing for that even for a single application in a monorepo workspace so an entire chapter about ngcc because some of us are going to be stuck with that for a while chapter 11 is called migrating your angle application from view engine to iv first up is learning the angle update process there we look at the angle update guide and managing angular dependencies next section is performing automated angular iv migrations with a subsection of making the most of the ng update command and then reviewing the automated angle iv migrations then final section in this 11th chapter is performing manual angle iv migration so there's managing initial navigation optimizing change detection by configuring the ng zone improving unit test type safety with testbed injects that was chapter 11. and the final one is the one we mentioned a few times in this session chapter 12 called embracing ahead of time compilation so first section using the ahead of time compiler for all development phases for builds component templates unit test and runtime next section is dealing with the ahead of time compiler's limitations providing values using functions declaring metadata using functions using tag template literals and component templates initializing metadata variables and then final section of the book is initializing asynchronous dependencies so we can provide an asynchronous dependency with a static platform provider and resolving an asynchronous dependency with an application initializer yeah that was what you'll learn about accelerating angle development with ivy today i hope you enjoyed this book reading and as a special note i have one more thing here we go discount code for buying the book there's a 25 discount um active until 23rd of november so 10 days from today when you wake up and the discount code is nob 2021 so november 2021 you can get a 25 discount by purchasing the books through packpop.com you can get the digital copy you can get the print copy with the 25 discount so go ahead if you like what you saw go purchase the book feel free to send me feedback and questions i'm very happy to receive feedbacks and also be happy if you leave a review on your local amazon site tweet about the book and i have a collection of all the different people sending images of the book and i very much enjoy it so thank you very much for for that that was angle after dark for today a long one a good one i hope you you learned something about uh improving your developer experience in angular ivy and yeah this is uh yeah just a book to kind of level up your skills on configuration and tooling and iv and new features both of typescript and angular itself angular material angular cdk component harnesses the product components [Music] strict template type checking style binding precedence component and metadata inheritance css custom properties binding any provider scopes platform provider scopes testing improvements yeah those are some of the features you can read a lot about in this book and then the final part is about aot compilation angular compatibility compiler the debugging api maintaining an angle application migrating to iv manual migrations to future proofing your angle iv application and some recommended automated migrations and manual migrations so just a ton of hopefully value for money in this 200 page book so that's it for today you have a nice time and send me comments about the book bye you

Channel: Lars Gyrup Brink Nielsen

Views: 117

Keywords:

Id: sJgFx_wDyXY

Length: 143min 23sec (8603 seconds)

Published: Fri Nov 12 2021