Demo on Angular 7- Error Fixing and Debugging, in Visual Studio Code
Demo on Angular 7- Error Fixing and Debugging, in Visual Studio Code
Hi, this is a demo on Angular 7- Error Fixing and Debugging, in Visual Studio Code
Content
11.44 -> hello everyone welcome to run caller
13.52 -> this tutorial is on angular error
fixing which is nothing but debugging so
20.72 -> first of all i'm going to make an app in angular
so here i'm already having an app called my app 2
33.44 -> and inside this app i'm going to do some
changes uh for example in com components.html
40.64 -> i'm going to write this code i'm going to uh
delete this already written code and i'm going to
51.2 -> write my code here here actually
it's in html there are so many of h
58.64 -> css is present here responsive styles and
we have this html code so router outlet
73.36 -> component.html this is android
component.html and there is uh component.html
83.04 -> so do i have a different component of html
no i'm having only one after component.html
95.12 -> okay so i'm going to delete all this
and i'm going to write here my own
107.04 -> code which which will say div class is
equal to container uh so this is this
117.68 -> is a prerequisite actually actually that
you have to be a little bit aware of uh
125.84 -> of this html html code okay so this
is the div then we have another date
136.08 -> in which it is written class is equal to rho
142.56 -> class is equal to
145.84 -> low so and this is everything after equal
to sign is in quotes class is equal to low
158.72 -> so we are having this is the closing div
and here this is the closing div so there
166.08 -> is no problem in this the class is equal to row
then next i'm having another div which is saying
179.84 -> which is saying class okay the problem here is
that i wrote it after this angle angular bracket
192.72 -> this needs to be written below the
196.16 -> angular angular bracket of the div okay
so the next one is if class is equal to
207.52 -> column xs column access and hyphen 12 so this
defines the column with column width and row width
224.48 -> after this i'm having a heading tool and inside
this head heading to i'm going to write my servers
236.4 -> inside this heading 2 i'm going to write my
servers and below this i'm going to write button
247.36 -> okay button will have a class attribute
which is going to say button button
261.68 -> button button hyphen primary
button button hyphen primary
276.24 -> okay then i'm going to say your click
285.2 -> and so this button is to be clicked okay this
is a button which is to be clicked and this
292.16 -> is the class button button primary and on
the click event the eli which is going to
301.2 -> call for is on add server which is i'm
going to write after this on at server
311.84 -> event it is going to call and uh the text which
this button is going to display is at server
323.52 -> okay so this is done this html is done after
this i'm going to write your break line i'm going
333.44 -> to give you a break break break okay then i'm
going to write a i'm going to write a list here
347.6 -> i'm going to write your unordered list another
list class the class of this list is list group
356.24 -> this you have to learn from the css styles
bootstrapping actually list group then
367.92 -> inside this i'm going to write a list which
will be having i'm going to write a list
378.08 -> which will be having a class
is equal to list group item
387.68 -> uh this actually you need to remember and
you need to learn and you remember it by
393.12 -> doing it again and again so you just have
to mark it up nothing else this group item
402.88 -> and
405.6 -> after this uh after this quotes there will be
this asterisk there will be this asterisk ng4
415.76 -> ng4 is the syntax for angular for the
for loop it is going to say let server of
426.4 -> servers it is going to say let server of servers
then semicolon and it is going to say let i
439.04 -> is equal to index and this double quote
is closed here and after this level codes
451.6 -> there will be a click event inside parenthesis
456.08 -> there will be a click event and it is going to
say it is going to call or remove server event so
464.08 -> this is the event binder okay and the coding for
this on remove server i am going to write just now
473.44 -> i this is all remove server function is on i which
is the index and after this angular bracket this
483.52 -> is going to actually do the data binding and
it is going to actually show the server list
492.24 -> so i'm going to write here server and this list is
done here this list is closed here why this is red
501.36 -> the li element represents the list item if
its parent item is not an overl or menu item
507.76 -> then the element is an item of the parent limit is
defined for those elements otherwise the list has
513.44 -> not defined on a list or related
relationship or any okay this is
519.84 -> no concern we can simply
move on the next one is um
528.72 -> this ul is closed okay we open that ul and
that url is closed here now the ul is closed
538.88 -> unidentified list sorry unordered list it's
not an identified list it's unordered list
548.32 -> uh so that list is closed and this these
divs the container div and the road if they
558.96 -> are going to be closed here this is the container
this is the road and this one is the closing for
570.96 -> container if great i'm going
to save it by control s
580.32 -> and now i'm going to do some changes
in ps file which is component.ts
588 -> so here i'm having a component.ts file and
here i'm going to do some of the changes like
595.92 -> this is this is the normal syntax angular core the
selector app group is normal in this app component
604.16 -> html and f component css these selectors are
normal um export class app component title
611.68 -> is my apple this is this is correct after
the title so whatever coding i have to do is
618.48 -> i have to do after the title inside this app
component class so here i'm simply going to write
625.84 -> servers i'm simply going to write servers and then
i'm going to write this function on add server
637.36 -> on ad server and here i'm going
to write this dot servers dot push
649.28 -> this dot servers dot push add another server
inside double quotes oh sorry another server added
659.52 -> i have to write another server
added so this is the message
667.52 -> which is going to display on this on our
server event okay so this is the event binder
676.56 -> and after this there is one more event which
is on remote server so on this on remove
684.96 -> on remove server event there will be
a id parameter which is of number type
696 -> okay this is the data annotation for this is
number and inside this and i'm going to write
702.96 -> const position const position
is equal to id plus one
718.56 -> this dot servers dot
724.48 -> this dot server store splice because i'm
removing right so i'm i'm splicing it
734 -> from position uh from from position to the first
index so this is the syntax for that the first
744.64 -> server i'm going to splice and i'm going to
remove it from there and id i'm getting from
751.44 -> the parameter okay great this is done and
i'm going to save this rest of the things
758.96 -> i'm not going to do any change ps has changed
or html is changed app.module.ts is saying
766.88 -> okay this i have to remove this because i removed
the server tool actually so i have to remove this
775.12 -> and the server to component also have to remove
because now there is no server to component
783.84 -> if it had been present then this was not an error
and let me see if there is another problem no
792.16 -> i'm going to save it and now if i run
this my app to ng server if i do ng server
801.6 -> so ctrl s and if i write it here ng serve and
if i run this it is going to take few minutes
812.32 -> so this is now compiled successfully
and if i go to the browser
823.76 -> then it is having my app2 and as the heading
as i gave in html and my servers and here it
832.48 -> is having add server button and inside design i
gave the click event of ad servers if i run this
845.92 -> so this i want i want to show that when i clicked
on this ad server it is giving me error in
857.36 -> in the chrome developer tool uh inside console
we have to click inside console we get developer
865.44 -> tools in chrome chrome uh from which we can do the
typescript in javascript and angular debugging so
875.44 -> uh this error is saying that uh cannot need
to properly push off and define an ad good
881.12 -> component or ts line 13 that means
we have to close this and this error
887.52 -> we have to check inside in our application in
our ts file component.ts line 16 component.ts
898.96 -> i'm going to check
902.4 -> here there's an error here that it is not able to
read the push so for this i will do the correction
913.92 -> and what will be that correction is after this
servers i'm going to say is equal to is equal to
926.64 -> angular brackets that means i'm initializing
this servers only then it is going to
935.52 -> give me the correct button click event
otherwise not able to read push means
942.56 -> it is basically saying that there is no
initialize initialization on that server array
947.68 -> so it is not able to read push means
there is some error regarding the array
951.92 -> so i just initialize the array and now see i have
saved it and now see what happens when i run this
962 -> i'm going to do any serve and i'm
going to give port which is 4 2 1 0
976 -> so now i'm going to go this again
go to the side and i'm going to see
991.76 -> or simply copy this form here and open chrome
998.88 -> and just
1003.04 -> and just paste it here
1010.48 -> now when i go and i open this developer tools and
then go inside console and i click on add server
1018.64 -> another server added so the function is working
now and there is no error as shown previously is
1027.28 -> there right now so i can add another server i can
add another server this way it is going to work
1037.84 -> and this is nothing but uh all remove server is
not a function on this listener it's because i i
1048 -> i clicked this another ad server and this is
not the listener for that it was just simply
1054.16 -> saying that so this is not an error add server
add server so i can add any amount of server
1060.16 -> so this was basically for showing uh about error
checking error correction at runtime you can
1065.76 -> simply open uh the developer tools by f12 and you
can go to consumer and you can check the errors
1071.12 -> is coming and then you can go to that particular
file which is giving the error and you can simply
1077.44 -> correct that error from there
in so this is how you debug
1082.56 -> uh typescript and angular but
there is one more very nice way of
1090.08 -> debugging particularly angular
and that is by auxiliary
1097.76 -> i'm sorry by ordinary tools so i'm simply going
to go to augury home and it is there inside the
1110.32 -> chrome play store so i'm simply going to go
inside on the chrome chrome extension aubry
1117.52 -> and i'm going to download this it's going
to take some time so this has come here
1126.16 -> chrome web store only and i'm going to do
add to chrome so this extension see this is
1132 -> of developer tools so this extension
will be added to the developer tools
1138.48 -> and from there i can simply go to augury and order
the ad extension and i can simply uh very easily
1146.72 -> debug all my annual from there let me show
you how to do that so from here you can
1156.08 -> see that we have this uh if we click this arrow
we have this augury inside it and this augury is
1165.36 -> basically it is showing you energy module that is
showing you the router tree showing the component
1171.68 -> trees it is a very good uh very good extension
and debugger for debugging the angular apps
1181.68 -> so till now this is regarding how to debug
thank you very much thank you for watching
Source: https://www.youtube.com/watch?v=QY0rErEIkLc