Unerwarteter Wert 'AnyComponent' vom Modul 'AppModule'

Question

Ich benutze Angular2 und ich habe dieses Problem beim Versuch, zwei Klassen in der gleichen Typoskript-Datei zu verwenden.

Beim Kompilieren nicht geben Sie mir einen Fehler, aber wenn ich versuche, die Seite der console.log schenkt diesen Fehler auszuführen:

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 

Unten ist meine Komponente Typoskript-Datei.

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

Sie haben die Reihenfolge der Klassen zu ändern, dann ist es kein Problem, mehrere Klassen in der haben gleiche Datei. Ursache in Ihrem Fall, dass decorator @Component jetzt für Ihre Klasse MyObject statt MyComponent verwendet wird!

Die decorator @Component muss direkt vor Ihrer Komponentendefinition sein !!

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 2

Hier ist, wie ich es fest:

Setzen Sie die MyObject in eine getrennte Datei und ihn importieren.

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

Answer 3

FYI, meinem Fall hatte ich nur einige js Logik, wo es

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

geändert

sein could'nd wurde

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

und Fehler entfernt