Is there a way to call component or service methods in Production mode?
I know an application can be debugged using ng.probe and with the Angular2 debugging app Augury: https://augury.angular.io/
However, these only works when in development mode.
Add a comment
|
4 Answers
Here is how you can access the component object from console in production mode (at least in Angular 9).
First you need to find the HTML element, which corresponds to the Angular component. You can use something like window.getAllAngularRootElements()[0].getElementsByTagName('my-component-tag')[0]. Or you can also first find and select the component in the Inspector tool and then use the special variable $0.
Then, if this element corresponds to some Angular component, then it will have a special __ngContext__ property attached. It contains an array of different component's properties used by Angular. One of the array's items is the component object itself. The index of the item may be different, so you'll need to examine the __ngContext__ array yourself to find it.
I.e., briefly, do something like:
o = window.getAllAngularRootElements()[0].getElementsByTagName('my-component-tag')[0].__ngContext__[42];
(assuming 42 is the correct index in your case) and then use the o variable as needed.
1 Comment
MaciejLisCK
Invoking __ ngContext __ gives me a single number value instead of component state. Angular 15
There's no built-in method, to my knowledge.
This can be handled by custom flag in URL hash
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
const DEV_MODE = 'DEV_MODE';
const DEV_MODE_REGEXP = new RegExp('(?:^|;)' + DEV_MODE + '$');
const IS_DEV_MODE = DEV_MODE_REGEXP.test(window.location.hash);
if (window.ENV !== 'prod' || IS_DEV_MODE) {
if (IS_DEV_MODE) {
window.location.hash = window.location.hash.replace(DEV_MODE_REGEXP, '');
}
} else {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(...);
Or by putting a flag into window.name, like it was done in reloadWithDebugInfo in AngularJS.
Comments
You're part way there already :)
You can access the componentInstance with ng.probe($0).componentInstance
from there you can use public functions and alter variables, you just need to invoke the change detection when you do with the function below
ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges()
I took this from http://juristr.com/blog/2016/02/debugging-angular2-console/ if you want to read more :)
2 Comments
Jess
I just noticed you were trying to do this outside of development mode - Unfortunately, part of enabling prod mode, disables the development tools used above. It has to be done in dev
AntonJ
Exactly! Looking for something similar to allow me to eg. toggle some flags, change logging level in my application from the console
You can reproduce the same in lower env, then debug.
ng.probe($('component_tag-name')).componentInstance.fn()
to use $0, you will need to expand the element first, otherwise console will tell you $0 undefined.
1 Comment
Alex Che
The ng variable is only accessible in development mode. The question is about production mode.