Мое Angular приложение работает локально, но на Heroku выдается ошибка. URL карты источника: index. js .map

Question

Я могу получить данные из JSON локально (при использовании ng serve) и изменить DOM с ним, но не в Heroku.

Второй быстрый вопрос: почему dry_da возвращает значение NaN в DOM, но точно такой же код в console.log (последняя строка component.ts) вывести число ??

Вот сайт на Heroku: https://densityaltitude.herokuapp.com/

Вот ошибка:

Ошибка карты источника: Ошибка: JSON .parse: неожиданный символ в строке 1 столбца 1 URL-адреса ресурса данных JSON: https://densityaltitude.herokuapp.com/main-es2015.b2df828509b484a6cc02.js URL-адрес карты источника : index. js .map

Вот пример JSON, который я извлекаю из:

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

Вот мой 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

Ваша проблема в этой строке в (DailydaComponent):

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

Вы заблокировали доступ с помощью * ngIf в шаблоне HTML. Но в конструкторе компонентов вы получаете к нему доступ, прежде чем что-то в нем есть. Например:

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

Переместите эти строки:

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

внутри функции ngOnInit после того, как ваша подписка выдаст значение. После этой строки:

this.weather = data;