Угловая сборка ng выдает ошибку

Question

У меня есть небольшое приложение в Angular 5, и когда я пытаюсь запустить build prod ng build --prod, я получаю эту ошибку:

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]).

Для меня это большой сюрприз, потому что в обычном режиме по умолчанию приложение работает правильно. Я исследую другие подобные ошибки, и это, кажется, из зависимостей.

Но главный вопрос в том, как можно нормально работать в нормальном режиме и выдавать эту ошибку только при запуске 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))

    }

}

А используется:

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);
  }
}

.. и:

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

Если ваша угловая версия 4 или выше, вместо использования HttpClient, попробуйте использовать:

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

Answer 2

Я решаю проблему с этим:

Я удаляю @Injectable decorator из DataService

@ Injectable () // удаляем класс экспорта DataService { ... }

И из app.modules.ts я также удаляю DataService из провайдеров: []

провайдеры [ ... DataService // был удален ... ]

Конструктор не имеет вводимого параметра (url: string). И это решило мои проблемы.

Спасибо за все идеи !!!

Answer 3

Я думаю, что проблема может быть связана с введением url в ваш constructor() {}. Это может обеспечить исправление:

data.service.ts

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

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

Везде, где вызывается this.url, заменить его на this.router.url