问题描述
我正在使用Angular2,尝试在同一Typescript文件中使用两个类时遇到了这个问题.
I'm using Angular2 and I got this problem when tryng to use two classes in the same Typescript file.
在编译时不会给我任何错误,但是当我尝试执行该页面时,console.log会显示此错误:
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
// 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
}
推荐答案
您必须更改类的顺序,因此在同一个文件中包含多个类是没有问题的.在您的情况下,导致decorator @Component
现在用于您的类MyObject
而不是MyComponent
!
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
!
decorator @Component
必须直接在组件定义的前面!
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;
}
这篇关于模块"AppModule"声明的异常值"AnyComponent"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!