title: ANGULAR 6: error TS2315: Type 'ModuleWithProviders' is not generic
body: <p>Hello I am experience a issue that I cannot relate to anything.</p>
  
  <p>I show some of my code hoping it can be of any use. </p>
  
  <p>Consider that the issue appeared once I started on creating a Reactive Form.</p>
  
  <p>First of all, here it is my package.json:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>{
    "name": "name",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.0.3",
      "@angular/common": "^6.0.3",
      "@angular/compiler": "^6.0.3",
      "@angular/core": "^6.0.3",
      "@angular/forms": "^6.1.2",
      "@angular/http": "^6.0.3",
      "@angular/platform-browser": "^6.0.3",
      "@angular/platform-browser-dynamic": "^6.0.3",
      "@angular/router": "^6.0.3",
      "@ng-bootstrap/ng-bootstrap": "^2.2.0",
      "core-js": "^2.5.4",
      "rxjs": "^6.0.0",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular/compiler-cli": "^6.0.3",
      "@angular-devkit/build-angular": "~0.6.8",
      "typescript": "~2.7.2",
      "@angular/cli": "~6.0.8",
      "@angular/language-service": "^6.0.3",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here my App module:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {BrowserModule} from '@angular/platform-browser';
  import {ModuleWithProviders, NgModule} from '@angular/core';
  import {AppComponent} from './app.component';
  import {SideBarComponent} from './components/side-bar/side-bar.component';
  import {HttpRequestProcessComponent} from './components/http-request-process/http-request-process.component';
  import {ProcessFormComponent} from './components/form/process-form/process-form.component';
  import {HttpResponseComponent} from './components/http-response/http-response.component';
  import {FormsModule, ReactiveFormsModule} from '@angular/forms';
  import {HttpClientModule} from '@angular/common/http';
  import {RouterModule, Routes} from '@angular/router';
  import {RuleFormComponent} from './components/form/rule-form/rule-form.component';
  import {ProcessComponent} from './components/process/process.component';
  import {TestCasesComponent} from './components/test-cases/test-cases.component';
  import {FilterPipe, SortByPipe} from './pipes/filter.pipe';
  import {SalableProductFormComponent} from './components/form/salable-product-form/salable-product-form.component';
  import {CheckOrderFormComponent} from './components/form/check-order-form/check-order-form.component';
  import {ModalComponent} from './components/modal/modal.component';
  import {HttpProcessiComponent} from "./components/http-textarea/http-processi/http-processi.component";
  import {HttpRegoleComponent} from "./components/http-textarea/http-regole/http-regole.component";
  import {HttpProdottiVendibiliComponent} from "./components/http-textarea/http-prodotti-vendibili/http-prodotti-vendibili.component";
  
  const appRoutes: Routes = [
    {
      path: '',
      redirectTo: 'processi',
      pathMatch: 'full'
    },
    {
      path: 'processi',
      component: ProcessComponent,
      children: [
        {
          path: '',
          component: ProcessFormComponent,
          outlet: 'form'
        }
      ]
    },
    {
      path: 'regole',
      component: ProcessComponent,
      children: [
        {
          path: '',
          component: RuleFormComponent,
          outlet: 'form'
        }
      ]
    },
    {
      path: 'verifica-ordini',
      component: ProcessComponent,
      children: [
        {
          path: '',
          component: CheckOrderFormComponent,
          outlet: 'form'
        }
      ]
    },
    {
      path: 'prodotti-vendibili',
      component: ProcessComponent,
      children: [
        {
          path: '',
          component: SalableProductFormComponent,
          outlet: 'form'
        }
      ]
    }
  ];
  
  const alternativeRoute = [
    {
      path: '',
      redirectTo: 'processi',
      pathMatch: 'full'
    },
    {
      path: 'processi',
      component: ProcessFormComponent
    },
    {
      path: 'regole',
      component: RuleFormComponent
    },
    {
      path: 'verifica-ordini',
      component: CheckOrderFormComponent,
    },
    {
      path: 'prodotti-vendibili',
      component: SalableProductFormComponent,
    }
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  
  
  @NgModule({
    declarations: [
      AppComponent,
      SideBarComponent,
      HttpRequestProcessComponent,
      ProcessFormComponent,
      HttpResponseComponent,
      RuleFormComponent,
      ProcessComponent,
      TestCasesComponent,
      FilterPipe,
      SortByPipe,
      SalableProductFormComponent,
      CheckOrderFormComponent,
      // ProductFormElementComponent,
      ModalComponent,
      HttpProcessiComponent,
      HttpRegoleComponent,
      HttpProdottiVendibiliComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule,
      RouterModule.forRoot(appRoutes,
        {enableTracing: false}),
      FormsModule,
      ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  
  export class AppModule {
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The exact error is:</p>
  
  <blockquote>
    <p><strong>ERROR in node_modules/@angular/forms/src/form_providers.d.ts(22,9): error TS2315: Type 'ModuleWithProviders' is not generic.</strong></p>
  </blockquote>
  
  <p>It seems not related to my code directly, but instead something on a deeper configuration level of Angular. </p>
  
  <p>In any of my components show any error.</p>
  
  <p>Please adivice.</p>
  
  <p><strong>EDIT</strong> 
  I modified the route configuration like this:</p>
  
  <pre><code>const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, enableTracing: false});
  </code></pre>
  
  <p>and I added routing in <strong>imports</strong>. The issue still remains.</p>