Angular ng build give me an error

Question

I have a small app in Angular 5 and when I try to run build prod ng build --prod, I get this error:

Time: 4739ms
chunk {0} styles.c716146007b500deaef3.bundle.css (styles) 175 kB [initial] [rendered]
chunk {1} polyfills.997d8cc03812de50ae67.bundle.js (polyfills) 84 bytes [initial] [rendered]
chunk {2} main.ee32620ecd1edff94184.bundle.js (main) 84 bytes [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]

ERROR in : Can't resolve all parameters for DataService in .../src/app/services/data.service.ts: (?, [object Object]).

For me this is a big surprise, because in normal, default way the app it's run correctly. I investigate other similar errors and it seems to be from dependencies.

But the big question is, how it's possible to run ok in normal mode, and give me this error just when I run build?!

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { AppError } from '../common/app-error';
import { NotFoundError } from '../common/not-found-error';
import { BadInput } from '../common/bad-input';

@Injectable()
export class DataService {

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

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

    create(resource) {
        return this.http
                   .post(this.url, JSON.stringify(resource))
                   .catch(this.handleError)
    }

    update(resource) {
        return  this.http
                    .patch(`${this.url}/${resource.id}`, JSON.stringify({ isRead: true}))
                    .catch(this.handleError);
    }

    delete(id) {
        return this.http
                   .delete(`${this.url}/${id}`)
                   .catch(this.handleError);
    }

    private handleError(error: Response) {

        if(error.status === 400) {
            return Observable.throw( new BadInput(error));
        }
        if(error.status === 404) {
            return Observable.throw(new NotFoundError());
        }
        return Observable.throw(new AppError(error))

    }

}

And is used:

import { DataService } from './data.service';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class GithubFollowersService extends DataService {

  constructor(http: HttpClient) {
    super('https://api.github.com/users/mosh-hamedani/followers', http);
  }
}

.. and:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { DataService } from './data.service';

@Injectable()
export class PostService extends DataService {

    // private url: string = 'https://jsonplaceholder.typicode.com/posts';

    constructor(http: HttpClient) {
        super('https://jsonplaceholder.typicode.com/posts', http);
    }

}

Answer 1

I think the issue might be due to the injection of url in your constructor() {}. This might provide a fix:

data.service.ts

import { Router } from '@angular/router';

constructor(private: router: Router, private http: HttpClient) {}

Wherever this.url is called, replace it with this.router.url

Answer 2

If your angular version is 4 or greater, instead of using HttpClient, try using:

import { Http } from '@angular/http';

Answer 3

I solve the problem with this:

I remove @Injectable decorator from DataService

@Injectable() //remove it export class DataService { ... }

And from app.modules.ts, I also remove DataService from providers: []

providers[ ... DataService //was removed ... ]

The constructor don't have an injectable parameter (url: string). And this was solve my problems.

Thanks for all ideas!!!