wake-up-neo.com

Bitte fügen Sie eine @ Pipe/@ Directive/@ Component-Anmerkung hinzu. Error

Ich bin hier in einer Situation festgefahren. Ich bekomme so einen Fehler. 

 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)

Meine Login-Komponente sieht so aus

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

Ich habe diese Fehlermeldung erhalten, als ich versuche, LoginComponent in die Deklaration zu importieren. Fehlt mir hier etwas? 

angularangular2-template
11
Krishna

Sie haben einen Tippfehler beim Import in Ihrer LoginComponent-Datei

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

Es ist Kleinbuchstaben c, nicht Großbuchstaben

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

7
Almost Handsome

Keine Lösung für das konkrete Beispiel oben, aber es gibt viele Gründe, warum Sie diese Fehlermeldung erhalten. Ich habe es bekommen, als ich versehentlich ein Modul zur Moduldeklarationsliste hinzugefügt habe und nicht zum Importieren.

In app.module.ts:

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

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

Wenn Sie eine andere Klasse in diesem Modul exportieren, stellen Sie sicher, dass sie nicht zwischen @Component Und Ihrem ClassComponent liegt. Zum Beispiel:

@Component({ ... })

export class ExampleClass{}

export class ComponentClass{}  --> this will give this error.

FIX:

export class ExampleClass{}

@Component ({ ... })

export class ComponentClass{}
3
Victor Valeanu

Ich hatte eine Komponente ohne die styleUrls-Eigenschaft wie folgt deklariert: 

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

anstatt: 

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

Durch das Hinzufügen der styleUrls-Eigenschaft wurde das Problem behoben. 

1
Silviu Panait

Der obige Fehler tritt auf, wenn ein falscher Import durchgeführt wurde ..__ Zum Beispiel können in TestBed.configureTestingModule ..__ Servicedateien hinzugefügt werden

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

nicht von

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

Sie erhalten diese Fehlermeldung, wenn Sie in Ihren Appmodulen fälschlicherweise Shared Service zu "Deklaration" hinzufügen, anstatt es zu "Provider" hinzuzufügen.

0
trustidkid