Download as PDF, PPTX
![USE THE JSON PIPE! component.template.html <li [title]="product"> {{ product.name }} </li>](https://image.slidesharecdn.com/angular-debug-170706175834/75/Debugging-an-Angular-App-13-2048.jpg)
![USE THE JSON PIPE! component.template.html <li [title]="product | json"> {{ product.name }} </li>](https://image.slidesharecdn.com/angular-debug-170706175834/75/Debugging-an-Angular-App-14-2048.jpg)
Uploaded byLaurent Duveau
Debugging an Angular App
The document is a presentation by Laurent Duveau on debugging Angular applications, highlighting the use of TypeScript, Angular Language Service, and debugging tools like Augury and browser developer tools. It emphasizes the importance of writing less complex code to ease debugging and provides practical demonstrations and tips for effective debugging in Angular. The session also covers the use of JSON pipe and RxJS debugging techniques with code examples.
Debugging an Angular App
- 1. DEBUGGING AN ANGULARAPP 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: Jsonpipe Angular Language Service Debug your code! Augury Master the Console Debug RxJS
- 4. “Debugging is twiceas 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.
- 6.
- 7.
- 8. TYPESCRIPT… Is not reallysomething 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! vara = 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 codingJavaScript but without the pain” - Someone on Hacker News
- 11.
- 12.
- 13. USE THE JSONPIPE! component.template.html <li [title]="product"> {{ product.name }} </li>
- 14. USE THE JSONPIPE! component.template.html <li [title]="product | json"> {{ product.name }} </li>
- 15.
- 16.
- 17. ANGULAR LANGUAGE SERVICE Editorextension to get validation and autocompletion in your html templates.
- 18.
- 19.
- 20. DEBUG YOUR CODE! JustF12 / 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.
- 23.
- 24. AUGURY A Google ChromeDev Tools extension for debugging Angular applications. Install the extension from Chrome Web Store 24 http://augury.angular.io/
- 25.
- 26.
- 27. CONSOLE > console.log() > console.error() >console.group() / console.groupCollapsed() > console.groupEnd() > console.table()
- 28.
- 29. DEBUG RXJS Use thedo operator! getProductById(id: number): Observable<Product> { return this .getProducts() .flatMap(product => product) .filter(p => p.id == id) .catch(this.handleError); }
- 30. DEBUG RXJS Use thedo operator! getProductById(id: number): Observable<Product> { return this .getProducts() .flatMap(product => product) .filter(p => p.id == id) .catch(this.handleError); }
- 31. DEBUG RXJS Use thedo 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.
- 33.
- 34.
- 36. submit your evaluationonline now to win! WIN FOR EVALUATION!!