Debugging an Angular App

2 likes492 views

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.

Technology

DEBUGGING AN ANGULAR APP Laurent Duveau
July 5th, 2017

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!

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

“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

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!

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

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

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

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

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

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!

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

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

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);
}

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);
}

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

The document discusses TypeScript as a powerful superset of JavaScript designed to improve scalability and maintainability in web development. It highlights TypeScript's features such as strong typing, modularity, and tooling support that help developers avoid common pitfalls in JavaScript coding. Additionally, it touches on TypeScript's compatibility with existing libraries and frameworks like Angular, emphasizing its increasing adoption in the programming community.

Introduction to Angular for .NET DevelopersLaurent Duveau

This document serves as an introduction to Angular for .NET developers, highlighting Angular's reliance on TypeScript, a Microsoft technology that simplifies JavaScript coding. It outlines the use of Angular CLI for quick app setup and details its compatibility with modern browsers, as well as integration with various tools like Visual Studio. The content emphasizes the component-based architecture of Angular applications and provides links to resources for further learning and setup.

Introduction to Angular for .NET DevelopersLaurent Duveau

The document presents a talk by Laurent Duveau on Angular and TypeScript, covering a range of topics such as Angular Academy training, TypeScript as a typed superset of JavaScript, and tools like Angular CLI and Visual Studio Code. It highlights the benefits of TypeScript for .NET developers and emphasizes the framework's suitability for single-page applications. The presentation also includes references to Angular components, modules, and resources for setting up Angular with various platforms.

Introduction to Angular for .NET DevelopersLaurent Duveau

This document summarizes a presentation about Angular for .NET developers. It introduces Angular as a JavaScript framework built using TypeScript, discusses Angular tools like the Angular CLI and VS Code editor, and demonstrates core Angular concepts like components, modules, and data binding. The presentation recommends resources for setting up Angular with Visual Studio and deploying Angular/ASP.NET applications to Azure.

TypeScript: Angular's Secret WeaponLaurent Duveau

The document discusses TypeScript as a powerful superset of JavaScript that enhances scalability, modularity, and type safety in web development, making it particularly suitable for developers familiar with Java or C#. It highlights key features such as type annotations, classes, interfaces, and generics, while emphasizing TypeScript's ability to compile to plain JavaScript for compatibility across various environments. Additionally, the document notes TypeScript's integration into Angular and its significant tooling support for improved development efficiency.

TypeScript 101 - Studio Session - Accenture Liquid StudioFrances Coronel

The document provides an introduction to TypeScript, highlighting its benefits for large scale projects and comparing it to JavaScript. It covers topics such as TypeScript's popularity, its advantages, installation, and usage, along with homework assignments and resources. Overall, the document emphasizes TypeScript's role in improving code maintainability and reducing bugs in software development.

Introducing type scriptRemo Jansen

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It allows for large scale JavaScript application development with features like classes, inheritance, modules, generators, async/await, and decorators. TypeScript introduces strong typing, interfaces, generics, and other design-time features not available in JavaScript to reduce complexity in large codebases. It supports the future of JavaScript by allowing the use of ES6 and ES7 features today through compiler options. Getting started is easy using the TypeScript playground or boilerplate projects on GitHub.

TypeScript OverviewAniruddha Chakrabarti

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds static typing and structuring mechanisms like classes, interfaces, and modules to JavaScript to help catch errors and provide better documentation for large scale JavaScript application development. Some key features of TypeScript include optional static types for functions and variables, classes with inheritance and static methods, interfaces, modules, generics, and type inference.

TypeScript PresentationPatrick John Pacaña

Typescript - MentorMate AcademyDimitar Danailov

TypeScript is a statically typed superset of JavaScript that enhances productivity by enabling features like object-oriented programming and support for ES2015. Installation is straightforward using npm, and it includes benefits like type checking and improved code understanding. Various developers praise TypeScript for its tooling support, which simplifies navigation and bug detection in large codebases.

Typescript pptakhilsreyas

Typescript is a typed superset of JavaScript that adds additional features like classes, interfaces, and modules to provide type safety and help manage large applications. It allows for type annotations, classes, interfaces, generics and other features to support object-oriented and modular programming. Typescript code compiles to plain JavaScript and is an open source project maintained by Microsoft.

Getting started with typescriptC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

The document outlines Microsoft TypeScript, a statically typed language that compiles to JavaScript, detailing its installation, features, and best practices. It emphasizes the language's ease of use for large-scale applications, compatibility with existing JavaScript code, and type checking benefits. Additionally, it provides examples of TypeScript syntax, do's and don'ts, and migration steps from JavaScript.

Typescript in 30mins Udaya Kumar

This document introduces TypeScript and provides an overview of its key features. It discusses why TypeScript was created due to issues with JavaScript like dynamic typing and lack of modularity. It also covers TypeScript features like optional static types, interfaces, classes, modules and how it compiles to JavaScript. The presentation concludes by noting TypeScript allows gradual adoption and that application scale JavaScript development is difficult but TypeScript makes it easier.

TypeScript and Angular workshopJosé Manuel García García

The document outlines a workshop on TypeScript and Angular held on March 30, 2017, led by Isabel Matas Rabadán and José Manuel García García. It covers key concepts of TypeScript, including its features and advantages over JavaScript, as well as Angular's structure, components, and services. The workshop also discusses best practices, tools for testing, and provides resources for further learning.

