在Angular 2应用程序中使用System.js导入visionmedia调试以及如何记录消息？ [英] Importing visionmedia debug in Angular 2 app with System.js and how to log messages?

问题描述

我正在使用角度2前端的平均应用程序。我已经在快速应用程序中成功使用了 debug 。但是，我无法在 app.components.ts 或 main.module.ts 中干净地导入调试。任何关于如何继续的想法？

• < script src =/ node_modules / debug / debug.js >< / script> 错误结果：未捕获ReferenceError：未定义模块


• code>< script> System.import（'./ node_modules / debug / debug.js'）;< / script> 不好： zone。 js：101 GET http：// localhost：8002 / ms.js 404（未找到）某些依赖脚本无法加载。


• import {debug} from'../../../ node_modules / debug / debug.js';任何应用程序文件中的也会出现错误： zone.js ：101 GET http：// localhost：8002 / ms.js 404（未找到）; （索引）：25错误：错误：XHR错误（404未找到）加载http：// localhost：8002 / ms.js（...）

解决

最后解决了感谢@candidJ。我强烈建议您使用此工具调试您的应用程序。完成开发后，将所有的 console.log（）语句重构为 debugApp（）而不是删除它们。记住，您可以为每个模块命名空间，并单独启用/禁用它们。对于其他开发人员来说，通过代码进行维护或调试，这些将证明是非常有用的。

解决方案

a href =http://stackoverflow.com/questions/34660265/importing-lodash-into-angular2-typescript-application>将lodash导入到angular2 + typescript应用程序，最后弄清楚如何导入它。这次没有控制台错误，没有编译器错误。首先我应该提到：从 typescript 1 升级到 typescript 2 打字工具已被弃用。相反， npm 包管理器用于安装类型定义。

我遵循以下步骤：

• npm install debug --save


• npm install @ types / debug --save


• 在中映射调试system.config.js

system.config.js：

  map：{
'debug'：'../node_modules/debug/browser.js'，
 ... 
} 
  

• 导入您需要的任何 .ts 文件： code> import *作为调试从'debug';


• 可选地，如果需要在 index.html 使用： code>< script> System.import（'debug'）;< / script>

直到现在，这应该工作，但是一个麻烦的错误仍然存​​在： GET http：// localhost：8002 / ms.js 404（未找到）。我通过编辑 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 写：

  //将窗口对象中的debugsApp隐藏起来，以便从安慰。 
 // window.debug已被chrome使用。 
 import *作为调试从'debug'; 
（< any> window）.debugApp = debug; //扩展窗口的typescript方式
  

在任何其他 .ts 文件：

  import *作为Debug从'debug'; 
 
 var debug = Debug（'app：someModule'）; 
 debug（'Some message'）; 
  

最后在控制台中输入：

  //像往常一样生活
 debugApp.enable（'*'）; //启用全部
 debugApp.enable（'app'）; //启用应用程序调试器
 debugApp.enable（'app：*'）; //启用应用程序调试器，如果它们具有命名空间
 debugApp.enable（'app：someModule'）; //启用someModule 
 debugApp.disable（'*'）; //禁用所有
  

编辑

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

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喜欢解析导出，因此当 export 语句与如果语句组合时会导致异常行为。更多详细信息此处。幸运的是有一个修复。更多详情 here 感谢@guybedford

在 system.config.js 中添加：

  System.config {
 map：{
 ms：'@empty'
} 
}）; 
  

最后它是一个补丁工作，但它的工作。希望调试作者会提出一个更好的解决方案。直到此为止。

I am working on a MEAN stack app with Angular 2 frontend. I have successfully used debug in the express app. However I am unable to cleanly import debug in app.components.ts or main.module.ts. Any idea on how to proceed?

• <script src="/node_modules/debug/debug.js"></script> Results in error: Uncaught ReferenceError: module is not defined
• <script>System.import('./node_modules/debug/debug.js');</script> Not good either: zone.js:101 GET http://localhost:8002/ms.js 404 (Not Found) Some dependency script not able to load.
• import { debug } from '../../../node_modules/debug/debug.js'; inside any app file also gives error: 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(…)

Solved

Finally solved it thanks to @candidJ. I highly recommend using this tool to debug your app. After finishing development, refactor all your console.log() statements into debugApp() instead of deleting them. Remember, you can namespace them per module, and enable/disable them individually or en-mass. These will prove very useful later on for other developers backtracking trough the code for maintenance or debugging.

解决方案

I took some inspiration from Importing lodash into angular2 + typescript application and finally figured out how to import it. No console errors and no compiler errors this time.

First I should mention: when upgrading from typescript 1 to typescript 2 the typings tool gets deprecated. Instead, npm package manager is used to install type definitions.

I followed these steps:

• npm install debug --save
• npm install @types/debug --save
• Mapped debug in system.config.js

system.config.js:

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

• Import in any .ts file you need: import * as debug from 'debug';
• Optionally, if needed in index.html use: <script>System.import('debug');</script>

Untill now this should work, however a pesky error persists: GET http://localhost:8002/ms.js 404 (Not Found). I fixed this by editing node_modules/debug/debug.js.

• Replace line 14: exports.humanize = require('ms'); with exports.humanize = require('node_modules/ms/index');.

I am not sure what this implies for other use cases of debug. If you have any suggestions on how to improve this solution so it is not necessary to edit inside node_modules/debug/debug.js write a comment.

Usage in browser

Preferably in app.component.ts or main.module.ts write:

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

In any other .ts file:

import * as Debug from 'debug';

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

Finally in the console type as you need:

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

EDIT

I had an unexpected issue with this method. I could either load the server path or the frontend path for the debug script. So I had to do another improvisation.

node_modules/debug/debug.js - Line 14

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

This triggers another issue on itself. System.js likes to parse ahead the exports so this leads to abnormal behavior when exports statement is combined with an if statement. More details here. Fortunately there is a fix. More details here thanks to @guybedford

In system.config.js add:

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

In the end it's a patch-up job, but it works. Hopefully debug authors will suggest a better solution. Until then use this.

这篇关于在Angular 2应用程序中使用System.js导入visionmedia调试以及如何记录消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！