CODEWITHSUNDEEP
angular
Bart Alen
Bart Alen

Reputation: 69

Angular 2 (tour of heroes) tutorial: ERROR in src/app/mock-heroes.ts(1,22): error TS2307: Cannot find module './hero'

I am going through the tutorial and doing everything as it says until I get to this section of the tutorial where it throws me this error. I have the hero class defined so I am confused as to why it is throwing me this error. I have restarted the program all together and even re-created the mock-heroes type script. I am using Visual studio code so here is my code for the two files:

Hero class defined in hero.ts:

export class Hero {
    id: number;
    name: string;
}

mock-heroes.ts:

import { Hero } from './hero'; <----- Error is coming from here 

export const HEROES: Hero[] = [
    { id: 11, name: 'Deku' },
    { id: 12, name: 'All Might' },
    { id: 13, name: 'Todoroki' },
    { id: 14, name: 'Naruto' },
    { id: 15, name: 'Ichigo' },
    { id: 16, name: 'Goku' },
    { id: 17, name: 'Vegeta' },
    { id: 18, name: 'Natsu' },
    { id: 19, name: 'Megaman' },
    { id: 20, name: 'One Punch Man' }
  ];

Folder structure on laptop:

angular-tour-of-heroes/src/
    app/
        mock-heroes.ts
        heroes/
            hero.ts

Upvotes: 1

Views: 3085

Answers (5)

Akilesh
Akilesh

Reputation: 51

I just faced a similar error 

Module not found: Error: Can't resolve '../mock-heroes' in 'E:\Angular\project1\src\app'

ERROR in src/app/hero.service.ts:2:22 - error TS2307: Cannot find module '../hero1' or its corresponding type declarations.

Folder structure:

project1/src/
          app/
          hero1.ts

and I spent some time to short out this error, Finally the problem is that I have imported the file which is in the different folder

import { Hero } from '../hero1.ts';

If you notice '../hero1' there is no such path in my folder structure just by removing a dot './hero1' the code compilers properly.

After removing a dot

import { Hero } from './hero1';

Upvotes: 0

Nicol&#225;s Anastasiadis
Nicol&#225;s Anastasiadis

Reputation: 111

Move the hero.ts to the folder src/app/hero.ts instead of src/app/hero/hero.ts.

I know Angular indicates creating this hero folder. Just dismiss it.

Upvotes: 0

ingrstevr
ingrstevr

Reputation: 11

Following the Angular Tutorial: create a hero interface instructions, the location of hero.ts should be in the app folder ( here: src/app/hero.ts ) and not src/app/heroes/hero.ts

With that file structure, the path in heroes.component.ts should be:

import { Hero } from '../hero';

Upvotes: 1

Paras Sharma
Paras Sharma

Reputation: 61

Yes it's because of folder structure do change the import as below

import { Hero } from './heroes/hero';

Upvotes: 1

Mykola Zatonatskiy
Mykola Zatonatskiy

Reputation: 349

Your solution is to change path to:

import { Hero } from './heroes/hero';

Upvotes: 2

Related Questions