Cannot resolve parameters for ApplicationModule: (?)

Question

Pretty new to Angular. My app contains 1 service and 3 components. Compiled successfully. I'm getting this error and have no idea what went wrong:

Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).

Debugging gave me very little idea.. It seems that the issue is related to NSLocaleLocalizations having null dependencies (if that makes sense) - see screenshot below:

Here is some code: Please let me know if anything else is needed. Your help is much appreciated - thank you very much.

package.json

{
  "name": "angular_app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-aot": "ng build --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
  "@angular/animations": "^6.0.0",
  "@angular/cdk": "^6.0.0",
  "@angular/common": "^6.0.0",
  "@angular/compiler": "^6.0.0",
  "@angular/core": "^6.0.0",
  "@angular/forms": "^6.0.0",
  "@angular/http": "^6.0.0",
  "@angular/material": "^6.0.0",
  "@angular/platform-browser": "^6.0.0",
  "@angular/platform-browser-dynamic": "^6.0.0",
  "@angular/router": "^6.0.0",
  "core-js": "^2.5.4",
  "express": "^4.16.4",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26"
  },
  "devDependencies": {
  "@angular/compiler-cli": "^6.0.0",
  "@angular-devkit/build-angular": "~0.6.0",
  "typescript": "~2.7.2",
  "@angular/cli": "~6.0.0",
  "@angular/language-service": "^6.0.0",
  "@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": "~1.4.2",
  "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"
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { StoriesComponent } from './pages/stories/stories.component';
import { StoryComponent } from './pages/story/story.component';
import { StageComponent } from './pages/stage/stage.component';

@NgModule({
declarations: [
  AppComponent,
  StoryComponent,
  StoriesComponent,
  StageComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

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

import { StoriesComponent } from './pages/stories/stories.component';
import { StoryComponent } from './pages/story/story.component';
import { StageComponent } from './pages/stage/stage.component';

const routes: Routes = [
  {path: '', redirectTo: '/stories', pathMatch: 'full'},
  {path: 'stories', component:StoriesComponent},
  {path: 'stories/:id', component: StoryComponent},
  {path: 'stories/:id/:id', component: StageComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

stories.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map, tap } from 'rxjs/operators';

import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class StoriesService {


  private _stories = new BehaviorSubject<any>(null);
  public stories = this._stories.asObservable();


  storyIdCounter = 0;
  stageIdCounter = 0;
  stateIdCounter = 0;

  constructor(private http: Http) { 
    this.getStoriesForReal().subscribe(
      (stories) => {
        console.log(stories);
        this._stories.next(stories);
      });
  }

  getStoriesForReal() {
    return this.http.get("http://localhost:3001/test").pipe(
      tap(res => console.log(res)),
      map((response) => response.json())
    );
  }

}

stories.component.ts

import { Component, OnInit } from '@angular/core';
import { Story } from '../../interfaces/story';
import { StoriesService } from '../../services/stories.service';


@Component({
  selector: 'app-stories',
  templateUrl: './stories.component.html',
  styleUrls: ['./stories.component.scss']
})
export class StoriesComponent implements OnInit {

  id = 0;
  storiesList: Story[];

  constructor(
    private storiesService: StoriesService) { 
    }

  ngOnInit() {
    this.storiesList = [];
    this.storiesService.stories.subscribe((stories) => {
      for (let story in stories) {
        this.storiesList.push(stories[story]);
      }
    });
  }  
}

story.component.ts

import { Component, OnInit } from '@angular/core';
import { StoriesService } from '../../services/stories.service';


@Component({
  selector: 'app-story',
  templateUrl: './story.component.html',
  styleUrls: ['./story.component.scss']
})
export class StoryComponent implements OnInit {

  constructor(
    private storiesService: StoriesService
  ) { 

  }

  ngOnInit() {

  }
}

stage.component.ts

import { Component, OnInit } from '@angular/core';

import { StoriesService } from '../../services/stories.service';

@Component({
  selector: 'app-stage',
  templateUrl: './stage.component.html',
  styleUrls: ['./stage.component.scss'],
})
export class StageComponent implements OnInit {

  constructor(
    private storiesService: StoriesService
  ) { }


  ngOnInit() {

  }
}

Answer 1

You need to provide StoriesService in AppModule.

  ....
  providers: [StoriesService],
  bootstrap: [AppComponent]
  .... 

Also, use HttpClientModule instead of HttpClient.

Answer 2

The reason I got this is that I improperly upgraded from angular 5.2 to angular 7. Go to: https://update.angular.io/ to know how to upgrade from ANY version to another

Edit:

Also look at this https://github.com/nwjs/nw.js/issues/6804 which is a solution if you are using NWJS

For any one who uses NWJS with Angular 6 and requires Node capabilities like i do, i was able to rectify this after @rogerwang referred me to this link. However, the suggestions there most certainly may not work if Node functionality is required along side angular; the conflict in both Node REQUIRE definitions (Angular 6 and NWJS) occurs in the angular compiler prior to loading the app so adding the script in your index.html file or polyfill.ts ordinarily will not rectify the issue. To solve this, in your nw manifest, do not remove the node-remote field or nodejs flag, add a new field bg-script and pass a js file with the workaround expressions specified in the link above. In your Angular app, re assign the require function in your nw object. That solves it. See Example below

removeRequire.js

window.requireNode = window.require;
window.require = undefined;

NW package.json

{"name": "angular-app",
  "version": "0.0.0",
  "main": "http://localhost:4200/",
  "node-remote": "http://localhost:4200",
  "bg-script": "removeRequire.js",
  "window": {
    "toolbar": false,
    "title": "App",
    "width": 550,
    "height": 870
  },
  "scripts": {
    "start": "nw ."
  }
}

Angular 6 app polyfill.ts

declare var nw: any;
const isNWjsAvailable = typeof (nw) === 'object';

(function(inkioskMode: boolean) {
    if (inkioskMode) {
        nw.require = nw.global.require =  nw.global.requireNode;
        nw.global.requireNode = undefined;
    }
}(isNWjsAvailable));

Note This is useful if you require node capabilities through the nw kiosk. If It isnt needed, just simply remove the node-remote field. Also, the script provided for the bg-script field should be in the same folder as your nw manifest. It may also not be needed if building or serving AOT.