Retorno Undefined

Bom dia!

É porque navigator.geolocation.getCurrentPosition é uma operação assíncrona. Lembre lá no início quando você começou a dar seus primeiros passos em JavaScript realizando suas primeiras operações assíncronas que o resultado da operação é obtido no callback e que return não faz sentido dentro deste contexto.

Você pode reforçar esse conceito, do assíncrono, callback em:

https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24363

E para ir além pode verificar no curso de JS avançado:

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2/task/17502

Sucesso e bom estudo meu aluno.

Assisti aos videos, mudei o codigo mas continua dando errado, nao estou entendendo porque nao consigo gravar a longitude e latitude nas props lat e long.

  constructor(service: BoxService){ 

        this.service = service;
        this.getLocation();

    }


    getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.showPosition);
        } else {
            alert("Sorry, geolocation is not supported by this browser.");
        }
    }

    showPosition(position) {

        this.lat = position.coords.latitude;
        this.long = position.coords.longitude; 

    }

Erro: ERROR TypeError: Cannot set property 'lat' of null

Onde esta lat e long declarado em sua classe? Em nenhum momento você declarou essas propriedades, logo não existem. Mesmo que existissem você teria um erro. Você esta passando this.showPosition como callback de navigator.geolocation.getCurrentPosition.

No curso de JS Avançado 1, pré-requisito deste treinamento você aprendeu que funções possuem escopo dinâmico e o this de uma função não será o this que representa o objeto da sua classe. Por isso foi introduzido o conceito de arrow function e seu escopo léxico. Eu lembro esse conceito no curso de Angular.

Alterando sua classe:

    constructor(service: BoxService){ 

            this.service = service;
            this.getLocation();
          // adicionando as propriedades que faltam
            this.lat = 0
            this.long = 0;

        }

        getLocation() {
            if (navigator.geolocation) {
             // usando arrow function
                navigator.geolocation.getCurrentPosition(position => {

                    this.lat = position.coords.latitude;
                    this.long = position.coords.longitude; 
                });
            } else {
                alert("Sorry, geolocation is not supported by this browser.");
            }
        }

Mas você omitiu o código completo da sua classe e não dá para eu entender se getLocationserá chamada por ela ou por alguém que vá usar o serviço. Ou seja, não esta claro para quem lê e deseja recomendar qualquer melhoria a sua intenção com esse código. Consigo enxergar que você quer a latitude e longitude, mas para quem? Quem chama o serviço? Se for, porque guardar esses valores em propriedades da classe?

Fornece pra gente uma visão geral do que você quer com getLocation().

Aqui o codigo completo da classe

import { Component } from "@angular/core";
import { BoxService } from "./box.service";
import { TemperaturePanelComponent } from "../temperature.panel/temperature.panel.component";

@Component({
    moduleId: module.id,
    selector: 'box',
    templateUrl: './box.component.html'
})

export class BoxComponent{

    numbers;
    panels: TemperaturePanelComponent[] = [];
    service: BoxService;
    city;
    lat;
    long;

    constructor(service: BoxService) {

        this.service = service;
        this.numbers = [1,2,3,4,5,6];
        this.lat = 0;
        this.long = 0;
        this.getLocation();


        this.service.getCity(this.lat,this.long).subscribe(city => {
            this.city = city;
        }, error => console.log(error));

    }

    getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                this.lat = position.coords.latitude;
                this.long = position.coords.longitude; 
            });
        } else {
            alert("Sorry, geolocation is not supported by this browser.");
        }
    }



}

Quero pegar a latitude e longitude e passar como parametro pra funcao getCity.

No callback de navigator.geolocation.getCurrentPosition você tem acesso a lat e long? Certo? Então, é dentro desse callback que você chamará o seu service, pois terá já os dados que precisa.