How to use the console.log in Angular 8?

Viewed 73839

I used to have my console.log in Angular 6 to see the content of variables in the browser

      console.log('CONSOLOG: M:paginateVar & O: this.var : ', this.var);

... and I was happy with it, but now I'm starting to use Angular 8 and I get this error (when I npm start):

No type errors found
Version: typescript 3.4.5
Time: 2104ms
× 「wdm」:    1029 modules

ERROR in ./src/main/webapp/app/home/home.component.ts
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

D:\JHipster\spingular\src\main\webapp\app\home\home.component.ts
105:7  error  Unexpected console statement  no-console

✖ 1 problem (1 error, 0 warnings)

i 「wdm」: Failed to compile.

How can I see the content of a variable back in the browser?

TSLINT:

{
  "rulesDirectory": ["node_modules/codelyzer"],
  "rules": {
    "no-console": [false, "debug", "info", "time", "timeEnd", "trace" ],
    "directive-selector": [true, "attribute", "jhi", "camelCase"],
    "component-selector": [true, "element", "jhi", "kebab-case"],
    "no-inputs-metadata-property": true,
    "no-outputs-metadata-property": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": false,
    "component-class-suffix": true,
    "directive-class-suffix": true
   }
}
3 Answers

This is an ESLint rule in Node.js.

https://eslint.org/docs/rules/no-console

The reason it's disabled:

console is used to output information to the user and so is not strictly used for debugging purposes. If you are developing for Node.js then you most likely do not want this rule enabled.

You may like to consider a logger: https://github.com/code-chunks/angular2-logger

However, if you really just want to allow console.log you can edit the rules to set:

"no-console": "off",

no-console is caused by TSLint and its rule:

Rule: no-console

Bans the use of specified console methods.

Check your tslint.json:

"no-console": [
  true,
  "debug",
  "info",
  "time",
  "timeEnd",
  "trace"
],

Just change true to false.

when in yours.TS file you can use console.log function.

Example :

 int id = 1 ; // id is declared variable 
 console.log ("id ", this.id ); // function called 

while running the project, inspect element console and you'll see that " id 1" will be printed

Related