Introduction to TypeScript by Winston LeviWinston Levi

TypeScript is a superset of JavaScript that compiles to JavaScript. It adds optional static typing, classes, and interfaces to JavaScript to help catch errors. TypeScript code is converted to JavaScript at compile time. There are three versions of ECMAScript that TypeScript works with - ES3, ES5, and ES6. TypeScript allows for both static and dynamic typing through features like type declarations and generics.

TypeScript introAts Uiboupin

The document is an introduction to TypeScript, outlining its features and benefits compared to JavaScript. It discusses TypeScript's type system, modularity, and compatibility with existing JavaScript libraries, along with details on installation and usage. The presentation also highlights future developments and the community's adoption of TypeScript, including support from major companies like Microsoft and Google.

TypeScript . the JavaScript developer best friend!Alessandro Giorgetti

The document is a presentation on TypeScript, discussing its features, advantages over JavaScript, and tooling setup for development. It highlights TypeScript as an open-source superset of JavaScript that adds static types and enhances code structuring, making it suitable for larger projects. The presentation also covers advanced concepts like interfaces, classes, and decorators and concludes with future developments in TypeScript.

Typescript for the programmers who like javascriptAndrei Sebastian Cîmpean

TypeScript is an open-source, typed superset of JavaScript that transpiles to plain JavaScript, providing features like classes, modules, and interfaces. It helps with compile-time and runtime error checking, better auto-completion, and integration with third-party libraries through ambient definitions. Getting started with TypeScript is straightforward, with npm installation and transpilation options, although transitioning to TypeScript from JavaScript can present challenges.

AngularConf2015Alessandro Giorgetti

This document discusses the advantages of using TypeScript for developing Angular applications. It begins with an introduction to TypeScript, including how it adds types and classes to JavaScript to improve code structure and tooling. The presenter then demonstrates how to write an Angular todo list application using TypeScript, comparing the syntax for services, controllers, and directives between regular JavaScript and TypeScript implementations. Decorators are also introduced as how Angular 2.0 will annotate classes and properties. Overall, TypeScript is shown to add significant benefits for organizing code and developing Angular applications.

TypeScript: coding JavaScript without the painSander Mak (@Sander_Mak)

This document discusses TypeScript, a superset of JavaScript that adds optional static typing and class-based object-oriented programming. It allows developers to gradually introduce typing into JavaScript code for improved productivity and catch errors early. The document covers TypeScript features like interfaces, classes, modules, type definitions, and comparisons to alternatives like CoffeeScript and Dart. It concludes that TypeScript allows gradual adoption of typing while following the future ECMAScript standard.

Typescript 101 introductionBob German

This document provides an introduction and overview of TypeScript. It discusses why to use TypeScript, including benefits like static type checking, IntelliSense, and class structures familiar to .NET programmers. It also outlines the development environment setup steps for using TypeScript in VS Code or Visual Studio. The agenda includes demos of TypeScript basics, classes, and using external libraries. It recommends resources for learning TypeScript further like the TypeScript playground.

Power Leveling your TypeScriptOffirmo

The document discusses TypeScript, its advantages, and challenges for web developers transitioning from JavaScript. It covers installation, configuration, and usage of TypeScript, including type definitions, interface definitions, and integration with tools like npm and webpack. Additionally, it emphasizes the importance of understanding limitations, using linters, and not substituting testing or code reviews with TypeScript alone.

Typescript overviewThanvilahari

TypeScript is a scripting language developed by Microsoft, designed as a strict superset of JavaScript for large application development, providing optional typing and modular features. It simplifies code readability and debugging, differentiating itself from JavaScript with its need for compilation and support for advanced features like interfaces and generics. Companies such as Microsoft, Adobe, and Slack utilize TypeScript for its safety and modularity, despite some quirks and slower compiler performance.

TypeScript for Java DevelopersYakov Fain

This document introduces TypeScript for Java developers. It provides an overview of TypeScript, why to use it, how to get started, and examples of key TypeScript features like classes, interfaces, generics, decorators, and async/await. The author is an Angular practice lead and Java Champion who has authored books on Angular development with TypeScript. The document demonstrates how to set up a TypeScript environment and compile code, and provides code samples for many TypeScript language features and patterns.

Getting Started with TypeScriptGil Fink

This document summarizes an introduction to the TypeScript language presented by Gil Fink, CEO of sparXys. The presentation covered: 1) Why TypeScript was created as a typed superset of JavaScript that compiles to plain JavaScript. 2) Key TypeScript features like classes, modules, interfaces and static typing that allow for code encapsulation and maintainability. 3) How TypeScript supports standard JavaScript as well as features from future versions like ES2015/6. 4) Resources for learning more about TypeScript including the TypeScript website and GitHub repository.

Introduction about type scriptBinh Quan Duc

This document provides an introduction and overview of TypeScript. It discusses that TypeScript is designed for large scale applications, can be compiled to JavaScript, and was developed by Microsoft. It notes benefits of TypeScript include preventing JavaScript mistakes, supporting modern JavaScript features like ES6, and outputting code in common module formats. Potential cons are needing to write more type definitions and setup the TypeScript compiler. The document concludes with a demo section showing TypeScript features like types, classes, modules, and output options.

Learning typescriptAlexandre Marreiros

