CODEWITHSUNDEEP
javascriptangularheroku
lifelonglearner
lifelonglearner

Reputation: 326

My Angular App works locally, but it gets an error on Heroku. Source Map URL: index.js.map

I can pull data from the JSON locally (when using ng serve) and modify the DOM with it, but not on Heroku.

Quick second question: Why does dry_da return a NaN value to the DOM, but the exact same code in console.log (last line of component.ts) print a number??

Here's site on Heroku: https://densityaltitude.herokuapp.com/

Here's the error:

Source map error: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data Resource URL: https://densityaltitude.herokuapp.com/main-es2015.b2df828509b484a6cc02.js Source Map URL: index.js.map

Here's an example of the JSON I'm pulling from:

https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22

Here's my dailyda.component.html:

<div *ngIf = "weather"> <!-- *ngIf prevents errors, because of the 
delay in retrieving JSON from the API. Once weather has a value, this 
div is displayed.-->
    <p>Temp in Kelvins: {{ temp }}</p> 
    <p>Static Atmos. Pressure in hectopascals: {{ press }}</p>
    <p> Density Altitude (assumes dry air): {{dry_da}} </p>
</div>

component.ts:

import { Component, OnInit } from '@angular/core';
import { WeatherdataService } from '../services/weatherdata.service';
import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
@Component({
  selector: 'app-dailyda',
  templateUrl: './dailyda.component.html',
  styleUrls: ['./dailyda.component.scss']
})
export class DailydaComponent implements OnInit {
  weather;
  temp;
  press;
  //Crunch your numbers here, store it in a variable called result, etc.,
  //And in the template, {{ result }} will display that number.
  ISAT = 288.15;
  ISAP = 29.92;
  lapse_rate = 0.0065;
  R = 8.3144598;
  g = 9.80665;
  M = 0.028964; // This is the molar mass of DRY air.
  dry_da = this.ISAT/this.temp *(1 - ((this.press/this.ISAP)/(this.temp/this.ISAT))** ((this.lapse_rate*this.R)/(this.g*this.M - this.lapse_rate*this.R)))



  constructor(private weatherdataService: WeatherdataService) { }

  ngOnInit() {
    this.weatherdataService.getWeather().subscribe((data)=>{
      console.log(data);
      this.weather = data;
      this.temp = this.weather.main.temp;
      this.press = this.weather.main.pressure;
      console.log(this.ISAT/this.temp *(1 - ((this.press/this.ISAP)/(this.temp/this.ISAT))** ((this.lapse_rate*this.R)/(this.g*this.M - this.lapse_rate*this.R))))
    }
    )};

};

Upvotes: 1

Views: 120

Answers (1)

robert
robert

Reputation: 6152

Your problem is this line in your (DailydaComponent):

this.temp = this.weather.main.temp;

You prevented the access with *ngIf in your HTML template. But in your component constructor you access it before you have something in it. Like this:

constructor(weatherdataService) {
    this.weatherdataService = weatherdataService;
    this.temp = this.weather.main.temp;
    this.press = this.weather.main.temp;

Move these lines:

    this.temp = this.weather.main.temp;
    this.press = this.weather.main.temp;

inside your ngOnInit function after your subscription emits a value. After this line:

this.weather = data;

Upvotes: 2

Related Questions