Add documentation to include angular2-logger in an angular-cli project

[francisoud]

The current README.md explain how to add angular2-logger to the quickstart project but if one is using angular-cli this is not the way to do it (for example there is no system.config.js).

Adding third party libs are explain in angular-cli readme but there is a few more thing to set it up :)

Here how I did it on my project (after running ng new myproject):

• Install the npm module

npm install --save angular2-logger

• 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

/* tslint:disable:no-console */
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');
  }
}

angular-cli: 1.0.0-beta.18

[langley-agm]

Hi @francisoud thanks for the contribution, I'll take a look at this once angular-cli is out of beta, as of now I've seen a lot of people having issues with it for various different reasons.

Also instead of doing this: this.logger.level = environment.logger.level; in the constructor I'd probably just make the correct logger providers already configured with the level as the config constant instead of just the level.

[langley-agm]

@vkniazeu isn't this what you were trying to do?

[vkniazeu]

@langley-agm, thank you! I never ended up finishing that config logic as I was running into a problem that environment.production wasn't being read as the expected true anywhere, but main.ts. I'll give the above a try in a new project.

[sleroy]

The documentation worked fine for me except for the isDevMod() function call, method was not found for AngularCLI :

@angular/cli: 1.0.0-beta.30 node: 6.9.4 os: linux x64 @angular/common: 2.4.6 @angular/compiler: 2.4.6 @angular/core: 2.4.6 @angular/forms: 2.4.6 @angular/http: 2.4.6 @angular/platform-browser: 2.4.6 @angular/platform-browser-dynamic: 2.4.6 @angular/router: 3.4.6 @angular/compiler-cli: 2.4.6

[francisoud]

@sleroy about isDevMode() strange because this method still seems to exist https://angular.io/docs/ts/latest/api/core/index/isDevMode-function.html and I've been using it for 6 months...

[dwoznicka]

Seems like a good time to update the documentation on this matter, as cli is out of beta for a while now ;)

[coffeenexus]

Any tricks to see the degug logs? I see all levels except those.

[langley-agm]

@coffeenexus chrome? make sure you don't have the browser filtering them for you.

[langley-agm]

I don't use cli, If anyone has tested this, they believe its the right way to do it and its working in the latest version feel free to make a PR with the added documentation i'll make sure to integrate it soon.

[jmfullerton]

With Angular-CLI version 1.5.0 I'm getting the following error.

ERROR in ./node_modules/angular2-logger/app/core/level.ts Module build failed: Error: M:\Git\dev\loggerTest\node_modules\angular2-logger\app\core\level.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.