d.ts files cannot find module 'rxjs/Observable'

Question

I am pretty new to Angular2/4 and i am trying to build a WebAPI that updates a SQL table. The Issue is that when I run the Build function in Visual Studio 2015, I get error code TS2307 "Cannot find module 'rxjs/Observable'" for every one of the "d.ts" files. When I click on the error, it sends me to the Import statement in the Specified file, with the error under the "@rxjs/Observable" portion.

I have looked for a couple hours trying to find a solution and haven't found one that matches the situation, so if I duplicated something please drop a link in the comments so I can check it out.

If there are any other files you would need to help please let me know. Thank you in advance.

Here are some(as many as I could get in the screenshot)of the errors from VS15: Here is my Package.json file:

   {
     "version": "1.0.0",
     "name": "asp.net",
     "private": true,
     "scripts": {
           "build": "webpack",
           "start": "static ."
           },
     "dependencies": {
           "@angular/core": "2.4.0",
           "@angular/common": "2.4.0",
           "@angular/compiler": "2.4.0",
           "@angular/platform-browser": "2.4.0",
           "@angular/platform-browser-dynamic": "2.4.0",
           "core-js": "^2.4.1",
           "zone.js": "^0.8.4",
           "rxjs": "^5.2.0",
           "reflect-metadata": "^0.1.10"
           },
     "devDependencies": {
          "gulp": "^3.9.1",
          "gulp-exec": "^2.1.3",
          "awesome-typescript-loader": "^3.1.2",
          "typings": "^2.1.0",
          "webpack": "^3.8.1",
          "ng2-bs3-modal": "0.10.4"
          }
      }

Here is my tsconfig.json

  {
   "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
        }
   }

UPDATE:1 I went through and lowered the angular version number in the package.json file as shown above. Then deleted the node_module from the project and restarted VS15. then I restored the packages to find a bunch more errors waiting.

So I am hoping the new batch of errors helps figure something out...

Answer 1

For MAC I solve this problem with:

sudo npm install -g --unsafe-perm --verbose @angular/cli

Answer 2

On the advice of @yms, I found the Quickstart file for the Angular2.4 and copied the package.json, tsconfig.jason and systemjs.config.js into the solution. then i read the ReadMe file which points out that you have to use the angular/cli from now on.. so i tried installing that with the command:

npm install -g @angular/cli

my errors i was getting reduced to "incorrectly extends" error, which was fixed by pushing the typescript version to "^2.4.0" and the rxjs version to "5.4.2" in the package.json file then restoring the packages.

So here is my working Package.json:

{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented 
with testing support",
"scripts": {
  "build": "tsc -p src/",
  "build:watch": "tsc -p src/ -w",
  "build:e2e": "tsc -p e2e/",
  "serve": "lite-server -c=bs-config.json",
  "serve:e2e": "lite-server -c=bs-config.e2e.json",
  "prestart": "npm run build",
  "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
  "pree2e": "npm run build:e2e",
  "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-
   others --success first",
  "preprotractor": "webdriver-manager update",
  "protractor": "protractor protractor.config.js",
  "pretest": "npm run build",
  "test": "concurrently \"npm run build:watch\" \"karma start 
  karma.conf.js\"",
  "pretest:once": "npm run build",
  "test:once": "karma start karma.conf.js --single-run",
  "lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
  "@angular/common": "~2.4.0",
  "@angular/compiler": "~2.4.0",
  "@angular/core": "~2.4.0",
  "@angular/forms": "~2.4.0",
  "@angular/http": "~2.4.0",
  "@angular/platform-browser": "~2.4.0",
  "@angular/platform-browser-dynamic": "~2.4.0",
  "@angular/router": "~3.4.0",
  "angular-in-memory-web-api": "~0.2.4",
  "systemjs": "0.19.40",
  "core-js": "^2.4.1",
  "rxjs": "5.4.2",
  "zone.js": "^0.7.4"
},
"devDependencies": {
  "concurrently": "^3.2.0",
  "lite-server": "^2.2.2",
  "typescript": "^2.4.0",
  "canonical-path": "0.0.2",
  "tslint": "^3.15.1",
  "lodash": "^4.16.4",
  "jasmine-core": "~2.4.1",
  "karma": "^1.3.0",
  "karma-chrome-launcher": "^2.0.0",
  "karma-cli": "^1.0.1",
  "karma-jasmine": "^1.0.2",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~4.0.14",
  "rimraf": "^2.5.4",
  "@types/node": "^6.0.46",
  "@types/jasmine": "2.5.36"
},
"repository": {}
}