2 votes

Why do I have this error in Angular?

I'm making a project in Angular 9, recently I can't deploy it any more because I get this error.

Initially I got that it did not identify an ID, then I commented out some sections of the project and compiled of the project and compiled again, now I get this error.

As far as I have investigated, it has to do with the AppMODULE.TS

The error trace is:

**  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)

**

First I got an Uncaught error with 'id', then I commented some sections that had id, because I could not find the error, now I get this error.

this is my 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';

(another code block)

    @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 { }

This is the mistake:

compiler.js:2281 Uncaught Error: Unexpected value 'FormControl' imported by the module 'AppModule'. Please add a @NgModule annotation

Do you have any idea what could be wrong?

2voto

F.Igor Points 286

The message may appear due to duplicate imported modules. In this case it must be because FormControl is already imported by ReactiveFormsModule (this is the @NgModule to import, remove imports from FormBuilder, FormControl, FormGroup e.g.)

Switch to:

import { ReactiveFormsModule } from '@angular/forms';

And remove ,FormControl, FormsModule from imports:

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X