Unexpected value 'AnyComponent' declared by the module 'AppModule'

Question

I'm using Angular2 and I got this problem when tryng to use two classes in the same Typescript file.

At compile time doesn't give me any error but when I try to execute the page the console.log is giving this error:

Error: BaseException@http://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27     CompileMetadataResolver</CompileMetadataResolver.prototype.getNgModuleMetadata/<@http://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:13274:35     CompileMetadataResolver</CompileMetadataResolver.prototype.getNgModuleMetadata@http://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:13261:21     RuntimeCompiler</RuntimeCompiler.prototype._compileComponents@http://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:28     RuntimeCompiler</RuntimeCompiler.prototype._compileModuleAndComponents@http://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:36     RuntimeCompiler</RuntimeCompiler.prototype.compileModuleAsync@http://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:20     PlatformRef_</PlatformRef_.prototype._bootstrapModuleWithZone@http://www.my.app/panel-module/node_modules/@angular/core//bundles/core.umd.js:9991:20     PlatformRef_</PlatformRef_.prototype.bootstrapModule@http://www.my.app/panel-module/node_modules/@angular/core//bundles/core.umd.js:9984:20     @http://www.my.app/panel-module/app/main.js:4:1     @http://www.my.app/panel-module/app/main.js:1:31     @http://www.my.app/panel-module/app/main.js:1:2     Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:332:20     Zone</Zone</Zone.prototype.run@http://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:225:25     scheduleResolveOrReject/<@http://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:586:53     Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:365:24     Zone</Zone</Zone.prototype.runTask@http://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:265:29     drainMicroTaskQueue@http://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:491:26     F/</g@http://www.my.app/panel-module/node_modules/core-js/client/shim.min.js:8:10016     F/<@http://www.my.app/panel-module/node_modules/core-js/client/shim.min.js:8:10138     a.exports/k@http://www.my.app/panel-module/node_modules/core-js/client/shim.min.js:8:14293      Evaluating http://www.my.app/panel-module/app/main.js     Error loading http://www.my.app/panel-module/app/main.js 

Below is my component typescript file.

// MyComponent.ts

import { Component, OnInit } from '@angular/core';  @Component({   selector: 'my-app',   templateUrl: '/path/to/view', })  export class MyObject {   id: number; }   export class MyComponent {    obj: MyObject;     // unecessary code } 

Answer 1

You have to change the order of your classes, then there is no problem to have multiple classes in the same file. Cause in your case that decorator @Component is now being used for your class MyObject instead of MyComponent !

The decorator @Component needs to be directly in front of your Component definition!!

import { Component, OnInit } from '@angular/core';   export class MyObject1 {   id: number; }  @Component({   selector: 'my-app',   templateUrl: '/path/to/view', }) export class MyComponent {    obj: MyObject;     // unecessary code }  export class MyObject2 {   id: number; }