使用 System.js 在 Angular 2 应用程序中导入 visionmedia 调试以及如何记录消息？

Posted 2023-02-22

【中文标题】使用 System.js 在 Angular 2 应用程序中导入 visionmedia 调试以及如何记录消息？

【英文标题】：Importing visionmedia debug in Angular 2 app with System.js and how to log messages?

【发布时间】：2017-02-01 04:11:13

【问题描述】：

我正在开发一个带有 Angular 2 前端的 MEAN 堆栈应用程序。我已经在快递应用程序中成功使用了debug。但是我无法在app.components.ts 或main.module.ts 中干净地导入调试。关于如何进行的任何想法？

<script src="/node_modules/debug/debug.js"></script> 导致错误：Uncaught ReferenceError: module is not defined <script>System.import('./node_modules/debug/debug.js');</script> 也不好：zone.js:101 GET http://localhost:8002/ms.js 404 (Not Found) 一些依赖脚本无法加载。 import debug from '../../../node_modules/debug/debug.js'; 在任何应用程序文件中也会出现错误：zone.js:101 GET http://localhost:8002/ms.js 404 (Not Found); (index):25 Error: Error: XHR error (404 Not Found) loading http://localhost:8002/ms.js(…)

已解决

感谢@candidJ，终于解决了。我强烈推荐使用这个工具来调试你的应用程序。完成开发后，将所有console.log() 语句重构为debugApp()，而不是删除它们。请记住，您可以为每个模块命名它们，并单独或整体启用/禁用它们。这些将在以后证明对其他开发人员回溯代码进行维护或调试非常有用。

【参考方案1】：

您需要为debug 库安装类型才能在ts 文件中使用它。打字管理你的打字稿定义。

Typings 是管理和安装 TypeScript 的简单方法 定义。

这里是怎么做的：

# Install Typings CLI utility.
  npm install typings --global    

# Find a definition by name.
typings search --name debug

# If you use the package as a module:
# Install non-global typings (defaults to "npm" source, configurable through `defaultSource` in `.typingsrc`).

typings install debug --save

然后您可以尝试使用 either 方式（正如您所做的那样）在您的 index.html（全局）中导入它：

<script src="/node_modules/debug/debug.js"></script>

<script>System.import('./node_modules/debug/debug.js');</script>

更多关于打字的信息请看：https://github.com/typings/typings

【讨论】：

我已按照建议安装了类型（全局和模块），但仍然出现这些错误。在 tsconfig.json 我添加了 "compilerOptions": "types": [ "core-js", "debug"], .... 当我在 cmd npm run tsc -w 中运行时，我收到以下消息：error TS2688: Cannot find type definition file for 'debug'. 我正在使用 typescript 2.0.3。

感谢您的提示！它帮助我弄清楚下一步该做什么。我终于设法在控制台中打印消息。具体详情请查看我的answer。

只需阅读您编辑的问题。尝试在组件的构造方法中使用this.debugApp = debug('app'); this.debugApp('test');。我之前没有与debug.js 合作过。

@AdrianMoisa 你最终自己想通了。我从这个问题中学到了很多:)

更新： typings has been deprecated. 有关于如何替换它的说明，在its README

【参考方案2】：

我从Importing lodash into angular2 + typescript application 那里得到了一些灵​​感，终于弄清楚了如何导入它。这次没有控制台错误，也没有编译器错误。

首先我要提一下：从typescript 1 升级到typescript 2 时，typings 工具被弃用。相反，npm 包管理器用于安装类型定义。

我按照以下步骤操作：

npm install debug --save npm install @types/debug --save system.config.js 中的映射调试

system.config.js：

map: 
    'debug': '../node_modules/debug/browser.js',
    ...

在您需要的任何

.ts

文件中导入：import * as debug from 'debug'; 如果需要，可以在

index.html

中使用：<script>System.import('debug');</script>

到目前为止，这应该可以工作，但是仍然存在一个令人讨厌的错误：GET http://localhost:8002/ms.js 404 (Not Found)。我通过编辑node_modules/debug/debug.js 解决了这个问题。

将第 14 行：exports.humanize = require('ms'); 替换为 exports.humanize = require('node_modules/ms/index');。

我不确定这对debug 的其他用例意味着什么。如果您对如何改进此解决方案有任何建议，因此无需在node_modules/debug/debug.js 内进行编辑，请写评论。

在浏览器中的使用

最好在 app.component.ts 或 ma​​in.module.ts 中写：

// Expose debugsApp in window object in order to access it from the console. 
// window.debug is already used by chrome. 
import * as debug from 'debug';
(<any>window).debugApp = debug; // The typescript way to extend window

在任何其他 .ts 文件中：

import * as Debug from 'debug';

var debug = Debug('app:someModule');
debug('Some message');

最后在 console 中输入你需要的：

// Business as usual
debugApp.enable('*'); // Enable all
debugApp.enable('app'); // Enable app debugger
debugApp.enable('app:*'); // Enable app debuggers if they are namespaced
debugApp.enable('app:someModule'); // Enable someModule
debugApp.disable('*'); // Disable all

编辑

我在使用此方法时遇到了意外问题。我可以加载调试脚本的服务器路径或前端路径。所以我不得不做另一个即兴创作。

node_modules/debug/debug.js - 第 14 行

if (typeof process === 'undefined') 
  exports.humanize = require('node_modules/ms/index.js');
 else 
  exports.humanize = require('ms');

这会引发另一个问题。 System.js 喜欢提前解析导出，因此当exports 语句与if 语句组合时会导致异常行为。更多详情here。幸运的是，有一个修复程序。更多详情here 感谢@guybedford

在system.config.js中添加：

System.config(
    map: 
        ms: '@empty'
    
);

最后，这是一个修补工作，但它确实有效。希望调试作者会提出更好的解决方案。在此之前使用它。