The document provides an overview of TypeScript, a superset of JavaScript that adds static typing and other features for large-scale application development. It highlights the benefits of using TypeScript for building robust and maintainable code, alongside its fundamental concepts such as classes, interfaces, and type annotations. Additionally, it discusses tools for TypeScript development and includes examples of syntax and type definitions.

TypeScript 2 in actionAlexander Rusakov

TypeScript 2 provides several new features that improve type safety when using TypeScript with libraries like React and Redux. These include non-nullable types to prevent null/undefined errors, literal types for exact string/number values, discriminated union types for handling different action types in Redux, and mapped/partial types for better React prop and state typing. Overall, TypeScript 2 enhances type checking and brings tighter integration with popular JavaScript frameworks and patterns.

Shit happens… debugging an Angular app.Laurent Duveau

The document provides guidance on debugging Angular applications, emphasizing the importance of TypeScript for error-free coding and effective debugging tools. It discusses various debugging techniques such as using the JSON pipe, Angular language service, Augury browser extension, and debugging RxJS with the tap operator. The recap includes key takeaways for enhancing debugging efficiency in Angular development.

Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau

The document discusses a presentation by Laurent Duveau on Angular and TypeScript, highlighting the benefits of using TypeScript for .NET developers. It covers various aspects of Angular, including its architecture, components, and setup using Visual Studio. The talk emphasizes the combination of JavaScript and TypeScript for building modern web applications, particularly single-page applications.

More Related Content

What's hot (20)

TypeScript PresentationPatrick John Pacaña

Typescript - MentorMate AcademyDimitar Danailov

Typescript pptakhilsreyas

Getting started with typescriptC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

Typescript in 30mins Udaya Kumar

TypeScript and Angular workshopJosé Manuel García García

Introduction to TypeScript by Winston LeviWinston Levi

TypeScript introAts Uiboupin

TypeScript . the JavaScript developer best friend!Alessandro Giorgetti

Typescript for the programmers who like javascriptAndrei Sebastian Cîmpean

AngularConf2015Alessandro Giorgetti

TypeScript: coding JavaScript without the painSander Mak (@Sander_Mak)

Typescript 101 introductionBob German

Power Leveling your TypeScriptOffirmo

Typescript overviewThanvilahari

TypeScript for Java DevelopersYakov Fain

Getting Started with TypeScriptGil Fink

Introduction about type scriptBinh Quan Duc

Learning typescriptAlexandre Marreiros

TypeScript 2 in actionAlexander Rusakov

TypeScript PresentationPatrick John Pacaña

Typescript - MentorMate AcademyDimitar Danailov

Typescript pptakhilsreyas

Getting started with typescriptC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

Typescript in 30mins Udaya Kumar

TypeScript and Angular workshopJosé Manuel García García

Introduction to TypeScript by Winston LeviWinston Levi

TypeScript introAts Uiboupin

TypeScript . the JavaScript developer best friend!Alessandro Giorgetti

Typescript for the programmers who like javascriptAndrei Sebastian Cîmpean

AngularConf2015Alessandro Giorgetti

TypeScript: coding JavaScript without the painSander Mak (@Sander_Mak)

Typescript 101 introductionBob German

Power Leveling your TypeScriptOffirmo

Typescript overviewThanvilahari

TypeScript for Java DevelopersYakov Fain

Getting Started with TypeScriptGil Fink

Introduction about type scriptBinh Quan Duc

Learning typescriptAlexandre Marreiros

TypeScript 2 in actionAlexander Rusakov

Similar to Debugging an Angular App (20)

Shit happens… debugging an Angular app.Laurent Duveau

Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau

Introduction to Angular for .NET DevelopersLaurent Duveau

The document outlines a presentation by Laurent Duveau on Angular and TypeScript, emphasizing their role in modern web application development. It discusses tooling, the TypeScript compiler, and the Angular framework's architecture, including components, modules, and dependency injection. The talk also highlights practical setups for integrating Angular with ASP.NET and deploying applications to Azure.

Angular WeekendTroy Miles

The document outlines a two-day workshop on Angular, taught by Troy Miles, focusing on various aspects of modern web development using Angular, including its CLI, TypeScript, services, and more. It details practical installation steps for necessary tools like npm, Angular CLI, and Firebase, alongside explanations of package management with npm and building applications with Webpack. Additionally, it covers critical JavaScript concepts, coding practices, and key features of Angular, including its structure, modules, decorators, and metadata.

Angular IOJennifer Estrada

Angular 2 for Java DevelopersYakov Fain

This document provides an overview of Angular 2 for Java developers. It discusses that Angular 2 is a complete rewrite of AngularJS with a focus on components, better performance, and streamlined dependency injection. It also covers key aspects of Angular 2 like project structure, templates, data binding, dependency injection, routing, and use of reactive programming with RxJS. Sample code examples are provided to demonstrate concepts like components, services, dependency injection, routing, and use of observables.

Vi INFOTECH angular syllabusViINFOTECH

The document outlines a comprehensive syllabus for learning Angular, covering topics such as AngularJS and various versions of Angular, TypeScript, component-based architecture, and advanced features like dependency injection and observables. It includes practical aspects like project creation using Angular CLI, data handling, forms, and state management with NgRx. Additionally, it highlights Angular Material for UI design and various routing techniques within single-page applications.

4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptxtilejak773

