Angular deployment - apiUrl does not exist on the type {production : boolean}

Question

I developed an Angular 7 App with Laravel backend. While trying to build and deploy for production I got an error.

src/app/services/user.service.ts(10,32): error TS2339: Property 'apiUrl' does not exist on type '{ production: boolean; }'.

On the angular cli I ran this:

ng build --prod

environment.ts

export const environment = {
  production: false,
  apiUrl:   'http://example.com/api',   
};

user.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class UserService {

 private API_URL= environment.apiUrl;


  constructor(private http: HttpClient) { }

  login(email, password) {
const obj = {
  email: email,
  password: password
};
console.log(obj);
this.http.post(this.API_URL + '/login', obj)
    .subscribe(res => console.log('login Done',res));
  }

}

On

ng build --prod

I expect it to build then I put the dist file on the online server.

This is the error:

src/app/services/user.service.ts(10,32): error TS2339: Property 'apiUrl' does not exist on type '{ production: boolean; }'.

Note: I am doing it for the first time.

Answer 1

the environment.ts file will be replaced during build, ng build --prod replaces environment.ts with environment.prod.ts so just add the apiUrl property to environment class in environment.prod.ts file

export const environment = {
  production: true,
  apiUrl:   'http://example.com/api', 
};

Answer 2

Just need add your property in environment.ts and environment.prod.ts.

enviroment.ts

environment.prod.ts