TOH (4) Displaying a List fails to compile mock-heroes.js

[kylegoetz]

My code is copied straight from the tutorial. It says to make the file

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' }
];

I did this and get the following error:

ERROR in ./src/app/mock-heroes.js
Module parse failed: Unexpected token (3:19)
You may need an appropriate loader to handle this file type.
| import { Hero } from './hero';
| 
| export const HEROES: Hero[] = [
|   { id: 11, name: 'Mr. Nice' },
|   { id: 12, name: 'Narco' },
ℹ ｢wdm｣: Failed to compile.

However, if I remove the : Hero[] from the file, it compiles and works correctly.

I just installed angular-cli a few hours ago with npm install -g @angular/cli and then followed the tutorial.

So I'm wondering if there's a TypeScript issue where whatever compiles my TS is a version that doesn't allow the implicit casting that appears to be going on in mock-heroes.js (array is id'd as Hero[] but elements are actual JS objects), so is the tutorial going off some TS feature that doesn't exist in whatever is installed by angular-cli?

[j0se]

And your heroes.component.ts is correct?? how do you have defined heroes? Like this heroes: Hero[];

[spencerbartz]

I'm having the same issue. I'm sure everything else is correct. I wouldn't have gotten to this step in the tutorial if it wasn't. The tutorial does not tell you to declare heroes: Hero[]; in heroes.component.ts. It says to do this: heroes = HEROES;

./src/app/mock-heroes.js
Module parse failed: Unexpected token (3:19)
You may need an appropriate loader to handle this file type.
| import { Hero } from './hero';
| 
| export const HEROES: Hero[] = [
|   { id: 11, name: 'Mr. Nice' },
|   { id: 12, name: 'Narco' },

[bparrish99]

Same issue for me, thought I was going nuts. (Might still be going nuts.)

UPDATE: mock-heroes and hero need to have the ".ts" extension, not ".js".

[kylegoetz]

Coming back to this, is the problem that the file is called mock-heroes.js instead of .ts???

[bparrish99]

Yes, try it with .ts, and it works. I had the same issue.

[kylegoetz]

Coming back to this, is the problem that the file is called mock-heroes.js instead of .ts???