The document details the features and architecture of Angular 8, an open-source JavaScript framework developed by Google for building web applications, particularly single-page applications (SPAs). It covers concepts such as the Model-View-Controller (MVC) architecture, TypeScript, and new features in Angular 8 like lazy loading and differential loading. Additionally, it provides instructions on setting up a new Angular application, creating components, and using Angular CLI for development.

Foster - Getting started with AngularMukundSonaiya1

The document outlines a workshop on Angular, covering fundamental topics such as TypeScript, Angular's structure, and its core components including modules, components, templates, and directives. It details the features and benefits of Angular, including its scalability and extensive documentation, and provides practical examples and commands for setting up applications with Angular. Additionally, it includes a quiz to reinforce understanding of the key concepts presented.

Angular, the New Angular JSKenzan

The document provides an overview of Angular, highlighting its core concepts, differences from AngularJS, and major changes from versions 2 to 6. It covers essential topics such as lifecycle methods, TypeScript, RxJS, and Angular CLI, along with examples and demonstrations of Angular applications. Additionally, it outlines the future developments of Angular, specifically the introduction of the Ivy rendering engine.

Angular 2 On Production (IT Talk in Dnipro)Oleksandr Tryshchenko

This document discusses the author's experience using Angular 2 in production for one year. It covers what they expected from the framework, including high performance, compatibility with old browsers, and a long product lifecycle. It also discusses key Angular 2 concepts like Web Components, TypeScript, bindings, reactive programming with RxJS, debugging tools, and forms. The author concludes by discussing future directions like Angular Universal for server-side rendering and using Angular with other technologies like NativeScript.

Introduction To Angular 4 - J2INader Debbabi

This document provides an introduction and overview of Angular 4 including: - Angular is an open-source JavaScript framework used to build single page web applications. - It discusses TypeScript, single page applications, the development environment setup, and basic application structure in Angular. - The main building blocks of an Angular application are modules, components, directives, and services - which are defined through TypeScript classes and metadata.

Angular interview questionsGoa App

Angular 7 introduces optimizations such as support for TypeScript 2.4 and enhanced RxJS features, along with improvements in Angular's build tools and routing events. Key components of Angular architecture include modules, components, and services, which facilitate dynamic templates and dependency injection. Additionally, the document explains concepts like data binding, lifecycle hooks, view encapsulation, and the benefits of using TypeScript over JavaScript.

Angular Interview Questions-PDF.pdfJohnLeo57

This document contains summaries of 75 frequently asked Angular interview questions. It begins by defining Angular as a JavaScript framework developed by Google for building applications using web technologies like HTML, CSS, and JavaScript. It then goes on to summarize questions about setting up the Angular development environment, Angular CLI, components, data binding, directives, lifecycle hooks, and various methods for sharing data between components.

AngularjsYnon Perek

The document provides an overview and introduction to AngularJS. It discusses key Angular concepts like data binding, directives, filters, controllers and scopes. It also covers using Angular for client-side routing and communicating with servers to retrieve data. Example code snippets are provided to demonstrate concepts like controllers, directives and routing. Labs and exercises are included to apply the concepts by building sample Angular applications.

Myths of Angular 2: What Angular Really IsDevFest DC

This document discusses and debunks several myths about Angular. It explains that Angular supports most modern browsers through polyfills, that there is a migration path from AngularJS, base Angular apps are not necessarily huge in size due to AOT compilation and tree shaking, and Angular provides benefits like speed, cross-platform capabilities, server-side rendering, TypeScript, and strong tooling and community support.

Module 1.pptx Angular JS FRAMEWORK WEBDEVELOPMENTraman76530

Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaEdureka!

The document outlines a training program for AngularJS, focusing on various topics including DOM manipulation, the benefits of Angular, single-page applications, and the building blocks of Angular architecture such as modules, components, and data binding. It emphasizes the use of JavaScript and TypeScript in building efficient, complex web applications. Additionally, it discusses the importance of services and directives within the Angular framework.

Angular Framework ppt for beginners and advancedPreetha Ganapathi

Angular is a JavaScript framework for building interactive web applications across web, desktop, and mobile platforms. It was completely rewritten in TypeScript and began with Angular 2, released on September 14, 2016, followed by several updates up to Angular 9. The document covers installation, setup, key files, and core concepts such as modules, components, data binding, and directives, necessary for developing applications with Angular.

Angular Interview Questions & AnswersRatnala Charan kumar

The document outlines various interview questions and answers related to Angular, covering topics such as its core concepts, differences between AngularJS and Angular, data binding, components, directives, modules, and services. Key aspects discussed include the lifecycle of components, dependency injection, communication methods between components, and the use of Angular CLI for application setup. Examples and explanations illustrate practical implementations of Angular features, aiding in understanding its architecture and functionality.

Shit happens… debugging an Angular app.Laurent Duveau

Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau

Introduction to Angular for .NET DevelopersLaurent Duveau

Angular WeekendTroy Miles

Angular IOJennifer Estrada

Angular 2 for Java DevelopersYakov Fain

Vi INFOTECH angular syllabusViINFOTECH

4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptxtilejak773

Foster - Getting started with AngularMukundSonaiya1

Angular, the New Angular JSKenzan

Angular 2 On Production (IT Talk in Dnipro)Oleksandr Tryshchenko

Introduction To Angular 4 - J2INader Debbabi

Angular interview questionsGoa App

Angular Interview Questions-PDF.pdfJohnLeo57

