Valeur inattendue 'AnyComponent" déclarée par le module "AppModule'

Je suis en utilisant Angular2 et j'ai eu ce problème lorsque tryng à l'utilisation de deux classes dans le même fichier d'enregistrement de fichier.

Au moment de la compilation ne me donne pas d'erreur mais quand j'essaie d'exécuter la page de la console.le journal donne cette erreur:

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

Ci-dessous est mon composant tapuscrit de fichier.

//Moncomposant.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
}
InformationsquelleAutor Herlon Aguiar | 2016-08-17
  1. 36

    Vous devez changer l'ordre de vos classes, alors il n'y a pas de problème d'avoir plusieurs classes dans un même fichier.
    Cause dans votre cas, le decorator @Component est maintenant utilisée pour votre classe MyObject au lieu de MyComponent !

    La decorator @Component doit être directement en face de votre définition de Composant!!

    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;
}
    • Merci, j'ai corrigé sur l'autre, mais je ne savais pas pourquoi j'avais besoin de le faire.
    • parce que decorator @Component doit être en face de votre composant. sans cette décorateur, votre composant n'est pas un composant réel.. sinon, c'est une classe..
    • merci, de sorte que le composant doit tout d'abord définies avant d'être utilisé dans le module.
    • J'ai eu le problème inverse; j'ai voulu définir un Directive mais a l'aide de la Component décorateur. Merci!
    InformationsquelleAutor mxii
  2. 2

    Voici comment je l'ai corrigé:

    Mettre le MyObject dans un fichier séparé et d'importation de lui.

    //MyObject.ts

    export class MyObject {
id: number;
}

    //Moncomposant.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
}
    • Pourquoi avez-vous décidé de le faire au lieu de simplement placer votre myObject avant votre composant, comme @mxii suggéré?
    • Je l'ai fait avant de @mxii post la réponse. Je ne sais pas quelle est la bonne réponse, mais cela a fonctionné pour moi.
    • cool man @herlon-aguiar
    InformationsquelleAutor Herlon Aguiar
  3. 0

    Pour info, mon cas, j'ai juste eu le js logique où il pourrait'nd être

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

    changé à 

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

    et l'erreur a été supprimée

    InformationsquelleAutor bresleveloper