Cannot declaremodule in an NgModule as it's not a part of the current compilation Angular

Question

Im not sure what is happening here but i am receiving this error 'Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation' when importing 'formsModule' and 'reactiveformsmodule'into my app.module component.

I am running angular 9 and have tried clearing the cache, reinstalling npm. Could these be an angular 9 issue ? would downgrading to 8 fix the problem...

I am confused as to what is going on here as it imported fine the day previous.

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { ExpertAdviceLandingPageComponent } from './expert-advice-landing-page/expert-advice-landing-page.component';
import { InstagramComponent } from './instagram/instagram.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { SharedModule } from './shared/shared.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BuyingGuideComponent } from './buying-guide/buying-guide.component';
import { IdeasAndInspirationComponent } from './ideas-and-inspiration/ideas-and-inspiration.component';
import { AdviceAndGuidanceComponent } from './advice-and-guidance/advice-and-guidance.component';
import { GuidesComponent } from './guides/guides.component';
import { CommonModule } from '@angular/common';
import { CarouselComponent } from './carousel/carousel.component';
import { CarouselModule } from 'angular-bootstrap-md';
import { AppRoutingModule } from './app-routing.module';
import { SharedService } from './shared/sharedService';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    BuyingGuideComponent,
    IdeasAndInspirationComponent,
    AdviceAndGuidanceComponent,
    GuidesComponent,
    ExpertAdviceLandingPageComponent,
    InstagramComponent,
    CarouselComponent,
    FormsModule,
    ReactiveFormsModule
  ],
  imports: [
    BrowserModule,
    SharedModule,
    HttpClientModule,
    CommonModule,
    CarouselModule,
    MDBBootstrapModule.forRoot(),
    BrowserAnimationsModule,
    AppRoutingModule,
    NgbModule,
    FormsModule,
    ReactiveFormsModule

  ],
  providers: [SharedService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Consider removing `FormsModule, and ReactiveFormsModule` from declarations array — Ashish Ranjan, May 22 '20 at 19:09

score 41 · Answer 1 · edited Sep 22 '21 at 12:12

41

When importing modules in Angular it should be placed under the imports array not declarations.

declarations: [
    AppComponent,
    // ReactiveFormsModule---remove from declarations and add in import because its is imported
    // FormsModule`enter code here`---remove from declarations and add in import
],
imports: [
    ReactiveFormsModule,
    FormsModule
]

edited Sep 22 '21 at 12:12

Federico klez Culloca

26,308
17
56
95

answered Nov 23 '20 at 07:46

Rashmi HazeL ivy DorisFay

572
1
5
13

score 6 · Answer 2 · answered Apr 01 '22 at 05:44

When importing modules in Angular it should be placed under imports array not under declartations.

@NgModule({
declarations: [
     AppComponent
],
imports: [
     BrowserModule,
     AppRoutingModule, 
     MatSliderModule    // whatever module you want to use
],
providers: [],
bootstrap: [AppComponent]
});

score 0 · Answer 3 · answered May 25 '23 at 06:12

0

The error may also happen if you're working in a library and you're importing module from the wrong source.

import { myLibraryModule } from '@my/library'

and it should have been

import { myLibraryModule } from './library.module'

answered May 25 '23 at 06:12

Raphaël Balet

6,334
6
41
78

Cannot declaremodule in an NgModule as it's not a part of the current compilation Angular

3 Answers3