AngularjsYnon Perek

Myths of Angular 2: What Angular Really IsDevFest DC

Module 1.pptx Angular JS FRAMEWORK WEBDEVELOPMENTraman76530

Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaEdureka!

Angular Framework ppt for beginners and advancedPreetha Ganapathi

Angular Interview Questions & AnswersRatnala Charan kumar

More from Laurent Duveau (20)

8 things you didn't know about the Angular Router, you won't believe #6!Laurent Duveau

This document summarizes 8 things to know about the Angular Router and provides one bonus item. It discusses lazy loading modules, preloading modules, router events, enabling traces for debugging, auxiliary routes, route transitions using animations, route guards, and passing data between routes via the state object. The document provides code examples and indicates the content will be demonstrated. It promotes understanding of advanced Angular Router capabilities.

De 0 à Angular en 1h30! (french)Laurent Duveau

Le document présente un aperçu des formations Angular et de TypeScript, un langage de programmation open source développé par Microsoft pour améliorer le JavaScript. Il décrit les concepts clés d'Angular, tels que les composants, les services et le routage, tout en mentionnant l'utilisation des Progressive Web Apps (PWA) et les mises à jour fréquentes du framework. De plus, il liste diverses entreprises et organisations qui utilisent Angular et fournit des instructions pour commencer à travailler avec Angular CLI.

Angular 6, CLI 6, Material 6 (french)Laurent Duveau

Le document présente les fonctionnalités et améliorations d'Angular 6, notamment le support des Progressive Web Apps (PWA) et l'introduction du moteur de rendu Ivy. Il décrit également la nouvelle syntaxe d'importation de RxJS 6 et donne des instructions pour la mise à jour et la génération d'applications Angular via la CLI. Enfin, il mentionne l'intégration de diverses bibliothèques et frameworks, ainsi que des ressources pour les développeurs.

Angular Advanced RoutingLaurent Duveau

This document provides an overview of advanced Angular routing techniques presented by Laurent Duveau at the Angular Vancouver Meetup. It covers topics such as lazy loading, preloading modules, router events, route guards, and auxiliary routes while also providing code examples. The presentation highlights the importance of enhancing user experience through optimized routing strategies in Angular applications.

Introduction à Angular 2Laurent Duveau

Angular 2... so can I use it now??Laurent Duveau

Angular 2 is now in release candidate and can be used for new projects, though Angular 1 will still be supported for the next 1.5-2 years. There are two main approaches to upgrading an existing Angular 1 app to Angular 2: big bang, where the entire app is rewritten at once in Angular 2, or incremental, where individual components are upgraded one by one. Components and directives are now unified under the component model in Angular 2. TypeScript is recommended for Angular 2 development but not required, as JavaScript can also be used.

ngconf 2016 (french)Laurent Duveau

Microsoft Edge pour les développeurs webLaurent Duveau

Le document traite de la nécessité de prendre en compte la compatibilité des navigateurs, en particulier Internet Explorer et Microsoft Edge, pour les développeurs web. Il évoque la fin du support pour les anciennes versions d'IE, les défis de compatibilité, et présente divers outils et méthodes pour tester les sites web sur ces navigateurs. Des conseils sont donnés sur l'utilisation des outils de développement et sur l'importance de la détection des fonctionnalités pour garantir une expérience utilisateur optimale.

Microsoft Edge pour les développeurs webLaurent Duveau

Le document aborde la fin du support des versions précédentes d'Internet Explorer par Microsoft, en se concentrant sur la nécessité de tester les sites web pour la compatibilité avec IE11 et les nouveaux navigateurs comme Edge. Il souligne l'importance des fonctionnalités modernes des navigateurs et présente des ressources pour les développeurs afin de faciliter le processus de test. En conclusion, il met en avant la migration vers des standards web modernes et la compatibilité entre différents navigateurs.

Introduction to SPAs with AngularJSLaurent Duveau

The document is an agenda for an introduction to single page applications (SPAs) using AngularJS. It begins with defining what an SPA is and then introduces AngularJS as a JavaScript framework for building SPAs. The agenda then covers setting up a first AngularJS project, using modules, controllers, directives, filters, routing, and services. It provides examples for each topic and emphasizes concepts like two-way data binding, dependency injection, and using AngularJS features to interact with REST APIs.

Xamarin.Forms [french]Laurent Duveau

Le document présente une introduction à Xamarin.Forms, qui permet de développer des applications mobiles multiplateformes avec une base de code C# unique. Il couvre les composants clés comme l'interface utilisateur, le partage de code, la gestion de la navigation et la personnalisation via des renderers et des services de dépendance. Des exemples de code et de fonctionnalités spécifiques aux plateformes sont fournis pour démontrer l'utilisation de Xamarin.Forms dans le développement d'applications.

Back from Xamarin Evolve 2014Laurent Duveau

Guy Barrette and Laurent Duveau discussed Xamarin announcements from the 2014 Xamarin Evolve conference, including new tools like Xamarin Insights for crash reporting, the Xamarin Android Player virtual machine, Sketches for interactive coding experiments, and updates to the Xamarin Profiler and Test Cloud. A partnership with IBM was also announced to integrate Xamarin with IBM's mobile technologies.

Windows App StudioLaurent Duveau

