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

Datetime:2016-08-23 02:34:52          Topic: AngularJS           Share

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

}

Solution :

Here is how I fixed it:

Put the MyObject into a separated file and import him.

// MyObject.ts

export class MyObject {

id: number;

}

// MyComponent.ts

import { Component, OnInit } from '@angular/core';

import { MyObject } from 'path/to/MyObject';

@Component({

selector: 'my-app',

templateUrl: '/path/to/view',

})

export class MyComponent {

obj: MyObject;

// unecessary code

}

Solution 2:

You have to change the order of the classes, then there is no problem to have multiple classes in the same file.

Cause in the case that decorator @Component is now being used for the class MyObject instead of MyComponent !

The decorator @Component needs to be directly in front of the 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;

}





About List