Question

我正在尝试将 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创建快速入门时，我看不到该文件： systemjs.config

谁能告诉我接下来该怎么做？

Answer 1

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

配置记录器：

对于dev 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');
  }
}

Answer 2

您没有收到该文件，因为“https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip”是角度版本5。

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

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

2 个答案: