TransWikia.com

Por que tengo este Error en Angular?

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?

One Answer

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP