如何将 angular2-logger 添加到我的 Angular4 项目中？答案

【问题标题】：How to add angular2-logger to my Angular4 project?如何将 angular2-logger 添加到我的 Angular4 项目中？
【发布时间】：2018-03-14 15:00:00
【问题描述】：

我正在尝试将 angular2-logger 添加到我的 Angular。 https://www.npmjs.com/package/angular2-logger 告诉我如何配置。它说：将 angular2-logger 库添加到您的应用程序中。如果您遵循 Angular 2 的快速入门指南，它应该是这样的：在 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
};

但是，当我从官网https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip创建QuickStart时，我看不到文件：systemjs.config

谁能告诉我下一步该怎么做？

【问题讨论】：

标签： angular typescript logging

【解决方案1】：

如果您使用的是 Angular CLI，则不需要 systemjs.config.js。 CLI 处理一切。您真的不需要配置，所以只需尝试npm install --save angular2-logger 然后设置提供程序并将记录器注入您的对象并使用它。

配置记录器：

供environment.ts中的开发人员使用

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

对于environment.prod.ts中的产品

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

在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;
  }
}

用法：

例如在app.component.ts:

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

【讨论】：

我试过了。但是失败了。我的 cmd 出了点问题。像这样
./node_modules/angular2-logger/app/core/level.ts 中的错误模块构建失败：错误：F:\evaluation-system-latest\node_modules\angular2-logger\app\core\ TypeScript 编译中缺少 level.ts。请通过 'files' 或 'include' 属性确保它在您的 tsconfig 中。
我根据issue 更新了答案，以便在 CLI 中使用模块，
它对我不起作用。但我从 Aitchy13 找到了issue。我结合了你们两个的解决方案。它有效。

【解决方案2】：

您没有获得文件，因为“https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip”是 Angular 版本 5。

在文档中，明确提到如果你使用的是angular2，那么你需要配置system.config.js，否则你可以直接添加provider并将其添加到构造函数中并使用该模块开始记录

【讨论】：