Добавьте примечание @Pipe/@Directive/@Component. ошибка

Я застрял в ситуации здесь. У меня такая ошибка.

 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 в объявление. Я что-то упустил.

Ответы

Ответ 1

У вас есть опечатка для импорта в вашем файле LoginComponent

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

В нижнем регистре c, а не в верхнем регистре

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

Ответ 2

Не решение конкретного примера выше, но может быть много причин, почему вы получаете это сообщение об ошибке. Я понял, когда случайно добавил общий модуль в список объявлений модулей, а не в импорт.

В app.module.ts:

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

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

Ответ 3

Если вы экспортируете другой класс в этом модуле, убедитесь, что он не находится между @Component и вашим ClassComponent. Например:

@Component({ ... })

export class ExampleClass{}

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

FIX:

export class ExampleClass{}

@Component ({ ... })

export class ComponentClass{}

Ответ 4

Ошибка Above возникает, если выполняется какой-либо неправильный импорт. Например, иногда файлы служб могут быть добавлены в TestBed.configureTestingModule. А также при импорте компонента Материал, например, импорт из

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

не из

import {MatDialogModule} from '@angular/material'

Ответ 5

У меня был компонент, объявленный без свойства styleUrls, например:

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

вместо:

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

Добавление в свойство styleUrls решило проблему.

Ответ 6

core.js:1673 ERROR Error: Uncaught (in promise): Error: Unexpected value 'Options' imported by the module 'RapJourneyModule'. Please add a @NgModule annotation.
Error: Unexpected value 'Options' imported by the module 'RapJourneyModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:1021)
    at compiler.js:10583
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10558)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23876)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23817)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
    at core.js:4985
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Я испробовал все вышеперечисленное решение, но все еще имею эту проблему... пожалуйста, дайте мне знать, если кто-нибудь знает точное решение. Спасибо... :-(

Ответ 7

Эта ошибка появляется, когда вы ошибочно добавляете общий сервис в "объявление" в своих модулях приложения вместо того, чтобы добавлять его в "провайдер".