2

I have made an app using ASP .NET core 2.0, angular 5.2.9 and Webpack in Visual Studio 2017 Community. But when trying to import HttpClientModule from '@angular/common/http', the error- "Can not find module '@angular/common/http' '" appeared in intellisence. What to do?

Actually importing from '@angular/http' is not raising any error which was before Angular 4.3.0 but after that(current version is 5.2.9) importing from '@angular/common/http' should work. Do I have to do something with webpack?

Below is my package.json:-

{
  "name": "MyApp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "webpack --config webpack.config.vendor.js"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "1.7.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~9.4.7",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^1.0.0",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0", 
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngtools/webpack": "1.10.2",
    "@types/webpack-env": "1.13.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "4.0.1",
    "bootstrap": "4.0.0",
    "css": "2.2.1",
    "css-loader": "0.28.11",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "expose-loader": "0.7.5",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.11",
    "html-loader": "0.5.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.3.1",
    "json-loader": "0.5.7",
    "preboot": "6.0.0-beta.3",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.12",
    "rxjs": "5.5.7",
    "style-loader": "0.20.3",
    "to-string-loader": "1.1.5",
    "url-loader": "1.0.1",
    "webpack": "4.1.1",
    "webpack-hot-middleware": "2.21.2",
    "webpack-merge": "4.1.2",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.7.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~9.4.7",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^1.0.0",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2",
    "@types/chai": "4.1.2",
    "chai": "4.1.2",
    "karma-chai": "0.1.0",
    "karma-webpack": "2.0.13"
  }
}

Improve this question
10
  • do you have @angular/common installed? Commented Mar 23, 2018 at 14:54
  • Yes, Off course. Commented Mar 23, 2018 at 15:14
  • did you install it via npm? Commented Mar 23, 2018 at 15:18
  • Yes, I am providing package.json of my app Commented Mar 23, 2018 at 15:21
  • you have quite a few things in dependencies which are dev dependencies only Commented Mar 23, 2018 at 15:35

4 Answers 4

Reset to default
1

I have created new app using angular CLI and then copied the node_modules folder from there(which contained the http folder inside common folder) to my app. This solved my problem. But this seems not to be a proper solution to this problem. I believe that there might be more logical way of doing this addressing the proper reason for this issue. So still my waiting for more appropriate answer(nice to have explanation) is not exhausted :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I had the same issue; created an Angular project in Visual Studio 2017, installed the angular CLI and upgraded it to Angular 5. Going through the tutorial it was failing in the same spot.

Solved it by modifying the package.json file, removed the line:

   "@angular/http": "^5.0.0",

removed the project node_modules folder and then ran npm_install.

This time it installed the Angular common http folder as expected.

I guess it doesn't add the common http module if the original module is still there?

Improve this answer

1 Comment

Actually the angular templates available for ASP .NET core does not have updated Angular packages though it contains version of Angular >4.3.0
0

I had this issue and it turned out that the shrinkwrap file that gets added by vs2017 was preventing it from updating to v5.

Steps to resolve are:

  1. Delete npm-shrinkwrap.json file (expand package.json file to see it)
  2. Delete the node_modules folder in your project folder
  3. Re-install npm: npm install -g npm-check-updates

Taken from:

Package updated to angular 5 latest version but npm not updated in visual studio 2017 using angular template

Improve this answer

Comments

0

Just wait until VS updates references by Package Manager.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.