Importing debug in angular 2 app with system.js

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(…)

[Sjiep]

Using the Angular CLI 1.0.0 (which uses Webpack) I got debug working using the following steps:

First of, nstalling and configuring the debug library for angular (see also CLI wiki entry)

• npm install debug --save
• npm install @types/debug --save-dev
• add "debug" to the "types": [ ] in src/tsconfig.app.json

Then in any ts file use (import and define namespace) it as following:

import { Injectable } from '@angular/core';

import * as Debug from 'debug';
const debug = Debug('app:auth');

@Injectable()
export class AuthService {

  constructor() { }

  login() {
    debug('Login please...');
  }

}

Finally to enable the debug in the console, type the following in the console (see also NPM debug package page)

• localStorage.debug = 'app:*'
• or using the Chrome Developer Tool, go to the ‘Application’ tab, expand the ‘Local Storage’ entry, select the domain which you are working on and add debug as key and app:* as value.

Differences with the initial suggestion:

• No need to edit node_modules/debug/debug.js
• No need to assign the debugApp to the global window

I’m not 100% sure if this is the correct way, but it works.

[adrian-moisa]

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

SOLVED P.S. Please provide an example in documentation that covers this issue. It is not obvious at all for newcomers how to solve this issue.