The document discusses Windows App Studio, a tool for creating Windows and Windows Phone apps without coding. It provides an overview of the tool's templates, data binding, styles and publishing options. The presentation covers using App Studio to generate source code that can then be opened in Visual Studio. It also mentions the tool's current and potential future platforms and concludes by promoting the Developer Movement program for earning points and rewards.

Windows 8: Live tiles, badges et notifications toasts [french]Laurent Duveau

Le document traite des éléments interactifs de Windows 8 tels que les 'live tiles', badges et notifications 'toast', en fournissant des recommandations de design, des exemples de mise à jour et des méthodes de notification. Il explique également la gestion des notifications à l'aide de Windows Push Notification Service pour maintenir l'application à jour, même lorsqu'elle n'est pas en cours d'exécution. Plusieurs ressources et directives pour les développeurs sont mentionnées pour optimiser l'utilisation de ces fonctionnalités.

L'opportunité Windows 8 pour les développeursLaurent Duveau

Le document présente les opportunités offertes par Windows 8 aux développeurs, mettant en avant une nouvelle interface tactile et un modèle de rémunération avantageux via le Windows Store. Les développeurs peuvent conserver 70% des revenus pour les premiers 25 000 $ de ventes, et 80% au-delà, avec la possibilité de proposer des versions d'essai pour augmenter les téléchargements. Il mentionne également les différents types de comptes développeurs, ainsi que la certification et le déploiement associés à Windows 8.

Building apps for WP8 and Win8Laurent Duveau

The document discusses developing applications for both Windows Phone 8 and Windows 8, focusing on building consistent experiences across different devices and screen sizes. Key strategies include separating UI from application logic using the Model-View-ViewModel (MVVM) pattern, utilizing portable class libraries for code reuse, and employing techniques like conditional blocks and partial classes to manage platform-specific code. The content emphasizes minimizing development effort and enhancing code maintainability through shared libraries and architecture.

Windows Store apps developmentLaurent Duveau

The document is a presentation on Windows Store app development by Laurent Duveau, detailing tools, controls, display modes, and live tiles. It covers aspects such as using Visual Studio 2012 and Expression Blend, various UI elements, handling different display resolutions, and managing notifications. Key highlights include the implementation of search and share contracts alongside updating live tiles through various service channels.

L'opportunité Windows 8: Introduction au Windows StoreLaurent Duveau

Le document présente une introduction au Windows Store et ses opportunités pour les développeurs, soulignant l'importance de l'interface tactile de Windows 8 et l'intégration de nouvelles applications. Il aborde la certification des applications, les modèles de rémunération, et les achats intégrés, tout en mettant en avant les ressources disponibles pour les développeurs. En conclusion, il souligne que le Windows Store représente une opportunité significative pour les développeurs dans le marché actuel.

Introduction au Windows StoreLaurent Duveau

Le document présente une introduction au Windows Store, abordant des aspects tels que les opportunités pour les développeurs, les modèles de rémunération, et les méthodes de déploiement. Il couvre également les types d'applications, les achats intégrés, et fournit des conseils pour optimiser les ventes. Enfin, il mentionne les ressources disponibles pour les développeurs souhaitant tirer parti du Windows Store.

Windows 8 [french]Laurent Duveau

Le document présente une formation sur Windows 8, abordant des sujets tels que les différents types de Windows 8, les stratégies de mise à niveau, les licences et les spécifications techniques minimales des appareils. Il détaille également les différents dispositifs compatibles avec Windows 8, y compris les tablettes et ordinateurs portables, ainsi que les informations sur les prix de mise à niveau et les éditions disponibles. Enfin, il inclut des informations sur les applications et l'interface de Windows 8, en mettant l'accent sur le design 'Metro'.

8 things you didn't know about the Angular Router, you won't believe #6!Laurent Duveau

De 0 à Angular en 1h30! (french)Laurent Duveau

Angular 6, CLI 6, Material 6 (french)Laurent Duveau

Angular Advanced RoutingLaurent Duveau

Introduction à Angular 2Laurent Duveau

Angular 2... so can I use it now??Laurent Duveau

ngconf 2016 (french)Laurent Duveau

Microsoft Edge pour les développeurs webLaurent Duveau

Introduction to SPAs with AngularJSLaurent Duveau

Xamarin.Forms [french]Laurent Duveau

Back from Xamarin Evolve 2014Laurent Duveau

Windows App StudioLaurent Duveau

Windows 8: Live tiles, badges et notifications toasts [french]Laurent Duveau

L'opportunité Windows 8 pour les développeursLaurent Duveau

Building apps for WP8 and Win8Laurent Duveau

Windows Store apps developmentLaurent Duveau

L'opportunité Windows 8: Introduction au Windows StoreLaurent Duveau

Introduction au Windows StoreLaurent Duveau

Windows 8 [french]Laurent Duveau

Recently uploaded (20)

UserCon Belgium: Honey, VMware increased my billstijn40

VMware’s pricing changes have forced organizations to rethink their datacenter cost management strategies. While FinOps is commonly associated with cloud environments, the FinOps Foundation has recently expanded its framework to include Scopes—and Datacenter is now officially part of the equation. In this session, we’ll map the FinOps Framework to a VMware-based datacenter, focusing on cost visibility, optimization, and automation. You’ll learn how to track costs more effectively, rightsize workloads, optimize licensing, and drive efficiency—all without migrating to the cloud. We’ll also explore how to align IT teams, finance, and leadership around cost-aware decision-making for on-prem environments. If your VMware bill keeps increasing and you need a new approach to cost management, this session is for you!

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

