Angular 13 error with variables of the same type

Question

Good evening everyone, while developing an application with Angular 13 I encountered an error that puzzles me:

Type 'Geolocation' is missing the following properties from type 'Geolocation': ip, location, domains, as, and 2 more.

the application is an ip address tracker and it is a task found on FE mentor website. practically in the header component I take the ip that the user types and execute the call to the api res geo.ipfy and the result I leave it to a subject of type Geolocation that I created in my Service then in the tracker-info component I subscribe and I assign the result to a variable of type Geolocation I leave you the code of the single components below for a better understanding:

geolocation.model.ts

export interface Location {
  country: string;
  region: string;
  city: string;
  lat: number;
  lng: number;
  postalCode: string;
  timezone: string;
  geonameId: number;
}

export interface As {
  asn: number;
  name: string;
  route: string;
  domain: string;
  type: string;
}

export interface Proxy {
  proxy: boolean;
  vpn: boolean;
  tor: boolean;
}

export interface Geolocation {
  ip: string;
  location: Location;
  domains: string[];
  as: As;
  isp: string;
  proxy: Proxy;
}

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { TrackerService } from '../tracker.service';

@Component({
  selector: 'maury-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
  destory$: Subject<any>;
  constructor(private trackerService: TrackerService) {
    this.destory$ = new Subject<any>();
  }

  ngOnInit(): void {}

  onSubmit(value: string) {
    this.trackerService
      .GetInfoTrackerIp(value)
      .pipe(takeUntil(this.destory$))
      .subscribe((resp) => {
        this.trackerService.trackerInformation$.next(resp);
      });
  }
}

tracker.service.ts

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TrackerService {
  header: HttpHeaders = new HttpHeaders({
    'Content-Type': 'application/json',
  });
  trackerInformation$: Subject<Geolocation>;
  constructor(private http: HttpClient) {
    this.trackerInformation$ = new Subject<Geolocation>();
  }

  GetInfoTrackerIp(ip: string): Observable<Geolocation> {
    let params = new HttpParams();
    params = params.append('apiKey', 'My_api_key');
    params = params.append('ipAddress', ip);
    return this.http.get<Geolocation>(
      'https://geo.ipify.org/api/v2/country,city,vpn',
      { params }
    );
  }
}

info-tracker.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { Geolocation } from '../models/geolocation.model';
import { TrackerService } from '../tracker.service';

@Component({
  selector: 'maury-info-tracker',
  templateUrl: './info-tracker.component.html',
  styleUrls: ['./info-tracker.component.scss'],
})
export class InfoTrackerComponent implements OnInit, OnDestroy {
  infoTracker: Geolocation;
  destroy$: Subject<any>;

  constructor(private trackerService: TrackerService) {
    this.destroy$ = new Subject<any>();
  }

  ngOnDestroy(): void {
    this.destroy$.unsubscribe();
  }

  ngOnInit(): void {
    this.GetInfoTracker();
  }

  GetInfoTracker() {
    this.trackerService.trackerInformation$
      .pipe(takeUntil(this.destroy$))
      .subscribe((resp) => {
        this.infoTracker = resp; <---- this generates the error
      });
  }
}

for completeness I also leave you my tsconfig.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Answer 1

Resolved! I didn't import the model into service.ts thanks @akotech ?