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

Please add a @Pipe/@Directive/@Component annotation. Error

我被困在这里了。我收到这样的错误。

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

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

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

是小写c,不是大写

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

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

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

不是来自

import {MatDialogModule} from '@angular/material'

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

在app.module.ts中:

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

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

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

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

而不是:

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

添加 styleUrls 属性 解决了问题。

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

@Component({ ... })

export class ExampleClass{}

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

修复:

export class ExampleClass{}

@Component ({ ... })

export class ComponentClass{}

当您错误地将共享服务添加到应用模块中的 "declaration" 而不是将其添加到 "provider" 时,您会收到此错误。

另一个解决方案是下面的方法,我的错是我把 HomeService 放在 声明部分 app.module.ts 而我应该把 [= 提供商部分 中的 11=] 正如您在下面看到的 HomeServicedeclaration:[] 中的位置不正确,而 HomeService 在 [=17= 中] 部分应该放在正确的位置。

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

希望对您有所帮助。

当我使用另一个 class 而不是组件装饰器下的组件时,我遇到了同样的错误。

Component class must come just after the component decorator

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

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

在我的例子中,我错误地添加了这个:

@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]
})    

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

我在 app.module.ts

中错误地向声明部分添加服务时出现此错误

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