Managing airport and airspace data is no small task, especially when you’re expected to deliver it in AIXM format without spending a fortune on specialized tools. But what if there was a smarter, more affordable way? Join us for a behind-the-scenes look at how Sweco partnered with Swedavia, the Swedish airport operator, to solve this challenge using FME and Esri. Learn how they built automated workflows to manage periodic updates, merge airspace data, and support data extracts – all while meeting strict government reporting requirements to the Civil Aviation Administration of Sweden. Even better? Swedavia built custom services and applications that use the FME Flow REST API to trigger jobs and retrieve results – streamlining tasks like securing the quality of new surveyor data, creating permdelta and baseline representations in the AIS schema, and generating AIXM extracts from their AIS data. To conclude, FME expert Dean Hintz will walk through a GeoBorders reading workflow and highlight recent enhancements to FME’s AIXM (Aeronautical Information Exchange Model) processing and interpretation capabilities. Discover how airports like Swedavia are harnessing the power of FME to simplify aviation data management, and how you can too.

From Manual to Auto Searching- FME in the Driver's SeatSafe Software

Finding a specific car online can be a time-consuming task, especially when checking multiple dealer websites. A few years ago, I faced this exact problem while searching for a particular vehicle in New Zealand. The local classified platform, Trade Me (similar to eBay), wasn’t yielding any results, so I expanded my search to second-hand dealer sites—only to realise that periodically checking each one was going to be tedious. That’s when I noticed something interesting: many of these websites used the same platform to manage their inventories. Recognising this, I reverse-engineered the platform’s structure and built an FME workspace that automated the search process for me. By integrating API calls and setting up periodic checks, I received real-time email alerts when matching cars were listed. In this presentation, I’ll walk through how I used FME to save hours of manual searching by creating a custom car-finding automation system. While FME can’t buy a car for you—yet—it can certainly help you find the one you’re after!

WebdriverIO & JavaScript: The Perfect Duo for Web Automationdigitaljignect

In today’s dynamic digital landscape, ensuring the quality and dependability of web applications is essential. While Selenium has been a longstanding solution for automating browser tasks, the integration of WebdriverIO (WDIO) with Selenium and JavaScript marks a significant advancement in automation testing. WDIO enhances the testing process by offering a robust interface that improves test creation, execution, and management. This amalgamation capitalizes on the strengths of both tools, leveraging Selenium’s broad browser support and WDIO’s modern, efficient approach to test automation. As automation testing becomes increasingly vital for faster development cycles and superior software releases, WDIO emerges as a versatile framework, particularly potent when paired with JavaScript, making it a preferred choice for contemporary testing teams.

Mastering AI Workflows with FME by Mark DöringSafe Software

Harness the full potential of AI with FME: From creating high-quality training data to optimizing models and utilizing results, FME supports every step of your AI workflow. Seamlessly integrate a wide range of models, including those for data enhancement, forecasting, image and object recognition, and large language models. Customize AI models to meet your exact needs with FME’s powerful tools for training, optimization, and seamless integration

Enhance GitHub Copilot using MCP - Enterprise version.pdfNilesh Gule

PyCon SG 25 - Firecracker Made Easy with Python.pdfMuhammad Yuga Nugraha

Explore the ease of managing Firecracker microVM with the firecracker-python. In this session, I will introduce the basics of Firecracker microVM and demonstrate how this custom SDK facilitates microVM operations easily. We will delve into the design and development process behind the SDK, providing a behind-the-scenes look at its creation and features. While traditional Firecracker SDKs were primarily available in Go, this module brings a simplicity of Python to the table.

"Scaling in space and time with Temporal", Andriy Lupa.pdfFwdays

Design patterns like Event Sourcing and Event Streaming have long become standards for building real-time analytics systems. However, when the system load becomes nonlinear with fast and often unpredictable spikes, it's crucial to respond quickly in order not to lose real-time operating itself. In this talk, I’ll share my experience implementing and using a tool like Temporal.io. We'll explore the evolution of our system for maintaining real-time report generation and discuss how we use Temporal both for short-lived pipelines and long-running background tasks.

2025_06_18 - OpenMetadata Community Meeting.pdfOpenMetadata

The community meetup was held Wednesday June 18, 2025 @ 9:00 AM PST. Catch the next OpenMetadata Community Meetup @ https://www.meetup.com/openmetadata-meetup-group/ In this month's OpenMetadata Community Meetup, "Enforcing Quality & SLAs with OpenMetadata Data Contracts," we covered data contracts, why they matter, and how to implement them in OpenMetadata to increase the quality of your data assets! Agenda Highlights: 👋 Introducing Data Contracts: An agreement between data producers and consumers 📝 Data Contracts key components: Understanding a contract and its purpose 🧑‍🎨 Writing your first contract: How to create your own contracts in OpenMetadata 🦾 An OpenMetadata MCP Server update! ➕ And More!

The Future of Product Management in AI ERA.pdfAlyona Owens

