CODEWITHSUNDEEP
javascriptangular
user967451
user967451

Reputation:

"mock-heroes.ts' is not a module" error from official Angular doc

I'm trying to follow the official Angular doc:

https://angular.io/tutorial/toh-pt2

but can't proceed due to this error:

Failed to compile.

C:/Users/username/Desktop/my-app/src/app/heroes/heroes.component.ts (3,24): 
File 'C:/Users/username/Desktop/my-app/src/app/mock-heroes.ts' is not a module.

My code is exactly the same as in the tutorial, this is really frustrating conming from the official doc and makes me not even want to learn angular :( Anyone have any idea how to get past it?

mock-heroes.ts:

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

hero.ts:

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

heroes.components.ts:

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {

    heroes = HEROES;

    constructor() { }

    ngOnInit() {
    }

}

heroes.component.html:

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

Upvotes: 4

Views: 2438

Answers (3)

vishal bhalerao
vishal bhalerao

Reputation: 11

I had same problem, But problem resolves when you save mock-heroes.ts and heroes.components.ts. if problem doesn't solve then stop ng serve and restart it again.

Upvotes: 0

David
David

Reputation: 83

I assume the OP has solved his issue but for anyone who ever comes across this issue, here we go.

I had the same exact issue just like yours. I checked through answers which stated to restart the editor or restart the server .i.e. ng serve. Both did not work for me.

I am relatively new to VS code (btw this is the IDE I am using) and also to angular2, hence this tutorial (Tutorial: Tour of Heroes).

The issue was that I had created mock-heroes.ts, populated it with the source code but did not save the contents due to a windows crash. VS code must have a cached version which retained the unsaved source. When I opened the IDE once more the file was intact but had not realized there was a blue dot on the files icon. Upon hovering over, it showed "1 unsaved file". Thus the issue that mock-heroes.ts is not a module, the file exists and I can import it, but it contains no saved code so it's not a module, yet.

CTRL + S ... sorted. ng server and it runs like a charm.

Moments after the biggest face palm in history I am writing this answer.

Upvotes: 5

Sir Mbuki
Sir Mbuki

Reputation: 1210

Adding to what @JamieBarker said, the said erro happens when you add a new class outside from your editor or keep running your angular cli ng serve.

Actually your editor or 'ng serve' is not able to find the newly created files.

I got the same error while using ng serve --open. I stopped it and used ng serve and it was fixed.

Upvotes: 0

Related Questions