Angular 5：无法解析服务的所有参数(Angular 5: Can't resolve all parameters for Service)

 亲爱的Stackoverflow用户！ 
 
 最近我选择了Angular 5（好吧，不完全是我自己做的），我的任务是在Java Spring中创建一个带虚拟后端的演示应用程序。 总而言之，尽管学习框架的怪癖不是（现在仍然不容易），但发展速度并不算太差。 
 
 吴服务工作得很好，甚至ng build没有给我任何问题。 我可以不断测试我的应用程序是否在本地开发，而且在我的本地tomcat服务器上（使用XAMPP）。 
 
 但是当我想要使用生产版本时，它一路走下坡路。 
 
ERROR in : Can't resolve all parameters for DataService in C:/Users/ak/Documents/angular5_project/src/app/services/data.service.ts: (?, [object Object]).
 
 我搜索了几个git仓库和其他关于这个stackoverflow的问题。 
 
 起初，我以为我错过了一些基本的东西。 
 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { NotFoundError } from 'app/common/not-found-error';
import { BadInput } from 'app/common/bad-input';
import { AppError } from 'app/common/app-error';

@Injectable()
export class DataService {

  constructor(private url: string, private http: HttpClient ) {
  }

  getAll() {
    return this.http.get(this.url)
      .catch(this.handleError);
  }

  get(id) {
    return this.http.get(this.url + '/' + id)
    .catch(this.handleError);
  }

  create(resource) {
    //   return Observable.throw(new AppError());
    return this.http.post(this.url, JSON.stringify(resource))
      .catch(this.handleError);
  }

  update(resource) {
    return this.http.put(this.url + '/' + resource.id,
      JSON.stringify(resource))
      .catch(this.handleError);
  }

  delete(id) {
    return this.http.delete(this.url + '/' + id)
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    if (error.status === 404) {
      return Observable.throw(new NotFoundError());
    } else if (error.status === 400) {
      return Observable.throw(new BadInput(error.json()));
    } else {
      return Observable.throw(new AppError(error.json()));
    }
  }

}
 
 但后来我忽略了更明显的选择，比如忘记@Injectable注释或忘记在app.module.ts中注册服务。 
 
...
import { UserDataService } from 'app/services/user-data.service';
import { DataService } from 'app/services/data.service';
...
 providers: [
    MDBSpinningPreloader,
    AuthGuard,
    AdminAuthGuard,
    AuthService,
    UserDataService,
    DataService,
    EquipmentDataService,
    EquipmentAlarmDataService,
...
  ],
 
 通常会提到循环依赖问题，但从我所看到的情况来看，它从来不是基本的服务。 我有几个服务，从DataService继承，就像一个用户服务，它只是从我的Spring后端返回所有可用用户的列表（只是一组虚拟数据） 
 
import { Injectable } from '@angular/core';
import { DataService } from 'app/services/data.service';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserDataService extends DataService {

  constructor(http: HttpClient) {
    super('http://localhost:8080/users', http);

   }
}
 
 可悲的是，我甚至没有得到任何关于循环依赖的警告或者我可以在这里发布的任何远程有用的警告。 这意味着什么都没有。 错误信息是我唯一的来源，我在我的智慧结束。 
 
 的package.json 
 
{
  "name": "quickstart-angular5",
  "version": "5.0.5",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:free": "ngm build -p src/app/typescripts/free --clean && gulp npmFree && gulp startFree && gulp onlyFree",
    "build:pro": "ngm build -p src/app/typescripts/pro --clean && gulp only-pro && gulp startPro",
    "build:all": "npm run build:free && npm run build:pro",
    "aot:build": "ng build --prod --sm=false --aot=true --output-path=dist",
    "pre-commit": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "angular2-jwt": "^0.2.3",
    "chart.js": "2.5.x",
    "classlist.js": "1.1.x",
    "core-js": "2.4.x",
    "del": "3.0.x",
    "easy-pie-chart": "2.1.x",
    "font-awesome": "4.7.x",
    "gulp": "^3.9.1",
    "gulp-rename": "1.2.x",
    "gulp-run": "1.7.x",
    "hammerjs": "2.0.x",
    "ng-html-util": "1.0.x",
    "ngm-cli": "0.5.x",
    "rxjs": "^5.5.2",
    "screenfull": "3.3.x",
    "smoothscroll-polyfill": "0.3.x",
    "web-animations-js": "2.3.x",
    "zone.js": "0.8.x"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.8",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.85",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.5.0",
    "uglify-es": "3.3.8",
    "webpack": "3.x"
  }
}
 
 编辑：我忘记提及，我可以做一个一般的构建。 生产版本默认情况下是非编译的。 当我停用它时，它似乎有效，但丑化似乎也破坏了，页面被破坏。 触发这样的错误： https ： //github.com/angular/angular-cli/issues/8391 
 
 如果我只使用ng build，我的项目才有效。 

