ERROR in multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts Module not found: Error: Can't resolve '@ngtools/webpack' in 'D:\projects\validation'

[HovGevorgyan]

I created a new angular project with "ng new" command, and when I run ng serve --port 4201 I get this error.

ERROR in multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts
Module not found: Error: Can't resolve '@ngtools/webpack' in 'D:\projects\validation'
@ multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts

ERROR in multi ./src/polyfills.ts
Module not found: Error: Can't resolve '@ngtools/webpack' in 'D:\projects\validation'
@ multi ./src/polyfills.ts

ERROR in multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:4201' in 'D:\projects\validation'
@ multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts
webpack: Failed to compile.

[Brocco]

This appears like you have a bad installation... delete and reinstall your node_modules folder then retry.

[srinivasaraokolluru]

ERROR in ./src/app/products/product-detail.component.ts
Module not found: Error: Can't resolve './product-detail.component.css' in 'G:\SrinivasSecondproject\mysecondproject\src\app\products'
resolve './product-detail.component.css' in 'G:\SrinivasSecondproject\mysecondproject\src\app\products'
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src/app/products)
Field 'browser' doesn't contain a valid alias configuration
after using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src/app/products)
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src/app/products/product-detail.component.css)
no extension
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src\app\products\product-detail.component.css doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src\app\products\product-detail.component.css.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src\app\products\product-detail.component.css.js doesn't exist
as directory
G:\SrinivasSecondproject\mysecondproject\src\app\products\product-detail.component.css doesn't exist
[G:\SrinivasSecondproject\mysecondproject\src\app\products\product-detail.component.css]
[G:\SrinivasSecondproject\mysecondproject\src\app\products\product-detail.component.css.ts]
[G:\SrinivasSecondproject\mysecondproject\src\app\products\product-detail.component.css.js]
[G:\SrinivasSecondproject\mysecondproject\src\app\products\product-detail.component.css]
@ ./src/app/products/product-detail.component.ts 42:17-58
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4000 ./src/main.ts
ERROR in ./src/app/products/product.service.ts
Module not found: Error: Can't resolve '@angular/common/http/src/client' in 'G:\SrinivasSecondproject\mysecondproject\src\app\products'
resolve '@angular/common/http/src/client' in 'G:\SrinivasSecondproject\mysecondproject\src\app\products'
Parsed request is a module
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src/app/products)
Field 'browser' doesn't contain a valid alias configuration
after using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src/app/products)
resolve as module
G:\SrinivasSecondproject\mysecondproject\src\app\products\node_modules doesn't exist or is not a directory
G:\SrinivasSecondproject\mysecondproject\src\app\node_modules doesn't exist or is not a directory
G:\SrinivasSecondproject\mysecondproject\src\node_modules doesn't exist or is not a directory
G:\SrinivasSecondproject\node_modules doesn't exist or is not a directory
G:\node_modules doesn't exist or is not a directory
looking for modules in G:\SrinivasSecondproject\mysecondproject\node_modules
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./node_modules)
using description file: G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\package.json (relative path: ./src/client)
no extension
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client.js doesn't exist
as directory
G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client doesn't exist
looking for modules in G:\SrinivasSecondproject\mysecondproject\node_modules
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./node_modules)
using description file: G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\package.json (relative path: ./src/client)
no extension
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client.js doesn't exist
as directory
G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client doesn't exist
looking for modules in G:\SrinivasSecondproject\mysecondproject\src
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src)
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src/@angular/common/http/src/client)
no extension
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client.js doesn't exist
as directory
G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client doesn't exist
looking for modules in G:\SrinivasSecondproject\mysecondproject\src
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src)
using description file: G:\SrinivasSecondproject\mysecondproject\package.json (relative path: ./src/@angular/common/http/src/client)
no extension
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client.js doesn't exist
as directory
G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client doesn't exist
[G:\SrinivasSecondproject\mysecondproject\src\app\products\node_modules]
[G:\SrinivasSecondproject\mysecondproject\src\app\node_modules]
[G:\SrinivasSecondproject\mysecondproject\src\node_modules]
[G:\SrinivasSecondproject\node_modules]
[G:\node_modules]
[G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client]
[G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client.ts]
[G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client.js]
[G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client]
[G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client]
[G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client.ts]
[G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client.js]
[G:\SrinivasSecondproject\mysecondproject\node_modules@angular\common\http\src\client]
[G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client]
[G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client.ts]
[G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client.js]
[G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client]
[G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client]
[G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client.ts]
[G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client.js]
[G:\SrinivasSecondproject\mysecondproject\src@angular\common\http\src\client]
@ ./src/app/products/product.service.ts 12:0-61
@ ./src/app/products/product-list.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4000 ./src/main.ts

same error i got when ever i run the ng serve
please provide the solution
i tried all possible solutions what u provided
but issue not resolved

[Mahendra789]

I am not able to resolve this Error:
ERROR in multi (webpack)-dev-server/client?http://localhost:8082 ./src
Module not found: Error: Can't resolve './src' in 'C:\Mahendra\Projects\workspace\projectname'
@ multi (webpack)-dev-server/client?http://localhost:8082 ./src

[tm0brien]

I have the same error, @Mahendra789. Have you been able to make any progress?

[ShakurOo]

I found a solution but not very clean ...

First list the inner version used by angular-cli like this :
npm ls @ngtools/webpack

It should display :

<projectname>@0.0.0 /Users/<username>/<projectname>
└─┬ @angular/cli@1.0.6
  └── @ngtools/webpack@1.3.3

Now, manualy install @ngTools/webpack with the same version of angular-cli :
npm install @ngtools/webpack@1.3.3 --save-dev

Finally try build : ng serve

⚠️ @ngTools/webpack are installed twice, and both must have the same version.

I don't know why the command : npm i @angular/cli won't install this dependency ... If you have another cleanest solution ...

[sureshokp]

@Mahendra789 @trevor-obrien @srinivasaraokolluru @ShakurOo @HovGevorgyan anything solution for this error
ERROR in multi (webpack)-dev-server/client?http://localhost:8082 ./src Module not found: Error: Can't resolve './src' in 'C:\Mahendra\Projects\workspace\projectname' @ multi (webpack)-dev-server/client?http://localhost:8082 ./src

i cant resolve this

[reihanian]

I have the same error and can not resolve it.

[nsksaisaravana]

I am also having the same issue but nothing works.

[frankshin]

has anyone solved the problem? please...

[nsksaisaravana]

I was also having the same issue, I replaced package.json and package-lock.json with my old version and it works fine.

[tarasSE]

@nsksaisaravana , could you please show your package.json and package-lock.json or at least webpack versions? Seems like that's versions' incompatibility problem.

[nsksaisaravana]

@tarasSE Please check my package.json, package-lock.json is pretty bigger one.

{
"name": "fire-base",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.0.3",
"@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/material": "^5.0.3",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@types/file-saver": "^1.3.0",
"@types/moment": "^2.13.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"email-validator": "^1.1.1",
"file-saver": "^1.3.3",
"firebase": "^4.8.0",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"moment": "^2.20.0",
"primeng": "^5.0.0",
"print-js": "^1.0.29",
"rxjs": "^5.5.2",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.5.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.4.2"
}
}

[tarasSE]

In my case nodejs update to v8.11.2 helped.

[dustanisci]

This error is caused by an error in the angular.json file. Make sure there is not an extra comma in one of the lines.