title: Angular 5: Can't resolve all parameters for Service
body: <p>Recently I picked up Angular 5 and I was tasked with creating somewhat of a demo-application.</p>
  
  <p>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). </p>
  
  <p>But when I wanted to use the production build, it went all downhill. </p>
  
  <pre><code>ERROR in : Can't resolve all parameters for DataService in C:/Users/ak/Documents/angular5_project/src/app/services/data.service.ts: (?, [object Object]).
  </code></pre>
  
  <p>I searched throughout several git repositories and other questions on stackoverflow for this. </p>
  
  <p>At first, I thought I missed something basic. </p>
  
  <pre><code>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()));
      }
    }
  
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>...
  import { UserDataService } from 'app/services/user-data.service';
  import { DataService } from 'app/services/data.service';
  ...
   providers: [
      MDBSpinningPreloader,
      AuthGuard,
      AdminAuthGuard,
      AuthService,
      UserDataService,
      DataService,
      EquipmentDataService,
      EquipmentAlarmDataService,
  ...
    ],
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>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);
  
     }
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>package.json</p>
  
  <pre><code>{
    "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 &amp;&amp; gulp npmFree &amp;&amp; gulp startFree &amp;&amp; gulp onlyFree",
      "build:pro": "ngm build -p src/app/typescripts/pro --clean &amp;&amp; gulp only-pro &amp;&amp; gulp startPro",
      "build:all": "npm run build:free &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>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: <a href="https://github.com/angular/angular-cli/issues/8391" rel="noreferrer">https://github.com/angular/angular-cli/issues/8391</a></p>
  
  <p>My project only works if I use ng build only. </p>