Hi, I’m Aly Owens, I have a special pleasure to stand here as over a decade ago I graduated from CityU as an international student with an MBA program. I enjoyed the diversity of the school, ability to work and study, the network that came with being here, and of course the price tag for students here has always been more affordable than most around. Since then I have worked for major corporations like T-Mobile and Microsoft and many more, and I have founded a startup. I've also been teaching product management to ensure my students save time and money to get to the same level as me faster avoiding popular mistakes. Today as I’ve transitioned to teaching and focusing on the startup, I hear everybody being concerned about Ai stealing their jobs… We’ll talk about it shortly. But before that, I want to take you back to 1997. One of my favorite movies is “Fifth Element”. It wowed me with futuristic predictions when I was a kid and I’m impressed by the number of these predictions that have already come true. Self-driving cars, video calls and smart TV, personalized ads and identity scanning. Sci-fi movies and books gave us many ideas and some are being implemented as we speak. But we often get ahead of ourselves: Flying cars,Colonized planets, Human-like AI: not yet, Time travel, Mind-machine neural interfaces for everyone: Only in experimental stages (e.g. Neuralink). Cyberpunk dystopias: Some vibes (neon signs + inequality + surveillance), but not total dystopia (thankfully). On the bright side, we predict that the working hours should drop as Ai becomes our helper and there shouldn’t be a need to work 8 hours/day. Nobody knows for sure but we can require that from legislation. Instead of waiting to see what the government and billionaires come up with, I say we should design our own future. So, we as humans, when we don’t know something - fear takes over. The same thing happened during the industrial revolution. In the Industrial Era, machines didn’t steal jobs—they transformed them but people were scared about their jobs. The AI era is making similar changes except it feels like robots will take the center stage instead of a human. First off, even when it comes to the hottest space in the military - drones, Ai does a fraction of work. AI algorithms enable real-time decision-making, obstacle avoidance, and mission optimization making drones far more autonomous and capable than traditional remote-controlled aircraft. Key technologies include computer vision for object detection, GPS-enhanced navigation, and neural networks for learning and adaptation. But guess what? There are only 2 companies right now that utilize Ai in drones to make autonomous decisions - Skydio and DJI.

“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/mpu-a-transformative-solution-for-next-gen-ai-at-the-edge-a-presentation-from-fotonation/ Petronel Bigioi, CEO of FotoNation, presents the “MPU+: A Transformative Solution for Next-Gen AI at the Edge” tutorial at the May 2025 Embedded Vision Summit. In this talk, Bigioi introduces MPU+, a novel programmable, customizable low-power platform for real-time, localized intelligence at the edge. The platform includes an AI-augmented image signal processor that enables leading image and video quality. In addition, it integrates ultra-low-power object and motion detection capabilities to enable always-on computer vision. A programmable neural processor provides flexibility to efficiently implement new neural networks. And additional specialized engines facilitate image stabilization and audio enhancements.

Securing Account Lifecycles in the Age of Deepfakes.pptxFIDO Alliance

Python Conference Singapore - 19 Jun 2025ninefyi

"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...Fwdays

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

Let's talk about our history. How we started the project with a small vector database of less than 2 million records. Later, we received a request for +100 million records, then another +100... And so gradually we reached almost 1 billion. Standard tools were quickly running out of steam - we were running into performance, index size, and very limited resources. After a long series of trials and errors, we built our own low-cost cluster, which today stably processes thousands of queries to more than 1B vectors.

AI VIDEO MAGAZINE - June 2025 - r/aivideo1pcity Studios, Inc

OpenPOWER Foundation & Open-Source Core InnovationsIBM

penPOWER offers a fully open, royalty-free CPU architecture for custom chip design. It enables both lightweight FPGA cores (like Microwatt) and high-performance processors (like POWER10). Developers have full access to source code, specs, and tools for end-to-end chip creation. It supports AI, HPC, cloud, and embedded workloads with proven performance. Backed by a global community, it fosters innovation, education, and collaboration.

Salesforce Summer '25 Release Frenchgathering.pptx.pdfyosra Saidani

Coordinated Disclosure for ML - What's Different and What's the Same.pdfPriyanka Aash

Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash

UserCon Belgium: Honey, VMware increased my billstijn40

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

From Manual to Auto Searching- FME in the Driver's SeatSafe Software

WebdriverIO & JavaScript: The Perfect Duo for Web Automationdigitaljignect

Mastering AI Workflows with FME by Mark DöringSafe Software

Enhance GitHub Copilot using MCP - Enterprise version.pdfNilesh Gule

PyCon SG 25 - Firecracker Made Easy with Python.pdfMuhammad Yuga Nugraha

"Scaling in space and time with Temporal", Andriy Lupa.pdfFwdays

2025_06_18 - OpenMetadata Community Meeting.pdfOpenMetadata

The Future of Product Management in AI ERA.pdfAlyona Owens

“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...Edge AI and Vision Alliance

Securing Account Lifecycles in the Age of Deepfakes.pptxFIDO Alliance

Python Conference Singapore - 19 Jun 2025ninefyi

"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...Fwdays

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

AI VIDEO MAGAZINE - June 2025 - r/aivideo1pcity Studios, Inc

OpenPOWER Foundation & Open-Source Core InnovationsIBM

Salesforce Summer '25 Release Frenchgathering.pptx.pdfyosra Saidani

Coordinated Disclosure for ML - What's Different and What's the Same.pdfPriyanka Aash

Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash

Debugging an Angular App

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!!

Debugging an Angular App

Recommended

More Related Content

What's hot (20)

Similar to Debugging an Angular App (20)

More from Laurent Duveau (20)

Recently uploaded (20)

Debugging an Angular App