CODEWITHSUNDEEP
javascriptangulardebuggingangular-cli
Andon Mitev
Andon Mitev

Reputation: 1514

Error in console: ng.probe is not a function

Yesterday I updated Angular CLI and core to 8.0.0v. After that I successfully initialized a new app and ran it. Once the app was built and served on localhost:4200 I opened the console and there was an error:

ng.probe is not a function

I tried to research the issue, but there was no relevant info about it.

Actual result:

After ng serve / npm start there is an issue in the console:

Uncaught TypeError: ng.probe is not a function. Current console state Current angular state

Expected result:

No error in the console

Upvotes: 40

Views: 24668

Answers (6)

Sandeep Gupta
Sandeep Gupta

Reputation: 7250

Without angular chrome extension installed:

ng.getOwningComponent($0)

With angular extension installed:

$state/$scope/$context: Element debug info
$apply/$applyChanges(): Trigger change detection cycle

Upvotes: 0

Mr T
Mr T

Reputation: 91

You could also run without Ivy with this in your tsconfig.app.json

"angularCompilerOptions": { "enableIvy": false }

Upvotes: 7

th1rdey3
th1rdey3

Reputation: 4358

This is not exactly related to this question, but googling led me here. So, I am leaving the solution to my problem here in hopes that it will help others who face the same problem.

I was getting ng.probe not a function error when I created a angular project using dotnet sdk(version 5.0.300) and ran it locally. The project was using @angular/core v8.2.12, and @angular/cli v8.3.29.

I was able to solve the problem by update these packages using -

ng update @angular/core@8 @angular/cli@8

or

npm run ng update @angular/core@8 @angular/cli@8

Upvotes: 2

MrMalith
MrMalith

Reputation: 1372

If you're using Augury extension, disable or remove it. then, check the console. I've had the same issue and I removed the Augury.

Augury is having different set of debugging APIs, that's why that error occur.

Upvotes: 33

Eli
Eli

Reputation: 1836

If someone is looking for an alternative to:

ng.probe($0)

In Ivy, then please try this:

 ng.getComponent($0);

Found it here, https://juristr.com/blog/2019/09/debugging-angular-ivy-console/

Thought I'd add this here for completion.

Note about ng.getComponent: you must focus the component tag ( e.g. <app-my-component> ) in the developer tools elements so that it will be in $0. It doesn't search up the hierarchy for parent components ( like ng.probe does ).

Upvotes: 51

Mrinal Jain
Mrinal Jain

Reputation: 927

Yes, augury assumes angular dev mode is active if window.ng exists, but ivy doesn't export probe right now

angular ivy exports I have augury but after I disable the extension there is no error anymore.

Upvotes: 17

Related Questions