我陷入了困境。我收到这样的错误。
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';
不是上面具体示例的解决方案,但可能有很多原因导致您收到此错误消息。当我意外地将共享模块添加到模块声明列表而不是导入时,我得到了它。
在app.module.ts中:
import { SharedModule } from './modules/shared/shared.module';
@NgModule({
declarations: [
// Should not have been added here...
],
imports: [
SharedModule
],
如果执行了任何错误导入,则会出现Above错误。例如,有时可以在TestBed.configureTestingModule中添加Service文件。还可以在导入Material组件时进行导入
import {MatDialogModule} from '@angular/material/dialog'
不是来自
import {MatDialogModule} from '@angular/material'
我有一个声明没有styleUrls属性的组件,如下所示:
@Component({
selector: 'app-server',
templateUrl: './server.component.html'
})
代替:
@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styleUrls: ['./server.component.css']
})
添加styleUrls属性解决了这个问题。
如果要在该模块中导出另一个类,请确保它不在@Component
和ClassComponent
之间。例如:
@Component({ ... })
export class ExampleClass{}
export class ComponentClass{} --> this will give this error.
固定:
export class ExampleClass{}
@Component ({ ... })
export class ComponentClass{}