Sharing Top Content from the Angular-sphere.

Everything you need to know about debugging Angular applications

  • /globals’;In this way, you’ll be able to access required export from a module in the you need to access other modules in a console besides those listed in the file, just add them in the globals.ts.This solution with an additional file works perfectly for both SystemJS and Webpack driven environments.Enabling…
  • I’ve written about views a bit in Exploring Angular DOM manipulation techniques and Everything you need to know about change detection articles.Exploring available debugging information using ng.probeAngular exposes global ng.probe function which takes native DOM element and returns corresponding peer debug element.
  • For example, if you define your component like this:@Component({ template: ` h1 class=”outer” span class=”inner”some/span /h1 `})class MyComponent { name = ‘C’;}component instance will contain an instance of the MyComponent class:let debugNode = // ‘C’If you select elements that belong to the same component view, they will point to the…
  • For example, for the following template:li *ngFor=”let item of items; let i = index” span{{i}}/span/lithe context for the inner span shows the following:This property is useful when debugging structural directives that create its own context like ngFor.Triggering digest cycle manuallyIf you have debugging tools enabled, you can simply may remember that…
  • And since Angular stores ApplicationRef class reference in the coreTokens global variable, here is how we can run change detection manually using ng.probe and child debugging toolsAngular also provides some debugging tools.

“ 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…

Debugging in a browser consoleAccessing modulesDuring debugging you may need to get access to a particular module and its exports in the console. This is easy to do if you’re using module loader like SystemJS. It loads modules using System.import method which returns a promise that is resolved when a module is loaded. So, for example, to access enableDebugTools and disableDebugTools functions from the @angular/platform-browser module you do like { enableDebugTools = module.enableDebugTools; disableDebugTools = option for Angular is Webpack. Since it is a bundle wrapper, not a module loader, it wraps everything inside itself into a bundle and doesn’t provide functionality to access modules outside the bundle similar to a module loader. There are ways to get access to those modules, but most of them require modifying webpack.config.js, which is very likely to result in a bundle error if you’re not familiar with Webpack configuration.A simpler solution is to add another file, for example globals.ts into your project with the following content:import * as core from ‘@angular/core’;import * as common from ‘@angular/common’;import * as compiler from ‘@angular/compiler’;import * as browser from * as browserd from {isDevMode} from “@angular/core”;if (isDevMode()) { window[‘@angular/core’] = core; window[‘@angular/common’] = common; window[‘@angular/compiler’] = compiler; = browser; = browserd;}and include it into the app by simply requiring it from any of your files, usually from main.ts:import ‘./globals’;In this way, you’ll be able to access required export from a module in the you need to access other modules in a console besides those listed in the file,…

Everything you need to know about debugging Angular applications

Comments are closed, but trackbacks and pingbacks are open.