web-dev-qa-db-fra.com

Ajoutez une annotation @ Pipe/@ Directive/@ Component. Erreur

Je suis coincé dans une situation ici. Je reçois une erreur comme celle-ci. 

 compiler.es5.js:1694 Uncaught Error: Unexpected value 'LoginComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (compiler.es5.js:1694)
    at compiler.es5.js:15595
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15577)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26965)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26938)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26867)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/main.ts (main.ts:11)

Mon composant de connexion ressemble à ceci

import { Component } from '@angular/Core';

@Component({
    selector:'login-component',
    templateUrl:'./login.component.html'
})

export class LoginComponent{}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule} from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './main/app.component';

import {LoginComponent} from './login/login.component';


const appRoutes: Routes = [
  {path:'', redirectTo:'login', pathMatch:'full'},
  { path: 'home', component: AppComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

J'ai eu cette erreur lorsque j'essaie d'importer LoginComponent dans une déclaration. Est-ce que j'ai râté quelque chose. 

angularangular2-template
11
Krishna

Vous avez une faute de frappe dans l'importation dans le fichier de votre LoginComponent

import { Component } from '@angular/Core';

c minuscule, pas majuscule

import { Component } from '@angular/core';

7
Almost Handsome

Ce n'est pas une solution à l'exemple concret ci-dessus, mais ce message d'erreur peut être dû à de nombreuses raisons. Je l'ai eu quand j'ai accidentellement ajouté un module à la liste des déclarations de module et non à l'import.

Dans app.module.ts:

import { SharedModule } from './modules/shared/shared.module';

@NgModule({
  declarations: [
     // Should have been added here...
  ],
  imports: [
     SharedModule //wrong
  ],
6
andersh

J'ai eu un composant déclaré sans la propriété styleUrls, comme ceci: 

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html'
})

au lieu de: 

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html',
    styleUrls: ['./server.component.css']
})

L'ajout de la propriété styleUrls a résolu le problème. 

1
Silviu Panait

L'erreur susmentionnée se produit si une importation incorrecte est effectuée . Par exemple, des fichiers de service peuvent parfois être ajoutés à TestBed.configureTestingModule .

import {MatDialogModule} from '@angular/material/dialog'

pas de

import {MatDialogModule} from '@angular/material'
1
harshith hanthur manjunath