请添加@Pipe/@Directive/@Component 注解。错误答案

【问题标题】：Please add a @Pipe/@Directive/@Component annotation. Error请添加@Pipe/@Directive/@Component 注解。错误
【发布时间】：2018-03-14 23:06:15
【问题描述】：

我在这里陷入了困境。我收到这样的错误。

 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 导入声明时出现此错误。我在这里错过了什么吗。

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

不是上述具体示例的解决方案，但您收到此错误消息的原因可能有很多。当我不小心将共享模块添加到模块声明列表而不是导入时，我得到了它。

在 app.module.ts 中：

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

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

【讨论】：

同样，当我不小心将我的一个 Angular 应用服务的名称粘贴到 declarations 数组中时，我得到了这个错误。（它应该只在文件更下方的providers 数组中。）

【解决方案2】：

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

@Component({ ... })

export class ExampleClass{}

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

修复：

export class ExampleClass{}

@Component ({ ... })

export class ComponentClass{}

【讨论】：

【解决方案3】：

您的LoginComponent 文件中的导入有错字

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

是小写c，不是大写

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

【讨论】：

我用小写还是一样的问题
"Component" 大写字母 C 现在是强制性的。不允许使用小盒子。
@Praveen Patel 什么？装饰器Component 从来没有小写c
我不知道在过去的版本中，我使用的是 Angular 10。在这种情况下，如果是小情况，它会出错。

【解决方案4】：

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

【讨论】：

如果你在对 angular 的 spec.ts 文件进行浅层测试时得到这个，这是正确的答案！检查你的导入，对我来说它是声明中的 RouterTestingModule 而不是导入！

【解决方案5】：

下面是另一种解决方案，这是我的错，发生时我将HomeService 放入app.module.ts 的声明部分，而我应该将HomeService 放入Providers 部分 正如您在下面看到的 declaration:[] 中的 HomeService 不在正确的位置，而 HomeService 在 Providers :[] 部分中应该在正确的位置。

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

希望对你有所帮助。

【讨论】：

【解决方案6】：

当我在组件装饰器中使用另一个类而不是组件时，我遇到了同样的错误。

组件类必须紧跟在组件装饰器之后

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


// THIS CAUSE ISSUE MOVE THIS UP TO COMPONENT DECORATOR
/**
* Node for to-do item
*/
 export class TodoItemNode {
 children: TodoItemNode[];
 item: string;
}


 export class SmsgtreconComponent implements OnInit {

将 TodoItemNode 移动到组件装饰器的顶部后，它起作用了

解决方案

// THIS CAUSE ISSUE MOVE THIS UP TO COMPONENT DECORATOR
/**
* Node for to-do item
*/
 export class TodoItemNode {
 children: TodoItemNode[];
 item: string;
}


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


 export class SmsgtreconComponent implements OnInit {

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我声明了一个没有 styleUrls 属性的组件，如下所示：

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

代替：

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

添加 styleUrls 属性解决了这个问题。

【讨论】：

【解决方案9】：

如果导入错误，就会出现上述错误。例如，有时可能会在 TestBed.configureTestingModule 中添加服务文件。并且在导入 Material 组件时，例如 import from

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

不是来自

import {MatDialogModule} from '@angular/material'

【讨论】：

格式化你的答案

【解决方案10】：

就我而言，我错误地添加了这个：

@Component({
    selector: 'app-some-item',
    templateUrl: './some-item.component.html',
    styleUrls: ['./some-item.component.scss'],
    providers: [ConfirmationService]
})

declare var configuration: any;

而正确的形式是：

declare var configuration: any;

@Component({
    selector: 'app-some-item',
    templateUrl: './some-item.component.html',
    styleUrls: ['./some-item.component.scss'],
    providers: [ConfirmationService]
})

【讨论】：

【解决方案11】：

我试图在共享模块（导入和导出）中使用 BrowserModule。这是不允许的，所以我不得不改用 CommonModule 并且它起作用了。

【讨论】：

【解决方案12】：

当我错误地将服务添加到 app.module.ts 中的声明部分时，我收到了此错误

【讨论】：

【解决方案13】：

我讨厌这个，但重新启动 ng serve 对我有用。这可能是因为我在项目中创建了新的文件夹和文件，而 angular-cli 没有检测到它们。

【讨论】：