请添加@ Pipe/@ Directive/@ Component注释.错误

Question

我陷入了困境.我收到这样的错误.

 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)

我的登录组件看起来像这样

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

当我尝试将LoginComponent导入声明时出现此错误.我在这里错过了一些东西.

Answer 1

不是上面具体示例的解决方案,但可能有很多原因导致您收到此错误消息.当我意外地将模块添加到模块声明列表而不是导入时,我得到了它.

在app.module.ts中:

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

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

Answer 2

如果您要导出该模块中的另一个类，请确保它不在@Component您的ClassComponent. 例如：

@Component({ ... })

export class ExampleClass{}

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

使固定：

export class ExampleClass{}

@Component ({ ... })

export class ComponentClass{}

Answer 3

您LoginComponent的文件导入中有拼写错误

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

它是小写的c,而不是大写的

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

Answer 4

当您错误地将共享服务添加到应用模块中的“声明”而不是将其添加到“提供者”时，您会收到此错误。

Answer 5

就我而言，我不小心在声明中添加了包，但它应该在导入中。

Answer 6

另一个解决方案如下，这是我的错，当发生这种情况时，我将声明部分HomeService放入其中，而我应该放入提供者部分，如下所示，它不在正确的位置，而 在应该位于正确位置的部分。app.module.tsHomeServiceHomeServicedeclaration:[]HomeServiceProviders :[]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule  } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component'; 
import { HomeService } from './components/home/home.service';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,  
    HomeService // You will get error here
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [
    HomeService // Right place to set HomeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

希望这对你有帮助。