I'm working through the tutorial at https://angular.io/docs/ts/latest/tutorial/toh-pt2.html and get the following error after creating the array of heroes:
Error: Error: Unexpected value 'AppComponent' declared by the module 'AppModule'
at new BaseException (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27)
at eval (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13274:35)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13261:53)
at RuntimeCompiler._compileComponents (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51)
at RuntimeCompiler._compileModuleAndComponents (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41)
at RuntimeCompiler.compileModuleAsync (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25)
at PlatformRef_._bootstrapModuleWithZone (localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9991:29)
at PlatformRef_.bootstrapModule (localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9984:25)
at Object.eval (localhost:3000/app/main.js:4:53)
Evaluating localhost:3000/app/main.js
Error loading localhost:3000/app/main.js
My app.module.ts file at this point is:
import { NgModule } from '@angular/core';
import { BrowserModule }from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
My app.components.ts file at this point is:
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component ({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
`
})
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' }
];
export class AppComponent {
title = 'Tour or Heroes';
heroes = HEROES;
}
Everything was working up to this point. New to Angular and not sure how to debug this.
Edit:
The error occurs in (index) at:
<!-- 2. Configure SystemJS -->
<script src = "systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
</head>
Thanks,
Decorators are related classes or variables which are following the declaration of the decorator.
In your code the @compoment
decorator is over const HEROES
and this must be over class AppComponent
.
So your code should be the following:
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
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' }
];
@Component ({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
`
})
export class AppComponent {
title = 'Tour or Heroes';
heroes = HEROES;
}
I'll quickly note that this error can be thrown from any manner of @Component
declaration error — Ie, even @Component({});
— (note the semicolon).
If you receive this error, make sure to check that your syntax is correct.
True as of 2.0.0-rc.6.
when i encounter it , i check it for a long time . finally , at the end of @Component({}) ,there is one more ';'. Unknown so
I had this error after adding some of my components from root folder in separate folder. The problem was with using ./filename for path to templateUrl and styleUrls, after removing ./ the error was gone.
In my case I had declared a class just over the component class definition like below. I have moved the class MyClass definition below the export class and it worked. So I assume that export class must be the first declaration in the component file.
class MyClass {
}
export class MyComponent implements OnInit {
如果您在同一文件上的应用程序组件声明之前有@Injectable()
类,则也可能存在此错误。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.