模块“AppModule”声明的意外值“AnyComponent”

Question

我正在使用 Angular2，但在尝试在同一个 Typescript 文件中使用两个类时遇到了这个问题。

在编译时没有给我任何错误，但是当我尝试执行页面时，console.log 给出了这个错误：

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

下面是我的组件打字稿文件。

// 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

仅供参考，我的情况是我有一些 js 逻辑，它可能是

<my-tag [HTML]="sourcesHtml ? sourcesHtml[i] : ''">

改为

<my-tag [HTML]="sourcesHtml[i]">

错误已被删除

Answer 2

你必须改变你的类的顺序，那么在同一个文件中有多个类是没有问题的。 因为在您的情况下，decorator @Component 现在正用于您的课程MyObject 而不是MyComponent！

decorator @Component 需要直接在您的组件定义前面！！

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

Answer 3

这是我修复它的方法：

把MyObject放到一个单独的文件中，然后导入。

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