How to import { Athlete } from "app/Athlete"?

Question

I stucked. I am doing example Angular application from one of the books, where are sometimes mistakes in the code. And I can not find solution for one of them.

After running the app, I am getting an error:

ERROR in src/app/app.component.ts:2:25 - error TS2307: Cannot find module 'app/Athlete' or its corresponding type declarations.

2 import { Athlete } from "app/Athlete";

My code is below. tsconfig.json:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
]
}

app.component.ts:

import { Component } from '@angular/core';
import { Athlete } from "app/Athlete";

@Component({
  selector: 'app-root',
  template: `<h1>Pięciu najlepszych zawodników w Kona</h1>
  <app-athlete-list (selected)=showDetails($event)>Wczytywanie listy zawodników...</app-athlete-list>
  Wybrałeś: {{selectedAthlete}}`
})
export class AppComponent {
  selectedAthlete: string;

  constructor (){
    this.selectedAthlete="żaden";
  }

  showDetails(selectedAthlete: Athlete) {
    this.selectedAthlete=selectedAthlete.name;
  }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { AthleteService } from './athlete.service';
import { AthleteListComponent } from './athlete-list.component';
import { AthleteComponent } from './athlete.component';

@NgModule({
  declarations: [
    AppComponent,
    AthleteListComponent,
    AthleteComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [AthleteService],
  bootstrap: [AppComponent]
})
export class AppModule { }

athlete.ts:

export class Athlete {
  name: string;
  country: string;
  time: string;
}

NOTE: Please note, that athlete.ts is in the same directory as app.component.ts.

I tried already this fix, but did not work. And could not find anything else. I will appreciate for your help.

what happens when you have import { Athlete } from "./Athlete"; — Sajeetharan, Jul 19 '20 at 19:04
Also I don't know which IDE you are using, but in IntelliJ if you delete the import and then right click on error in code it will auto import the file for you from the correct path. — , Jul 19 '20 at 19:06
@E.Maggini I use Notepad++ currently, and just compile with Angular CLI — bakunet, Jul 19 '20 at 19:08
@Sajeetharan dem, it worked! I missed a thing, that in **app.module.ts** all class imports are with `from './`. Thank you! — bakunet, Jul 19 '20 at 19:12
It comes with a 30 days trial and personally I think it is well worth the purchase cost. You should check it out. :) — , Jul 20 '20 at 00:28
@E.Maggini thenks, I will consider it. But my target is to use Angular with ASP.NET Core, and TS is well supported in VS 2017, as far as I know. But for learning with books and documentation, maybe I will try **IntelliJ**, if I will get tired with **Notepad++** :D — bakunet, Jul 20 '20 at 18:06

score 0 · Accepted Answer · answered Jul 19 '20 at 19:07

0

Change it to:

import { Athlete } from 'src/app/Athlete';

answered Jul 19 '20 at 19:07

Peter Haddad

78,874
25
140
134

It works, same like approach of @Sajeetharan : `import { Athlete } from "./Athlete";` Thank you guys. – bakunet Jul 19 '20 at 19:14

score 0 · Answer 2 · answered Jul 19 '20 at 19:13

0

You are having the wrong path, As i mentioned in the comment change it to,

import { Athlete } from "./Athlete";

answered Jul 19 '20 at 19:13

Sajeetharan

216,225
63
350
396

How to import { Athlete } from "app/Athlete"?

2 Answers2