Angular报错：AppModule导入EmployeeService异常，组件无法调用服务

嘿，我一眼就看出问题出在哪了——你肯定是不小心把EmployeeService加到AppModule的imports数组里了！Angular的imports数组是专门用来导入模块（比如BrowserModule、HttpClientModule这类）的，不是用来放服务的，所以它才会报错说要你加@NgModule注解，因为它误以为你要导入的是一个模块呢。

下面一步步帮你解决问题：

1. 修正AppModule的配置 #

打开你的app.module.ts，找到imports数组，把EmployeeService从里面移除，然后将它添加到providers数组中（这是Angular旧版本的服务注册方式）。正确的配置示例如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { EmployeeService } from './services/employee.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule // 这里只放Angular模块，不要放服务！
  ],
  providers: [EmployeeService], // 服务要放在providers数组里
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 更推荐的服务注册方式（Angular 6+） #

现在Angular更推荐使用@Injectable的providedIn属性来注册服务，这样无需手动在模块的providers中添加，还能实现树摇优化。修改你的employee.service.ts：

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

@Injectable({
  providedIn: 'root' // 添加这一行，指定服务在根模块全局提供
})
export class EmployeeService{
  public employeeRecord = [
    {name: 'sowmya', city: 'Hyd', age:'23', id:'e1'},
    {name: 'so ni', city: 'Banglore', age:'22', id:'e2'},
    {name: 'sujith', city: 'Chennai', age:'43', id:'e3'},
    {name: 'suruchi', city: 'Delhi', age:'41', id:'e4'}
  ];
  public getEmployee ( id:string ): any{
    let employee: any;
    for ( let i=0; i < this.employeeRecord.length; i++){
      if( id === this.employeeRecord[i].id ){
        employee = this.employeeRecord[i]; // 这里帮你修正了bug！你之前写的是[1]，会永远返回第二个员工，应该是[i]才对
        break;
      }
    }
    return employee;
  }
}

3. 可选：清理组件中的providers #

如果使用了上面providedIn: 'root'的方式，你可以把AppComponent里的providers: [EmployeeService]移除，因为服务已经在根级别注册，整个应用会共享同一个实例，没必要在组件中重复注册。

另外再提醒你一个小细节：你原来的getEmployee方法里有个逻辑bug——找到匹配的员工后，你赋值的是employee = this.employeeRecord[1];，这会导致不管传入哪个id，都固定返回第二个员工，我已经帮你改成this.employeeRecord[i]，这样才能返回你真正要找的那个员工。

内容的提问来源于stack exchange，提问作者sowmya