导入视觉媒体调试在角2应用程序与System.js和如何记录消息？

Question

我正在一个平均堆栈应用程序与角2前端工作。我已经成功地在快速应用程序中使用了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()，而不是删除它们。请记住，您可以将它们命名为每个模块，并启用/禁用它们。这些将被证明是非常有用的，稍后对其他开发人员通过代码进行维护或调试进行回溯。

Answer 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

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

• <script src="/node_modules/debug/debug.js"></script>
• <script>System.import('./node_modules/debug/debug.js');</script>

有关类型的更多信息，请参见：https://github.com/typings/typings

Answer 2

我从在angular2 +打字本应用程序中导入lodash中获得了一些灵感，并最终想出了如何导入它。这次没有控制台错误，也没有编译器错误。

首先，我要提到:当从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或main.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');

最后，在控制台中按需要输入：

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

编辑

我对这个方法有一个意想不到的问题。我可以加载服务器路径或调试脚本的前端路径。所以我不得不再做一次即兴表演。

节点_模块/调试/调试14第14行

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

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

在system.config.js中添加：

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

最后，这是一项修补工作，但有效。希望调试作者能够提出更好的解决方案。在那之前用这个。