CODEWITHSUNDEEP
angular
Jorge M. Nures
Jorge M. Nures

Reputation: 692

How to use the console.log in Angular 8?

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
   }
}

Upvotes: 17

Views: 121537

Answers (3)

pzaenger
pzaenger

Reputation: 11973

Update: TSLint was deprecated, therefore this answer is not valid anymore.

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.

Upvotes: 4

saad shafiq
saad shafiq

Reputation: 162

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

Upvotes: 2

jmdon
jmdon

Reputation: 1017

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",

Upvotes: 8

Related Questions