How to add angular2-logger to my Angular4 project?

Question

I am trying to add angular2-logger to my Angular. https://www.npmjs.com/package/angular2-logger told me how to config.It said:Add the angular2-logger library to your app. If you are following the Angular 2's Quickstart Guide it should be something like this: In systemjs.config.js:

// map tells the System loader where to look for things
var map = {
  'app':                        'app', // 'dist',
  '@angular':                   'node_modules/@angular',
  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  'rxjs':                       'node_modules/rxjs',
  'angular2-logger':            'node_modules/angular2-logger' // ADD THIS
};

//packages tells the System loader how to load when no filename and/or no extension
var packages = {
  'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
  'rxjs':                       { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { defaultExtension: 'js' },
  'angular2-logger':            { defaultExtension: 'js' }, // AND THIS
};

However,When I create QuickStart from official web https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip ,I can't see the file:systemjs.config

Who can tell me what should I do next?

Lia · Accepted Answer · 2018-03-14 07:00:00Z

4

If you're using the Angular CLI, you should not need a systemjs.config.js. CLI handles everything. You really shouldn't even need to configure,so just try npm install --save angular2-logger then Setup the Provider and Inject the logger into your objects and use it.

Configure the logger:

For dev in environment.ts

import { Level } from 'angular2-logger/core';
export const environment = {
  production: false,
  logger: {
    level: Level.INFO
  }
};

For prod in environment.prod.ts

import { Level } from 'angular2-logger/core';
export const environment = {
  production: true,
  logger: {
    level: Level.WARN
  }
};

Load configuration in app.module.ts

import { Logger } from 'angular2-logger/core';
import { NgModule, isDevMode } from '@angular/core';
import { environment }    from '../environments/environment';
...
@NgModule({
  declarations: [ ... ],
  imports: [ ...  ],
  providers: [ Logger ],
  bootstrap: [ ... ]
})
export class AppModule {
  constructor(private logger: Logger) {
    if (isDevMode()) {
      console.info('To see debug logs enter: \'logger.level = logger.Level.DEBUG;\' in your browser console');
    }
    this.logger.level = environment.logger.level;
  }
}

Usage:

For example in app.component.ts:

export class AppComponent implements OnInit {
  constructor(private logger: Logger) {
  public ngOnInit() {
    this.logger.debug('ngOnInit');
  }
}

edited Mar 14, 2018 at 7:00

answered Mar 14, 2018 at 6:49

Lia

12k3 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eve-Sama Over a year ago

I tried.But faild.something wrong in my cmd.like this

Eve-Sama Over a year ago

ERROR in ./node_modules/angular2-logger/app/core/level.ts Module build failed: Error: F:\evaluation-system-latest\node_modules\angular2-logger\app\core\level.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Lia Over a year ago

i updated the answer based on an issue for using module with CLI,

Eve-Sama Over a year ago

it doesnt work for me.But I found issue from Aitchy13.I combind you two's solutions.it works.

Santosh Singh · Accepted Answer · 2018-03-14 06:56:27Z

0

You are not getting the file as "https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip" is angular version 5.

In the documentation, it is clearly mentioned that if you are using angular2 then you need to configure system.config.js else you may directly add provider and add it in constructor function and start logging using this module

answered Mar 14, 2018 at 6:56

Santosh Singh

5792 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to add angular2-logger to my Angular4 project?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related