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
}
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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments