Stack Overflow en español Asked by Lorena Acosta on August 27, 2021
Estoy haciendo un proyecto en Angular 9, recientemente ya no puedo desplegarlo
porque me sale este error.
Inicialmente me salia que no identificaba un ID luego comenté algunas secciones
del proyecto y volvi a compilar, ahora me sale este error.
Hasta donde investigué, tiene que ver con el AppMODULE.TS
La traza de error es:
** compiler.js:2281 Uncaught Error: Unexpected value 'FormControl' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (compiler.js:2281)
at compiler.js:20987
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:20962)
at JitCompiler._loadModules (compiler.js:26724)
at JitCompiler._compileModuleAndComponents (compiler.js:26707)
at JitCompiler.compileModuleAsync (compiler.js:26669)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:224)
at compileNgModuleFactory__PRE_R3__ (core.js:41948)
at PlatformRef.bootstrapModule (core.js:42342)
**
Primero me salía un Uncaught error con ‘id’, luego coomente algunas secciones que tenian id, porque no encontraba el error,
ahora me salta este error.
este es mi appmodule.ts
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgSelectModule } from '@ng-select/ng-select';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
import { NgxPaginationModule } from 'ngx-pagination';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { SidebarComponent } from './shared/sidebar/sidebar.component';
import { FooterComponent } from './shared/footer/footer.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { CategoriaComponent } from './components/parametricos/categoria/categoria.component';
import { CategoriaEditComponent } from './components/parametricos/categoria/categoria-edit.component';
import { MediosPagoComponent } from './components/parametricos/medios-pago/medios-pago.component';
import { MediosPagoEditComponent } from './components/parametricos/medios-pago/medios-pago-edit.component';
import { CategoriaListarComponent } from './components/parametricos/categoria/categoria-listar.component';
import { MediosPagoListarComponent } from './components/parametricos/medios-pago/medios-pago-listar.component';
import { ClienteEditComponent } from './components/parametricos/cliente/cliente-edit.component';
import { ClienteListarComponent } from './components/parametricos/cliente/cliente-listar.component';
import { ProductoComponent } from './components/parametricos/producto/producto.component';
import { ProductoEditComponent } from './components/parametricos/producto/producto-edit.component';
import { ProductoListarComponent } from './components/parametricos/producto/producto-listar.component';
import { ProductoListar2Component } from './components/parametricos/producto/producto-listar2.component';
import { ReservaComponent } from './components/parametricos/reserva/reserva.component';
import { ReservEditComponent } from './components/parametricos/reserva/reserv-edit.component';
import { ReservaListComponent } from './components/parametricos/reserva/reserva-list.component';
import { ServicioComponent } from './components/parametricos/servicio/servicio.component';
import { ServicioListarComponent } from './components/parametricos/servicio/servicio-listar.component';
import { ServicioEditComponent } from './components/parametricos/servicio/servicio-edit.component';
import { EmpleadoComponent } from './components/parametricos/empleado/empleado.component';
import { EmpleadoEditComponent } from './components/parametricos/empleado/empleado-edit.component';
import { EmpleadoListarComponent } from './components/parametricos/empleado/empleado-listar.component';
import { CategoriaListar2Component } from './components/parametricos/categoria/categoria-listar2.component';
import { ServicioListar2Component } from './components/parametricos/servicio/servicio-listar2.component';
(otro bloque de código)
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
SidebarComponent,
FooterComponent,
DashboardComponent,
CategoriaComponent,
CategoriaEditComponent,
MediosPagoComponent,
MediosPagoEditComponent,
CategoriaListarComponent,
MediosPagoListarComponent,
ProductoComponent,
ClienteEditComponent,
ClienteListarComponent,
ProductoEditComponent,
ProductoListarComponent,
ReservaComponent,
ReservEditComponent,
ReservaListComponent,
ServicioComponent,
ServicioListarComponent,
ServicioEditComponent,
EmpleadoComponent,
EmpleadoEditComponent,
EmpleadoListarComponent,
CategoriaListar2Component,
ProductoListar2Component,
ServicioListar2Component
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
HttpClientModule,
NgbModule,
NgSelectModule,
NgxPaginationModule,
FormControl, FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Este es el error:
compiler.js:2281 Uncaught Error: Unexpected value ‘FormControl’
imported by the module ‘AppModule’. Please add a @NgModule annotation
Tienen idea de que puede andar mal?
El mensaje puede aparecer por duplicar modulos importados. En este caso debe ser porque FormControl ya es importado por ReactiveFormsModule (este es el @NgModule a importar, remover imports de FormBuilder, FormControl, FormGroup por ejemplo)
Cambia a:
import { ReactiveFormsModule } from '@angular/forms';
Y quita ,FormControl, FormsModule
de imports:
Correct answer by F.Igor on August 27, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP