Debugging AOT apps throws "Cannot read property 'get' of null"

[benelliott]

For all AOT apps I've tried, the Augury debugger (v1.2.1) throws the following error in the console:

backend.js:34621 Uncaught TypeError: Cannot read property 'get' of null

The line of code within Augury that throws this error is:

var ngZone = root.injector.get(ng.coreTokens.NgZone);

It seems like the extension is failing to resolve the root injector on AOT apps.

Ideally the extension should support the debugging of AOT apps but, if not, this error should be replaced with a more readable log message.

[clbond]

It looks like we are going to have great difficulty debugging AoT applications in Augury. This is because the values we get back from ng.probe do not contain any of the debug information that we use inside of Augury.

However, I am not sure there really is a need to support AoT applications in Augury. After all, AoT is a performance optimization and I'm not sure what the use-case is for enabling it on debug builds -- especially if it is going to make debugging difficult. What do you think?

Here is what we get back from ng.probe, as you can see it's essentially blank:

ng.probe($('app-root'))

DebugElement {_debugInfo: null, nativeNode: app-root, parent: null, listeners: Array[0], properties: Object}, _debugInfo: null, attributes: Object, childNodes: Array[2], children: (...), classes: Object, componentInstance: null, context: null, injector: null, listeners: Array[0], nativeElement: app-root, nativeNode: app-root, parent: null, properties: Object, providerTokens: (...), references: (...), source: (...), styles: Object, __proto__: DebugNode}

The main properties we need are componentInstance and injector. Those both appear to be null for all components in an application with AoT enabled. Therefore there's not really going to be any utility that Augury can provide.

[benelliott]

I think what you've said makes sense - AOT shouldn't really be used for debug builds and you can't expect all the normal tools to work with an AOT app when most of the Angular internals have been stripped out of it.

However I do think that Augury should handle this a bit more elegantly than it does right now, perhaps just by catching this use case and emitting a console warning about not supporting AOT builds. Especially when the error message is so cryptic at the moment :)

[alexeagle]

I would like to use AoT for all development, for example so that the extra restrictions on ng2 apps to be AoT-compatible are enforced earlier.
@tbosch is there some reason we cannot emit all the same debug symbols in the ngfactory files to make it work?

[tbosch]

We already do. Just make sure the "debug" flag is set. Augury might just
not know how to read our down leveled decorators...
On Mon, Oct 17, 2016 at 4:05 PM Alex Eagle notifications@github.com wrote:

I would like to use AoT for all development, for example so that the extra
restrictions on ng2 apps to be AoT-compatible are enforced earlier.
@tbosch https://github.com/tbosch is there some reason we cannot emit
all the same debug symbols in the ngfactory files to make it work?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#733 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAqKf0PwfcEau4QQrB3zN6YA55EojZO1ks5q0_9QgaJpZM4KWxfL
.

[clbond]

@alexeagle @tbosch Indeed ng.probe works and returns data inside of a debug-mode build with AoT. (Whereas in production builds, ng.probe is undefined -- as expected). But with AoT enabled, the data inside the DebugElement structure is essentially empty. componentInstance is null even for the root component (which must have a class instance associated with it, right?) injector is null. Is this the expected behaviour?

[clbond]

Until we are able to come to a better resolution of this issue (i.e. we find a way to get all the DebugElement info we are already getting for non-AoT apps), this PR produces a friendly error when someone tries to debug an app with AoT enabled: #741

[tbosch]

Ah, sorry, to be a bit more clear, the user has to do the following:

1. use AOT with debug = true
2. NOT call enableProdMode() in their application

In the future, we want to remove the flag enableProdMode and just derive
it from how the application was compiled.

On Tue, Oct 18, 2016 at 6:50 AM Christopher Bond notifications@github.com
wrote:

Until we are able to come to a better resolution of this issue (i.e. we
find a way to get all the DebugElement info we are already getting for
non-AoT apps), this PR produces a friendly error when someone tries to
debug an app with AoT enabled: #741
#741

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#733 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAqKf9kDh58xB7PQbztjippaCWc-7TEJks5q1M6pgaJpZM4KWxfL
.

[clbond]

