如何在 Angular 8 中使用 console.log？答案

【问题标题】：How to use the console.log in Angular 8?如何在 Angular 8 中使用 console.log？
【发布时间】：2020-02-07 07:09:57
【问题描述】：

我曾经在 Angular 6 中使用 console.log 来查看浏览器中变量的内容

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

...我对此很满意，但现在我开始使用 Angular 8 并且出现此错误（当我 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.

如何在浏览器中查看变量的内容？

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

【问题讨论】：

这是一个需要修改的 linting 规则，而不是 angular。 palantir.github.io/tslint/rules/no-console eslint.org/docs/rules/no-console
即使您像人们建议的那样关闭 lint 规则，在生产版本中看到控制台垃圾邮件也是非常糟糕的。如果environment.production = true，我建议在生产版本中从 main.ts 剥离它们，或者至少将它们包装在 isDevMode

标签： angular

【解决方案1】：

这是 Node.js 中的 ESLint 规则。

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

它被禁用的原因：

使用控制台向用户输出信息，因此不严格用于调试目的。如果您正在为 Node.js 开发，那么您最可能不希望启用此规则。

您可以考虑使用记录器：https://github.com/code-chunks/angular2-logger

但是，如果你真的只是想允许 console.log 你可以编辑规则来设置：

“无控制台”：“关闭”，

【讨论】：

我在问题上粘贴了 tslint.json 配置，因为它不能像那样工作，甚至包括“关闭”。谢谢

【解决方案2】：

no-console 是由TSLint 及其rule 引起的：

规则：无控制台

禁止使用指定的控制台方法。

检查您的 tslint.json：

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

只需将true 更改为false。

【讨论】：

现在我可以打印了：console.log(this.var);但不是 console.log('CONSOLOG: VAR: ', this.frontpageconfigs);有任何想法吗？谢谢
看起来不错。也许this.frontpageconfigs 未定义？
不，当我使用 console.log(this.frontpageconfigs);但不是带有文本“CONSOL LOG”。 ' 或 " 可能会有变化。谢谢
嗯。不确定。你的 tslint.json 中有"no-console": [false] 吗？并在浏览器的开发者工具中检查您的设置。
终端发送了错误，所以在每个浏览器上都是一样的。谢谢

【解决方案3】：

当在 yours.TS 文件中时，您可以使用 console.log 功能。

例子：

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

在运行项目时，检查元素控制台，你会看到“id 1”将被打印出来

【讨论】：

欢迎来到stackoverflow。请仔细阅读问题，然后再阅读其他答案。你会看到你的观点已经被涵盖了。感谢您的输入。你会变得更好。