Technical presentation given by Laurent Duveau at the DevTeach Conference in Montreal on July 05th, 2017.

1. DEBUGGING AN ANGULAR APP Laurent Duveau
July 5th, 2017

2. WHO AM I ?
Laurent Duveau
I live in Montreal, Canada
Founder of the Angular Academy
2-day Angular Classroom Training
68 classes in the last 18 months
Montreal, Boston, Quebec, Toronto,
Vancouver, Ottawa, Calgary, London,
Copenhagen…
@LaurentDuveau
2
September!

3. AGENDA
3
Use TypeScript!
Tip: Json pipe
Angular Language Service
Debug your code!
Augury
Master the Console
Debug RxJS

4. “Debugging is twice as hard
as writing the code in the
first place. Therefore, if you
write the code as cleverly as
possible, you are, by
definition, not smart enough
to debug it.”
- Brian Kernighan

5. When everything fails…

6. Demonstration

7. Use TypeScript!

8. TYPESCRIPT…
Is not really something brand new to learn
It is just typed JavaScript (fully compatible with Js ecosystem)
Is used to generate your Js
Easily learnable for Java or C# developers
Latest ES (classes, modules,…) + types, interfaces,
generics, enums, async/await, …

9. ERRORS AT COMPILE-TIME!
var a = 54
a.trim()
TypeError: undefined
is not a function
var a: string = 54
a.trim()
Cannot convert
‘number’ to ‘string’
JavaScript TypeScript
runtime… compile-time!

10. “TypeScript? It’s like
coding JavaScript but
without the pain”
- Someone on Hacker News

11. Demonstration

12. Json pipe

13. USE THE JSON PIPE!
component.template.html
<li [title]="product">
{{ product.name }}
</li>

14. USE THE JSON PIPE!
component.template.html
<li [title]="product | json">
{{ product.name }}
</li>

15. Demonstration

16. Angular Language Service

17. ANGULAR LANGUAGE SERVICE
Editor extension to get validation and
autocompletion in your html templates.

18. Demonstration

19. Debug your code!

20. DEBUG YOUR CODE!
Just F12 / Sources tab in your browser
Or
Debugger for Chrome extension!

21. tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"allowJs": true
}
}
TSCONFIG.JSON
Map files for live
debugging!

22. Demonstration

23. Augury

24. AUGURY
A Google Chrome Dev Tools extension for debugging
Angular applications.
Install the extension from
Chrome Web Store
24
http://augury.angular.io/

25. Demonstration

26. Master the console

27. CONSOLE
> console.log()
> console.error()
> console.group() / console.groupCollapsed()
> console.groupEnd()
> console.table()

28. Debug RxJS

29. DEBUG RXJS
Use the do operator!
getProductById(id: number): Observable<Product> {
return this
.getProducts()
.flatMap(product => product)
.filter(p => p.id == id)
.catch(this.handleError);
}

30. DEBUG RXJS
Use the do operator!
getProductById(id: number): Observable<Product> {
return this
.getProducts()
.flatMap(product => product)
.filter(p => p.id == id)
.catch(this.handleError);
}

31. DEBUG RXJS
Use the do operator!
getProductById(id: number): Observable<Product> {
return this
.getProducts()
.do(console.log)
.flatMap(product => product)
.do(console.log)
.filter(p => p.id == id)
.catch(this.handleError);
}

32. Demonstration

33. Thank you!

34. Angular Classroom Training

36. submit your evaluation online now to win!
WIN FOR EVALUATION!!