用System.js导入Angular 2应用程序中的visionmedia debug以及如何logging消息？

我正在与Angular 2前端开发一个MEAN栈应用程序。 我已经成功地在快速应用程序中使用debug 。 但是我无法干净地导入debuggingapp.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(…) 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。 我强烈build议使用这个工具来debugging你的应用程序。 完成开发后，将所有的console.log()语句重构为debugApp()而不是删除它们。 请记住，您可以为每个模块命名空间，并单独启用或禁用它们。 这些对于其他开发人员通过维护或debugging代码进行回溯将会很有用。

Answer 1

我从导入lodash到angular2 + typescript应用程序中得到了一些启发，最后想出了如何导入它。 这次没有控制台错误和编译器错误。

首先我应该提到：从typescript 1升级到typescript 2时， typescript 1工具被弃用。 相反， npm软件包pipe理器用于安装types定义。

我遵循这些步骤：

• npm install debug --save
• npm install @types/debug --save
• 在system.config.js映射debugging

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解决这个问题。

• replace第14行： exports.humanize = require('ms'); with exports.humanize = require('node_modules/ms/index'); 。

我不确定这对于其他debug用例意味着什么。 如果您对如何改进此解决scheme有任何build议，那么不需要在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'); 

最后在你需要的控制台types中：

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

编辑

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

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喜欢提前parsing出口​​，所以当exports语句和if语句结合时会导致exception行为。 更多细节在这里 。 幸运的是有一个修复。 更多细节在这里感谢@ guybedford

在system.config.js中添加：

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

最后这是一个修补工作，但它的工作原理。 希望debugging的作者会提出一个更好的解决scheme。 在此之前使用这个。

Answer 2

你需要安装debug库的types，以便在ts文件中使用它。 typespipe理您的打字稿辩护。

types是pipe理和安装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>

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