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

92
February 13, 2020, at 01:10 AM

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))))
    }
    )};
};
Answer 1

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;
READ ALSO
Can this script be used to create multiple SVG elements?

Can this script be used to create multiple SVG elements?

I have the following JavaScript that creates a graph using snap SVG

109
Prevent reloading a website after sweetalert

Prevent reloading a website after sweetalert

On a web page there is a table with a few rowsIn each line there is a button that triggers a Javascript function:

112
How to use javascript to put volume to 0 or close current tab for twitch or just mute the chrome tab?

How to use javascript to put volume to 0 or close current tab for twitch or just mute the chrome tab?

i am making a google chrome extension and currently, i want a function that either close the twitchtv tab or put volume of the stream to 0 is it possible or maybe the best way would be to mute the chrome tab

73
How to prevent page refresh on browser back to page generated by ajax call

How to prevent page refresh on browser back to page generated by ajax call

Is there a way to push the ajax call result? I don't understand where the actual state of the result page is storedBecause history

66