Herlon Aguiar Herlon Aguiar - 3 months ago 27
TypeScript Question

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

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

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