Question

我正在开发一个带有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()，而不是删除它们。请记住，您可以为每个模块命名它们，并单独启用/禁用它们。对于其他开发人员通过维护或调试代码进行回溯，这些将证明非常有用。

Answer 1

我从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 或 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

修改

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

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' } });

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

Answer 2

您需要为debug库安装打字，才能在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（全局）中导入它（正如您所做的那样）：

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

有关打字的更多信息，请参阅：https://github.com/typings/typings

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

2 个答案: