My friends and I are working on a big school project, creating a cool web app. Suddenly, I encountered some errors in my app.module.ts file that I haven't seen before. It's strange because they are showing up out of nowhere!
The error:
Error:(32, 11) TS2345: Argument of type '{ imports:typeof BrowserModule[]; exports: typeof SignupFormComponent[]; declarations: (typeof S...' is not assignable to parameter of type 'NgModule'. Types of property 'declarations' are incompatible. Type '(typeof SignupFormComponent | typeof AppComponent | typeof LoaderComponent | typeof MenuComponent...' is not assignable to type '(any[] | Type<any>)[]'. Type 'typeof SignupFormComponent | typeof AppComponent | typeof LoaderComponent | typeof MenuComponent ...' is not assignable to type 'any[] | Type<any>'. Type 'typeof ViewRecipeModalComponent' is not assignable to type 'any[] | Type<any>'. Type 'typeof ViewRecipeModalComponent' is not assignable to type 'Type<any>'. Cannot assign a 'private' constructor type to a 'public' constructor type.
This is the content of app.module.ts file:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import './rxjs-extensions';
import {AppComponent} from './app.component';
import {AppRoutingModule, routedComponents} from './app-routing.module';
import {Backend} from './shared/services/backend';
import {MenuComponent} from './menu/menu.component';
import {PlannerComponent} from './planner/planner.component';
import {PlannerMenuComponent} from './planner/planner-menu/planner-menu.component';
import {LoginComponent} from './forms/login/login.component';
import {SignupFormComponent} from './forms/signup/signup-form.component';
import {ListsComponent} from './lists/lists.component';
import {ListEntryControlsComponent} from "./lists/list-entry-controls/list-entry-controls.component";
import {ListEntryFoodComponent} from './lists/list-entry-food/list-entry-food.component';
import {ListEntryRecipeComponent} from './lists/list-entry-recipe/list-entry-recipe.component';
import {ListTopBarComponent} from './lists/list-top-bar/list-top-bar.component';
import {LoaderComponent} from "./loader/loader.component";
import {ListErrorComponent} from "./lists/list-error/list-error.component";
import {RecipeModalComponent} from "./forms/modals/recipe/recipe-modal.component";
import {CreateFoodModalComponent} from "./forms/modals/create-food/create-food-modal.component";
import {ViewRecipeModalComponent} from "./forms/modals/view-recipe/view-recipe-modal.component";
import {Typeahead} from "./forms/typehead/typehead.component";
import {PlannerWeekGridComponent} from "./planner/planner-week-grid/planner-week-grid.component";
import {PlannerWeekCellComponent} from "./planner/planner-week-cell/planner-week-cell.component";
import {DynamicUnitComponent} from "./forms/dynamic-unit/dynamic-unit.component";
import {TagsEditorComponent} from "./forms/tags-editor/tags-editor.component";
import {PromoBooksComponent} from "./books/promo-books/promo-books.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpModule
],
exports: [
SignupFormComponent
],
declarations: [
AppComponent,
LoaderComponent,
MenuComponent,
PlannerMenuComponent,
PlannerWeekCellComponent,
PlannerWeekGridComponent,
PlannerComponent,
LoginComponent,
SignupFormComponent,
ListsComponent,
ListErrorComponent,
ListEntryControlsComponent,
ListEntryFoodComponent,
ListEntryRecipeComponent,
ListTopBarComponent,
ViewRecipeModalComponent,
RecipeModalComponent,
CreateFoodModalComponent,
TagsEditorComponent,
Typeahead,
DynamicUnitComponent,
routedComponents,
PromoBooksComponent
],
providers: [
Backend
],
bootstrap: [AppComponent]
})
export class AppModule {
}
I even tried re-cloning the entire project, but the issue remains. I'm using the latest release of WebStorm. Strangely, I can still run the app using 'npm start', but I can't seem to figure out this error in WebStorm. The error appears right at the start of the ng module.