Intro to HMR in Angular
Intro to HMR in Angular
Hi friends! In this video Angular team member Mark Thompson will be taking a look at HMR (hot module replacement) in Angular. Together we’ll go through a quick demo so we can see it in action!
Learn more about the Angular CLI → https://angular.io/cli
Continue the conversation online!
Angular Twitter → https://twitter.com/angular
Mark’s Twitter → https://twitter.com/marktechson
Content
1.7 -> [Music]
7.35 -> [Music]
9.92 -> hi friends
10.639 -> welcome to the ng update the series
12.799 -> where we're taking a look at some of the
14.639 -> features from the latest angular
16.24 -> releases
17.119 -> in this episode we'll be taking a look
19.6 -> at hmr
21.199 -> if you haven't already be sure to run a
23.519 -> crisp ng
24.64 -> update to get access to the latest
26.64 -> features in angular
28.64 -> i have a question for you are you ready
30.64 -> to boost your productivity within your
32.64 -> angular applications
34.079 -> i have the ability to read mine so i
36.079 -> know that the answer
37.2 -> is yes here's some great news for you in
40.32 -> this video
41.28 -> we're going to see how to enable hmr in
43.92 -> your applications
45.12 -> but before we get this party started
47.52 -> let's talk about
48.64 -> how hmr works hmr
51.68 -> stands for hot module replacement now i
55.039 -> know you wanted to call it hot module
56.879 -> reload but no it's actually replacement
59.68 -> hmr sends updates to your application
62.48 -> based on the files you change
64.72 -> so that means faster updates as we'll
67.52 -> see in our demo today
69.04 -> hmr has other benefits like keeping our
72 -> form state
72.799 -> and more alright let's jump in and see
75.759 -> it all in action
77.92 -> okay friends we're in vs co and i've
80 -> built an app
81.04 -> using angular version 11. let's start up
83.68 -> the dev server using the
85.119 -> hmr flag also check out this fresh
88.479 -> output giving me the details of the
90.32 -> build
90.799 -> and startup process feels good
94.479 -> with my development server started let's
96.56 -> refresh our browser
98 -> and now we see our application nice and
100.64 -> crispy
102.24 -> let me enter some data into this form
104.64 -> while it functions
105.84 -> it doesn't have a nice layout let's fix
108 -> that and since our server was started
110.32 -> with hmr enabled
112 -> we should be able to see the changes
113.6 -> every time we save without that full
115.759 -> refresh
117.04 -> first let's set up some colors size the
119.36 -> image and set our css layout
121.759 -> we're going to be using css grid in our
123.84 -> example
124.96 -> next we'll add styling to the article
127.04 -> element and our h1
129.039 -> we'll save again here and see the
130.64 -> updates in real time without refreshing
132.879 -> and just like that things are looking
135.44 -> better
136.319 -> but the form needs some love let's hook
138.48 -> it up we'll change the display property
140.879 -> set some spacing for the form and give
143.04 -> our input some styling too
145.04 -> and here we are a nicely styled ui
148.16 -> with our form data still intact between
150.319 -> updates only updating the parts of the
152.4 -> application
153.28 -> that were updated in the ide this goes
155.76 -> for component changes
156.959 -> style changes and template changes
160 -> alright friends i hope you had as much
162 -> fun as i did
163.12 -> hmr is a great tool to boost your
165.2 -> productivity
166.16 -> and better yet enabling it is quick we
169.2 -> have a lot of plans for some great
170.879 -> content on the angular youtube channel
173.04 -> but we want to hear from you what would
175.36 -> you like to see us cover
176.72 -> in these videos let us know in the
178.48 -> comments down below
180.239 -> go ahead and be awesome and give us a
182.48 -> like and subscribe
183.519 -> if you haven't already until the next
186 -> time
186.8 -> go build great apps
Source: https://www.youtube.com/watch?v=nlEma7rUJAk