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

我正在开发一款带有Angular 2前端的平均堆栈应用程序。我已在express应用程序中成功使用调试。但是，我无法在app.components.ts或main.module.ts中干净地导入调试。你知道怎么做吗

导致错误：未捕获引用错误：未定义模块 System.import'/node_modules/debug/debug.js'；也不好：zone.js:101 GEThttp://localhost:8002/ms.js 404未找到无法加载的依赖项脚本。 从“../../../node_modules/debug/debug.js”导入{debug}；在任何应用程序文件中都会出现错误：zone.js:101 GEThttp://localhost:8002/ms.js 404未找到；索引：25错误：错误：XHR错误404未找到加载http://localhost:8002/ms.js… 解决

---

多亏了@candidJ，终于解决了这个问题。我强烈建议使用此工具调试您的应用程序。完成开发后，将所有console.log语句重构到debugApp中，而不是删除它们。请记住，您可以为每个模块命名它们，并单独或集体启用/禁用它们。这些将在以后对其他开发人员非常有用，他们可以通过维护或调试代码进行回溯。

您需要为调试库安装打字，以便在ts文件中使用它。打字管理您的打字脚本防御

打字是管理和安装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

然后，您可以尝试使用以下任一方法将其全局导入index.html：

System.import'/node_modules/debug/debug.js'

---

有关打字的更多信息，请参见：

我从中获得了一些灵感，并最终找到了如何导入它。这次没有控制台错误和编译器错误

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

我遵循以下步骤：

npm安装调试-保存 npm安装@types/debug-保存 system.config.js中的映射调试 system.config.js：

在您需要的任何.ts文件中导入：从“debug”导入*作为调试； 或者，如果需要在index.html中使用：System.import'debug'； 到现在为止，这应该是可行的，但是一个讨厌的错误仍然存在：GEThttp://localhost:8002/ms.js 404找不到。我通过编辑节点_modules/debug/debug.js修复了这个问题

替换第14行：exports.humanize=require'ms'；使用exports.humanize=require'node_modules/ms/index'；。 我不确定这对于调试的其他用例意味着什么。如果您对如何改进此解决方案有任何建议，那么无需在node_modules/debug/debug.js内部进行编辑，请撰写评论

在浏览器中的使用

最好在app.component.ts或main.module.ts中写入：

最后，在控制台中，根据需要键入：

// 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行

这本身就引发了另一个问题。System.js喜欢提前解析导出，因此当exports语句与if语句组合时，这会导致异常行为。更多细节。幸运的是，有一个解决办法。更多详情，感谢@guybedford

在system.config.js中添加：

---

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

我已将打字作为推荐的全局和模块安装，但仍然会遇到这些错误。在tsconfig.json中，我添加了编译器选项：{types:[core js，debug]，…}。当我在cmd npm run tsc-w中运行时，我收到以下消息：错误TS2688：找不到“debug”的类型定义文件。我使用的是typescript 2.0.3。谢谢你的提示！它帮助我想出下一步该做什么。我最终设法在控制台中打印消息。查看我的详细信息。只需阅读您编辑的问题。尝试使用this.debugApp=debug'app'；这个.debugApp“test”；在组件的构造函数方法中。我之前没有使用过debug.js。@AdrianMoisa您最终自己解决了这个问题。我从这个问题中学到了很多：更新：有关于如何替换它的说明，请参阅

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

import * as Debug from 'debug';

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

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

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

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