错误：无法解析 MemberDetailsComponent 的所有参数：(?, [object Object], [object Object])

Question

我的组件出现此错误。我知道这是将“AppService”注入到 MemberDetailsComponent 的问题。但我不明白这里有什么问题。我验证了 polyfills.js 包含以下行

import 'core-js/es7/reflect';

我挣扎了几天。请在这里提供任何帮助。

错误是

 MemberDetailsComponent should create
Failed: Can't resolve all parameters for MemberDetailsComponent: (?, [object Object], [object Object]).
Error: Can't resolve all parameters for MemberDetailsComponent: (?, [object Object], [object Object]).
    at syntaxError (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:1270:17)
    at CompileMetadataResolver._getDependenciesMetadata (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:11171:35)
    at CompileMetadataResolver._getTypeMetadata (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:11064:26)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:10683:24)
    at CompileMetadataResolver.loadDirectiveMetadata (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:10545:23)
    at eval (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24119:55)
    at Array.forEach (<anonymous>)
    at eval (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24118:72)
    at Array.forEach (<anonymous>)
    at JitCompiler._loadModules (webpack:///./node_modules/@angular/compiler/fesm5/compiler.js?:24115:75)

app.module.ts

export const ROUTES = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'members',
    component: MembersComponent
  },
    {
        path: 'details',
        component: MemberDetailsComponent
      },
  {
    path: 'login',
    component: LoginComponent
  }
];

// Notice how both FormsModule and ReactiveFormsModule imported...choices, choices!
@NgModule({
  declarations: [AppComponent, BannerComponent, MemberDetailsComponent, MembersComponent, LoginComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
    ReactiveFormsModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DialogModule
  ],
  providers: [AppService, HttpClient],
  bootstrap: [AppComponent]
})

app.service.ts

    @Injectable({
  providedIn: 'root'
})
@Injectable()
export class AppService {
  api = 'http://localhost:8000/api';
  username: string;
  DEBUG: Boolean = false;
  editMode: Boolean = false;
  memberDialog = false;
  members = [];
  member:Member = new Member();
  constructor(private http: HttpClient) {
      if (this.DEBUG) {
          this.api = 'http://localhost:3000';
        } else {
          this.api = 'http://localhost:8000/api';
        }
  }
  -- service methods --

member-details-component.ts

 import { Component, OnInit, OnChanges } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppService } from '../app.service';
import { Router } from '@angular/router';

// This interface may be useful in the times ahead...
export class Member {
id:number;
firstName: string;
lastName: string;
jobTitle: string;
team: string;
status: string;
}

@Component({
selector: 'app-member-details',
templateUrl: './member-details.component.html',
styleUrls: ['./member-details.component.css']
})
export class MemberDetailsComponent implements OnInit, OnChanges {
memberModel: Member = new Member();
memberForm: FormGroup;
submitted = false;
alertType: String = "";
alertMessage: String ="";
teams = [];

constructor( public appService: AppService, private fb: FormBuilder, private router: Router) {
  this.memberForm = this.fb.group({
              firstName: ['', Validators.required],
              lastName: ['', Validators.required],
              jobTitle: ['', Validators.required],
              team: ['', Validators.required],
              status: ['', Validators.required]
          });
}

ngOnInit() {
  this.appService.getTeams().subscribe((teams) => (this.teams = teams));
}
ngOnChanges() {}
onSubmit() {
   -- logic
}
}

member-details-component.spec.ts

 import { async, ComponentFixture, TestBed, inject  } from '@angular/core/testing';

import { MemberDetailsComponent } from './member-details.component';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import { Router } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { RouterModule } from '@angular/router';
import { AppService } from '../app.service';



// Bonus points!
describe('MemberDetailsComponent', () => {
 let component: MemberDetailsComponent;
 let fixture: ComponentFixture<MemberDetailsComponent>;
 let appService: AppService;
 let httpMock: HttpTestingController;

 beforeEach(async(() => {
   TestBed.configureTestingModule({
     declarations: [ MemberDetailsComponent ],
     imports: [HttpClientModule],
           providers: [
             { provide: AppService, useValue: {} },
             {
               provide: Router,
               useClass: class {
                 navigate = jasmine.createSpy('navigate');
               }
             }
           ]
   })
   .compileComponents();
 }));

 beforeEach(() => {
   appService = TestBed.get(AppService);
   httpMock = TestBed.get(HttpTestingController);
   fixture = TestBed.createComponent(MemberDetailsComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 });

 it('should create', () => {
   expect(component).toBeTruthy();
 });
});

StackBlitz 中的代码：https://stackblitz.com/edit/angular-8damnn

Answer 1

我修复了您的项目，错误是因为您正在将组件成员详细信息中的“成员”类导入服务应用程序，并且服务应用程序被导入到任何地方并为类成员进行循环引用。

https://stackblitz.com/edit/angular-dpqftw

我创建了一个文件夹Models，里面有类Member，这是一个更好的方法，如果您需要共享模型，请为它创建一个单独的文件。 我到处都改变了进口商。