Cors issue

[Sun3]

When I run the example I get a Cors issue. Did you do something to allow the Cors?
I also receive error: Failed to create chart: can't acquire context from the given item...

Thanks

[BBerlet]

I was able to fix the second issue by using an @ViewChild('canvas') to retrieve the corresponding DOM-element:
@ViewChild('canvas') _ctx:ElementRef;
constructor(private _weather: WeatherService) {
} ...
let ctx = this._ctx.nativeElement.getContext('2d')
this.chart = new Chart(ctx, { ...

Hope this helps!

[rjames-acn]

I am experiencing the CORS problem and I am not sure how to configure the HTTP request to enable the CORS. Any detail would be appreciated.

[damjad]

for CORS:

Add the following content to the file proxy.conf.json to the root folder of the project.

{
  "/api": {
    "target": "http://samples.openweathermap.org",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

In weather.service.ts replace http://samples.openweathermap.org with api. i.e.

return this._http.get("api/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22")
      .map(result => result);

Run the project with proxy configuration made earlier. i.e.

ng serve --proxy-config proxy.conf.json

Hope it helps.

[damjad]

For the issue: "Failed to create chart: can't acquire context from the given item".

Enclose the canvas element in a div. i.e.

<div>
  <canvas id="canvas"></canvas>
</div>

Hope it helps.

[csaszika]

there is a cors chrome addon. Just add it to chrome or to other browser if exists.

[nicholasp]

you can use chrome with parameter --disable-web-security

for example at windows powershell i use (you can add it to your shortcut also):

Start-Process -FilePath "c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -ArgumentList @("--disable-web-security", "--user-data-dir=""C:\Chrome""")