angular-cli: Adding param to environment.ts fails during unit tests

I tried to add my backend url to environment.[dev|prod].ts as explain in README.md

src/environment.ts and config/environment.dev.ts (same content)

export const environment = {
  production: false,
  backend: {
    url: 'http://localhost:8080/api'
  }
};

config/environment.prod.ts

export const environment = {
  production: true,
  backend: {
    url: '/myapp/api'
  }
};

src/app/shared/profile-info.service.ts

import { Injectable }   from '@angular/core';
import { Http }         from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { ProfileInfo }  from './profile-info.model';
import { environment }  from '../../app';

@Injectable()
export class ProfileInfoService {
  constructor(private http: Http) {}
  getProfileInfo(): Promise<ProfileInfo> {
    return this.http.get(environment.backend.url + '/profile-info')
               .toPromise()
               .then(response => response.json())
               .catch(this.handleError);
  }
  private handleError(error: any) {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

At runtime

ng serve or ng serve -prod works fine BUT…

Unit test fails

>ng test --watch false
Built project successfully. Stored in "dist/".
22 07 2016 14:32:55.601:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
22 07 2016 14:32:55.612:INFO [launcher]: Starting browser PhantomJS
22 07 2016 14:32:57.102:INFO [PhantomJS 2.1.1 (Windows 7 0.0.0)]: Connected on socket /#oYsAdh6c6MnyuUvFAAAA with id 25522896
PhantomJS 2.1.1 (Windows 7 0.0.0) Contract Service should ... FAILED
        Error: Cannot resolve all parameters for 'AppComponent'(undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppComponent' is decorated with Injectable. (line 233)
PhantomJS 2.1.1 (Windows 7 0.0.0) ProfileInfo Service should ... FAILED
        Error: Cannot resolve all parameters for 'AppComponent'(undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppComponent' is decorated with Injectable. (line 233)
PhantomJS 2.1.1 (Windows 7 0.0.0) App: CromeFront should create the app FAILED
        Error: Cannot resolve all parameters for 'AppComponent'(undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppComponent' is decorated with Injectable. (line 233)
PhantomJS 2.1.1 (Windows 7 0.0.0) App: CromeFront should have as title 'CROME' FAILED
        Error: Cannot resolve all parameters for 'AppComponent'(undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppComponent' is decorated with Injectable. (line 233)
PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 11 of 11 (4 FAILED) (0.021 secs / 0.022 secs)

What did I do wrong ?

Workaround

import { isDevMode } from '@angular/core';
...

@Injectable()
export class ProfileInfoService {
  private url: string;

  constructor(private http: Http) {}

  getProfileInfo(): Promise<ProfileInfo> {
    if(isDevMode()) {
      this.url = 'http://localhost:8080/api';
     } else {
       this.url = '/cromeApi/api';
    }
    return this.http.get(this.url + '/profile-info')
               .toPromise()
               .then(response => response.json())
               .catch(this.handleError);
  }
  private handleError(error: any) {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

Version

C:\tmp\myapp>ng --version
angular-cli: 1.0.0-beta.8
node: 6.2.1
os: win32 x64

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 3
  • Comments: 21 (8 by maintainers)

Most upvoted comments

I am missing something because its still not possible to add and env variable to ng test on prompt