I am importing FormGroup in my feature module and it throws error in Angular4 multiple modules structure

Question

App module

app.module.ts

   `import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule, ReactiveFormsModule, FormGroup } from'@angular/forms';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { AppComponent } from './app.component';

   /*Routing Module*/
   import {AppRoutingModule} from './app-routing.module';

  /*Core Module*/
   import { CoreModule } from './core/core.module';

  /*Shared Module*/
  import {SharedModule} from './shared/shared.module';

  /*Featured Module*/
  import { LoginModule } from './login/login.module';
  import { LandingModule } from './landing/landing.module';

  @NgModule({
    imports: [
      BrowserModule,
      FormGroup,
      FormsModule,
      ReactiveFormsModule,
      SharedModule.forRoot(),
      LandingModule,
      LoginModule,
      CoreModule.forRoot(),
      AppRoutingModule,
      BrowserAnimationsModule
   ],
   declarations: [
    AppComponent,
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Shared Module

shared.module.ts

`import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MaterialModule } from './material.module';

@NgModule({
imports:      [ CommonModule, MaterialModule, FlexLayoutModule], 
declarations: [  ], 
exports:      [ CommonModule, MaterialModule, FlexLayoutModule]
 })

export class SharedModule { 
      static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: []
    };
  }
}

Feature Module

 landing.module.ts

   `import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule, FormGroup, FormBuilder, Validators }    from '@angular/forms';
    import {SharedModule} from '../shared/shared.module';

    import { LandingRoutingModule } from './landing-routing.module';
    import { HomeComponent } from './home/home.component';
    import { RegisterComponent } from './register/register.component';


    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        FormGroup,
        SharedModule,
        LandingRoutingModule
      ],
      declarations: [HomeComponent, RegisterComponent]
    })
    export class LandingModule { }

Then inside my RegisterComponent I tried using FormGroup and I get error on console saying compiler.es5.js:1694 Uncaught Error: Unexpected value 'FormGroup' imported by the module 'AppModule'. Please add a @NgModule annotation. Please could anybody tell me the correct way to import modules in multiple modules

Core module

`import {ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HttpService } from './http.service';
import { StoreService } from './store.service';

@NgModule({
    imports:      [ CommonModule ],
    declarations: [],
    exports:      []
  })
  export class CoreModule {
    constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
        if (parentModule) {
          throw new Error(
            'CoreModule is already loaded. Import it in the AppModule only');
        }
      }

      static forRoot(): ModuleWithProviders {
        return {
            ngModule: CoreModule,
            providers: [ HttpService, StoreService ]
        };
    }
  }`

app-routing.module

`import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
  { path:'', redirectTo:'home', pathMatch:'full' },
  { path: 'login', loadChildren: 'app/login/login.module#LoginModule' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class AppRoutingModule {
}`

And also the correct way to do Lazy loading.Thankyou

Answer 1

You do not have to use FormGroup inside any module.Remove from Feature Module.

You can directly import in the component iteself

NgModule({
      imports: [
        CommonModule,
        FormsModule,       
        SharedModule,
        LandingRoutingModule
      ],
 declarations: [HomeComponent, RegisterComponent]