title: Angular 7 - Uncaught (in promise): Error: StaticInjectorError(AppModule)[BASE_URL]
body: <p>My component class is as follows:</p>
  
  <pre><code>  export class FetchDataComponent {
    public forecasts: WeatherForecast[];
  
    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
      http.get&lt;WeatherForecast[]&gt;(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result =&gt; {
        this.forecasts = result;
      }, error =&gt; console.error(error));
    }
  }
  </code></pre>
  
  <p>After having updated the project from Angular 5 to 7, I started getting the following console error:</p>
  
  <blockquote>
    <p>Uncaught (in promise): Error: StaticInjectorError(AppModule)[BASE_URL]</p>
  </blockquote>
  
  <p>so I tried to solve the above error by defining the BASE_URL in environment.ts, then importing it to app.module.ts, and adding it to its providers array.</p>
  
  <p>Now my new environment.ts looks as follows:</p>
  
  <pre><code>export const environment = {
    production: false,
    BASE_URL: 'https://localhost:4430'
  };
  </code></pre>
  
  <p>and my app.module.ts is as follows:</p>
  
  <pre><code>import { HttpClientModule } from '@angular/common/http';
  import { RouterModule } from '@angular/router';
  import { AppComponent } from './app.component';
  import { FetchDataComponent } from './fetch-data/fetch-data.component';
  
  
  @NgModule({
     declarations: [
        AppComponent,
        FetchDataComponent
     ],
     imports: [
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        HttpClientModule,
        BASE_URL
      ])
    ],
    providers: [BASE_URL],
    bootstrap: [AppComponent]
  })
  </code></pre>
  
  <p>But now the BASE_URL is not recognized and I get a compiling error:</p>
  
  <blockquote>
    <p>Cannot find name 'BASE_URL'</p>
  </blockquote>
  
  <p>What am I doing wrong here ?</p>