How can I debug an Angular 6 App?

Question

currently I have a problem with one angular 6 App. I use the Fuse Skeleton Template for it. Currently I'm getting trouble, when I try to use MatSnackBar in the App. As soon as I add the MatSnackBar to the constructor of a component, I get an Error in the JS Console of the Browser.

  constructor(
    private formBuilder: FormBuilder,
    private location: Location,
    public snackBar: MatSnackBar
  )
  {

  }

And this is the Error message:

ERROR Error: "[object Object]"

How can I get more Information what is wrong?

is that the complete error log? – Jota.Toledo May 16 '18 at 12:04 — Jota.Toledo, May 16 '18 at 12:04

score 0 · Answer 1 · edited Sep 25 '18 at 16:01

You need to import MatSnackBarModule in app.module.ts array.

import { MatSnackBarModule } from '@angular/material';

imports: [ ... MatSnackBarModule ...

Without it, I get an error just like you

To debug, if you have access to the imported source code(and use vscode), follow this instructions, put a break point on the constructor of the imported class.

You could also put a debugger and open the Developer tools(F12 in chrome):

foo() { 
   debugger; 
   console.log('footest');
}

Hope it helps!

score 0 · Answer 2 · answered Sep 25 '18 at 16:14

0

There is a open source plugin available for google chrome, So you can use the AngularJS Batarang

chrome plugin for debug AngularJS

answered Sep 25 '18 at 16:14

Ram Neduri

448
5
7

How can I debug an Angular 6 App?

2 Answers2