请添加 @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=] 正如您在下面看到的 HomeService
在 declaration:[]
中的位置不正确,而 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 没有检测到它们。
我被困在这里了。我收到这样的错误。
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=] 正如您在下面看到的 HomeService
在 declaration:[]
中的位置不正确,而 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 没有检测到它们。