title: Angular 6: No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I am doing <a href="https://coursetro.com/posts/code/126/Let&#39;s-build-an-Angular-5-Chart.js-App---Tutorial" rel="nofollow noreferrer">https://coursetro.com/posts/code/126/Let's-build-an-Angular-5-Chart.js-App---Tutorial</a></p>
  
  <p>and facing some problems. 
  Currently I am using:</p>
  
  <pre><code>Angular CLI: 6.0.8
  Node: 10.4.1
  OS: linux x64
  Angular: 6.0.6
  ... animations, common, compiler, compiler-cli, core, forms
  ... http, language-service, platform-browser
  ... platform-browser-dynamic, router
  
  Package                           Version
  -----------------------------------------------------------
  @angular-devkit/architect         0.6.8
  @angular-devkit/build-angular     0.6.8
  @angular-devkit/build-optimizer   0.6.8
  @angular-devkit/core              0.6.8
  @angular-devkit/schematics        0.6.8
  @angular/cli                      6.0.8
  @ngtools/webpack                  6.0.8
  @schematics/angular               0.6.8
  @schematics/update                0.6.8
  rxjs                              6.2.1
  typescript                        2.7.2
  webpack                           4.8.3
  </code></pre>
  
  <p>In, <strong><em>weather.service.ts</em></strong> if I want to use </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import 'rxjs/add/operator/map';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class WeatherService {
  
    constructor(private _http: HttpClient) { }
  
    dailyForecast() {
      return this._http.get("http://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&amp;appid=b6907d289e10d714a6e88b30761fae22").map(result =&gt; result);
    }
  }
  </code></pre>
  
  <p>but it's giving me an error: </p>
  
  <hr>
  
  <p>(Browser console)</p>
  
  <p>No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' is therefore not allowed access.</p>
  
  <hr>
  
  <p>(Terminal)</p>
  
  <p>ERROR in ./src/app/weather.service.ts
  Module not found: Error: Can't resolve 'rxjs/add/operator/map' in '/home/nodira/AngularProjects/charts/src/app'</p>
  
  <hr>
  
  <p>I tried the following with solution give in <a href="https://stackoverflow.com/questions/50837367/angular-6-where-getting-error-module-rxjs-add-operator-map-and-another-error">Angular 6 : where getting error module &quot;rxjs/add/operator/map&quot; and another error &#39;map&#39; does not exist on type &#39;Observable&lt;Response&gt;&#39;</a>: </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class WeatherService {
  
    constructor(private _http: HttpClient) { }
  
    dailyForecast() {
      return this._http.get("http://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&amp;appid=b6907d289e10d714a6e88b30761fae22").pipe(map(result =&gt; result));
    }
  }
  </code></pre>
  
  <p>Now I am not getting any error in terminal, but I don't see any desired <a href="https://i.stack.imgur.com/6npb9.png" rel="nofollow noreferrer">result</a> in console of browser neither. 
  I had similar <code>Can't resolve rxjs/add/operator/filter</code> when I wanted to use <code>filter</code> error when I wanted. I would really appreciate your help.
  Thanks beforehand.</p>