Angular returns error when building for Production but not Development

Question

github link to my repo here

relevant code:

import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

@Injectable()
export class DataService {
  constructor (private url: string, private http: Http) { }
  getAll() {
    return this.http.get(this.url)
        .map(response => response.json())
        .catch(this.errorHandler);
  }


  private errorHandler(error: Response) {
    // tslint:disable-next-line:curly
    if (error.status === 400)
      return Observable.throw(new BadInputError(error));
    // tslint:disable-next-line:curly
    else if (error.status === 404)
      return Observable.throw(new NotFoundError(error));
    return Observable.throw(new AppError(error));
  }

}

I've found a similar question which indicates that the problem has to do with overriding error-handling, but it doesn't really suggest a solution.

When I run either ng serve --prod or ng build --prod I get the following exception(s):

ERROR in Error: Can't resolve all parameters for DataService in C:/Users/Patrick/Desktop
/Angular/trial-app/src/app/services/data.service.ts: (?, [object Object]).
    at Error (native)
    at syntaxError (C:\Users\Patrick\Desktop\Angular\trial-app\node_modules\@angular\com
piler\bundles\compiler.umd.js:1729:34)
    at CompileMetadataResolver._getDependenciesMetadata (C:\Users\Patrick\Desktop\Angula
r\trial-app\node_modules\@angular\compiler\bundles\compiler.umd.js:15816:35)
    at CompileMetadataResolver._getTypeMetadata (C:\Users\Patrick\Desktop\Angular\trial-
app\node_modules\@angular\compiler\bundles\compiler.umd.js:15684:26)
    at CompileMetadataResolver._getInjectableMetadata (C:\Users\Patrick\Desktop\Angular\
trial-app\node_modules\@angular\compiler\bundles\compiler.umd.js:15670:21)
    at CompileMetadataResolver.getProviderMetadata (C:\Users\Patrick\Desktop\Angular\tri
al-app\node_modules\@angular\compiler\bundles\compiler.umd.js:15961:40)
    at C:\Users\Patrick\Desktop\Angular\trial-app\node_modules\@angular\compiler\bundles
\compiler.umd.js:15890:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (C:\Users\Patrick\Desktop\Angular\t
rial-app\node_modules\@angular\compiler\bundles\compiler.umd.js:15850:19)
    at CompileMetadataResolver.getNgModuleMetadata (C:\Users\Patrick\Desktop\Angular\tri
al-app\node_modules\@angular\compiler\bundles\compiler.umd.js:15505:50)
    at addNgModule (C:\Users\Patrick\Desktop\Angular\trial-app\node_modules\@angular\com
piler\bundles\compiler.umd.js:24268:58)
    at C:\Users\Patrick\Desktop\Angular\trial-app\node_modules\@angular\compiler\bundles
\compiler.umd.js:24279:14
    at Array.forEach (native)
    at _createNgModules (C:\Users\Patrick\Desktop\Angular\trial-app\node_modules\@angula
r\compiler\bundles\compiler.umd.js:24278:26)
    at analyzeNgModules (C:\Users\Patrick\Desktop\Angular\trial-app\node_modules\@angula
r\compiler\bundles\compiler.umd.js:24153:14)
    at analyzeAndValidateNgModules (C:\Users\Patrick\Desktop\Angular\trial-app\node_modu
les\@angular\compiler\bundles\compiler.umd.js:24163:35)

I'm not sure at all, but : Angular uses dependency injection in the constructor. Maybe sending a string doesn't count as a DI ? What happens if you use a setter instead ? Could you try it ? — , Nov 09 '17 at 15:28
It's not just strings. I've defined a type (Link) and passed the url in as a property of the type. Still doesn't work. — PakiPat, Nov 09 '17 at 16:46

score 1 · Accepted Answer · answered Nov 09 '17 at 16:11

1

Would add this as a comment, but don't have enough rep. However, I agree with trichetriche, I suspect that a string is not counted as a dependency injection and thus tripping you up. Check the answer given here: Angular 2 passing parameters to constructor throws DI exception

Personally, I've used services as a sort of global variable to achieve this. For example:

//in another class called URL-Service.ts you will need to add this 
//to providers at the root level in app.module

export class URLService {
  public savedURL: string = '';
}

//in another class where you have access to the url

export class SomeClass {
  constructor(private urlService = URLService){}
  someMethod(){
    this.urlService.savedURL = whateverHasTheURL;
  }    
}


export class DataService {
  constructor (private urlService = URLService, private http: Http) { 
    this.url = this.urlService.savedURL;
  }
  ...
}

answered Nov 09 '17 at 16:11

fleadram

30
5

how would I accomplish this when the class with access to the URL is actually a derived class from DataService: `export class PostsService extends DataService { constructor(http: Http) { super('http://jsonplaceholder.typicode.com/posts', http); } }` – PakiPat Nov 09 '17 at 17:26
got it! Create a protected prop 'url' in the base class and then this: `export class PostsService extends DataService { constructor(http: Http) { super(http); this.url = 'http://jsonplaceholder.typicode.com/posts'; } }` where 'url' is a property declared on the base class. @fleadram – PakiPat Nov 09 '17 at 20:26
Sweet, yeah if you are extending a base class that works well. – fleadram Nov 10 '17 at 02:39

Angular returns error when building for Production but not Development

1 Answers1