Recently I picked up Angular 5 and I was tasked with creating somewhat of a demo-application.
 
Ng serve worked perfectly well and even ng build wasn't giving me any problems. I could constantly test if my application was working locally in development, but also on my local tomcat server (using XAMPP). 
 
But when I wanted to use the production build, it went all downhill. 
 
ERROR in : Can't resolve all parameters for DataService in C:/Users/ak/Documents/angular5_project/src/app/services/data.service.ts: (?, [object Object]).
 
I searched throughout several git repositories and other questions on stackoverflow for this. 
 
At first, I thought I missed something basic. 
 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { NotFoundError } from 'app/common/not-found-error';
import { BadInput } from 'app/common/bad-input';
import { AppError } from 'app/common/app-error';

@Injectable()
export class DataService {

  constructor(private url: string, private http: HttpClient ) {
  }

  getAll() {
    return this.http.get(this.url)
      .catch(this.handleError);
  }

  get(id) {
    return this.http.get(this.url + '/' + id)
    .catch(this.handleError);
  }

  create(resource) {
    //   return Observable.throw(new AppError());
    return this.http.post(this.url, JSON.stringify(resource))
      .catch(this.handleError);
  }

  update(resource) {
    return this.http.put(this.url + '/' + resource.id,
      JSON.stringify(resource))
      .catch(this.handleError);
  }

  delete(id) {
    return this.http.delete(this.url + '/' + id)
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    if (error.status === 404) {
      return Observable.throw(new NotFoundError());
    } else if (error.status === 400) {
      return Observable.throw(new BadInput(error.json()));
    } else {
      return Observable.throw(new AppError(error.json()));
    }
  }

}
 
But then I disregarded the more obvious choices, like forgetting the @Injectable annotation or forgetting to register the service as such in the app.module.ts
 
...
import { UserDataService } from 'app/services/user-data.service';
import { DataService } from 'app/services/data.service';
...
 providers: [
    MDBSpinningPreloader,
    AuthGuard,
    AdminAuthGuard,
    AuthService,
    UserDataService,
    DataService,
    EquipmentDataService,
    EquipmentAlarmDataService,
...
  ],
 
Often, the problem of circular dependencies is mentioned, but from what I have seen, it was never the basic service. I have several services that inherit from the DataService, like a user-service that simply returns a list of all available users from my Spring Backend (Just a set of Dummy Data):
 
import { Injectable } from '@angular/core';
import { DataService } from 'app/services/data.service';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserDataService extends DataService {

  constructor(http: HttpClient) {
    super('http://localhost:8080/users', http);

   }
}
 
Sadly, I didn't even get any warnings of circular dependency or anything remotely useful I could post here. Which means... nothing. The error message is my only source and I'm at my wit's end. 
 
package.json
 
{
  "name": "quickstart-angular5",
  "version": "5.0.5",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:free": "ngm build -p src/app/typescripts/free --clean && gulp npmFree && gulp startFree && gulp onlyFree",
    "build:pro": "ngm build -p src/app/typescripts/pro --clean && gulp only-pro && gulp startPro",
    "build:all": "npm run build:free && npm run build:pro",
    "aot:build": "ng build --prod --sm=false --aot=true --output-path=dist",
    "pre-commit": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "angular2-jwt": "^0.2.3",
    "chart.js": "2.5.x",
    "classlist.js": "1.1.x",
    "core-js": "2.4.x",
    "del": "3.0.x",
    "easy-pie-chart": "2.1.x",
    "font-awesome": "4.7.x",
    "gulp": "^3.9.1",
    "gulp-rename": "1.2.x",
    "gulp-run": "1.7.x",
    "hammerjs": "2.0.x",
    "ng-html-util": "1.0.x",
    "ngm-cli": "0.5.x",
    "rxjs": "^5.5.2",
    "screenfull": "3.3.x",
    "smoothscroll-polyfill": "0.3.x",
    "web-animations-js": "2.3.x",
    "zone.js": "0.8.x"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.8",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.85",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.5.0",
    "uglify-es": "3.3.8",
    "webpack": "3.x"
  }
}
 
EDIT: I've forgotten to mention, that I can do a general build. The productive build has aot-compilation true by default. When I deactivate it, it seemingly works, but the uglification seems to break as well and the page is broken. Triggering an error like this: https://github.com/angular/angular-cli/issues/8391
 
My project only works if I use ng build only. 

原文：https://stackoverflow.com/questions/48748066