Неожиданное значение "AnyComponent", объявленное модулем "AppModule",

Я использую Angular2, и у меня возникла эта проблема при попытке использовать два класса в одном файле Typescript.

Во время компиляции не возникает никакой ошибки, но когда я пытаюсь выполнить страницу, console.log сообщает об этой ошибке:

Error: [email protected]://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</[email protected]://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:13261:21
    RuntimeCompiler</[email protected]://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:28
    RuntimeCompiler</[email protected]://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:36
    RuntimeCompiler</[email protected]://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:20
    PlatformRef_</[email protected]://www.my.app/panel-module/node_modules/@angular/core//bundles/core.umd.js:9991:20
    PlatformRef_</[email protected]://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</[email protected]://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:332:20
    Zone</Zone</[email protected]://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</[email protected]://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:365:24
    Zone</Zone</[email protected]://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:265:29
    [email protected]://www.my.app/panel-module/node_modules/zone.js/dist/zone.js:491:26
    F/</[email protected]://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/[email protected]://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

Ниже представлен мой компонент Typescript.

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

Ответ 1

Вы должны изменить порядок своих классов, тогда нет проблем, чтобы иметь несколько классов в одном файле. Причина в вашем случае, что 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;
}

Ответ 2

Вот как я его исправил:

Поместите объект 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
}

Ответ 3

FYI, в моем случае у меня просто была некоторая логика js, где она могла бы быть

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

изменено на

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

и ошибка была удалена