Hey Tobias. Maybe I am doing something egregiously stupid, but this is not my experience. I created a new app with "ng new" and then ran with "ng serve --aot=true --debug=true".

In my Console it says: lang.js:255 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

Then if I try to get the DebugElement for the root component using ng.probe($('app-root')), I get this object back:

DebugElement {_debugInfo: null, nativeNode: app-root, parent: null, listeners: Array[0], properties: Object…}
_debugInfo: null
attributes: Object
childNodes: Array[2]
children: (...)
classes: Object
componentInstance: null
context: null
injector: null
listeners: Array[0]
nativeElement: app-root
nativeNode: app-root
parent: null
properties: Object
providerTokens: (...)
references: (...)
source: (...)
styles: Object
__proto__: DebugNode

On this object, both injector and componentInstance are null.

[stevenkampen]

@tbosch When you say "use AOT with debug = true", how is that debug flag set, and has it changed in recent versions? Using 1.0.0-beta.17, --debug is not a recognized option for ng serve (as reported in a warning in the output).

[alexeagle]

It's an option for angularCompilerOptions in the tsconfig.json:

https://github.com/angular/angular/blob/master/tools/@angular/tsc-wrapped/src/options.ts#L27

On Wed, Oct 19, 2016 at 9:06 AM Steven Kampen notifications@github.com
wrote:

@tbosch https://github.com/tbosch When you say "use AOT with debug =
true", how is that debug flag set, and has it changed in recent versions?
Using 1.0.0-beta.17, --debug is not a recognized option for ng serve (as
reported in a warning in the output).

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#733 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAC5I1-4w02R-TcIlzLSG_nAqZPL_QGnks5q1j_9gaJpZM4KWxfL
.

[stevenkampen]

@alexeagle Thanks! That was our misunderstanding, and the issue looks to be resolved.

Edit: It's working for me with an entry in tsconfig.json like:

  "angularCompilerOptions": {
    "genDir": "aot",
    "debug": true
  }

[clbond]

Alright, I think I understand now. Even if the application is running in debug mode and prints "Angular 2 is running in development mode" to the console, it's not actually in debug mode until you add "angularCompilerOptions": {"debug": true} to your tsconfig.json. Also angularCompilerOptions/debug had no effect on my machine whatsoever because I was using beta.16. When I upgraded to beta.17, all of a sudden the debug info started appearing. Sorry for the confusion!

[igor-ka]

@tbosch should the message about the debug mode still appear on the console even if the flag for the debug mode is not set in tsconfig.json? is it a bug or am I missing something?

[tbosch]

These 2 flags are sadly independent right now. In the future, we want to
remove enableProdMode, but right now they can be out of sync.

On Wed, Oct 19, 2016 at 11:10 AM Igor Kamenetsky notifications@github.com
wrote:

@tbosch https://github.com/tbosch should the message about the debug
mode still appear on the console even if the flag for the debug mode is not
set in tsconfig.json? is it a bug or am I missing something?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#733 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAqKf8kJ-ocC1oJmBrl6Zwjh2wrxn5Laks5q1l0hgaJpZM4KWxfL
.

[alexeagle]

Note that one is "development mode" and one is "debug mode". The latter is
for AoT, the former is for runtime (AoT or JIT) so they are really
different things.

On Wed, Oct 19, 2016 at 1:36 PM Tobias Bosch notifications@github.com
wrote:

These 2 flags are sadly independent right now. In the future, we want to
remove enableProdMode, but right now they can be out of sync.

On Wed, Oct 19, 2016 at 11:10 AM Igor Kamenetsky <notifications@github.com

wrote:

@tbosch https://github.com/tbosch should the message about the debug
mode still appear on the console even if the flag for the debug mode is
not
set in tsconfig.json? is it a bug or am I missing something?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#733 (comment),
or mute
the thread
<
https://github.com/notifications/unsubscribe-auth/AAqKf8kJ-ocC1oJmBrl6Zwjh2wrxn5Laks5q1l0hgaJpZM4KWxfL

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#733 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAC5I5AHKH45LrjMtFxR2dMppzYGdmhsks5q1n9JgaJpZM4KWxfL
.

[igor-ka]

@alexeagle thanks, this makes perfect sense now. We will add a section about AoT support in our readme and close this issue after.