ng serve error while running in angular 2 application

Question

I have first installed angular-cli with npm install -g angular-cli command and created an angular-cli project. Then I created the project with ng new Angular2TestProject command and changed the directory to Angular@TestProject and run the ng serve command. It was giving error. After that I run npm install and npm upgrade and then again ng serve , but the same error persists in the command prompt. The error is as follows:

    ** NG Live Development Server is running on http://localhost:4200. **
Hash: dc480c594a2365ced8eb
Time: 1881ms
chunk    {0} styles.bundle.map (styles) 28 bytes {2} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 40 bytes [initial] [rendered
]
chunk    {2} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rende
red]

ERROR in multi main
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localho
st:4200/' in 'D:\MYSPA\testproject\Angular2TestProject'
 @ multi main

ERROR in multi styles
Module not found: Error: Can't resolve 'style-loader' in 'D:\MYSPA\testproject
\Angular2TestProject'
 @ multi styles

ERROR in multi main
Module not found: Error: Can't resolve '@ngtools/webpack' in 'D:\MYSPA\testpro
ject\Angular2TestProject'
 @ multi main

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'raw-loader' in 'D:\MYSPA\testp
  roject\Angular2TestProject':
  Error: Can't resolve 'raw-loader' in 'D:\MYSPA\testproject\Angular2TestProje
  ct'

  - compiler.js:76
    [Angular2TestProject]/[angular-cli]/[html-webpack-plugin]/lib/compiler.js:76
    :16

  - Compiler.js:279 Compiler.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compiler.js:279:10

  - Compiler.js:474
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compiler.js:474:13

  - Tapable.js:102 next
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:102:1
    1

  - CachePlugin.js:61 Compiler.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/CachePlugin.js:61:4

  - Tapable.js:106 Compiler.applyPluginsAsyncSeries
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:106:1
    3

  - Compiler.js:471 Compiler.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compiler.js:471:10

  - Tapable.js:102 next
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:102:1
    1

  - suppress-entry-chunks-webpack-plugin.js:28 Compilation.<anonymous>
    [Angular2TestProject]/[angular-cli]/plugins/suppress-entry-chunks-webpack-pl
    ugin.js:28:17

  - Tapable.js:106 Compilation.applyPluginsAsyncSeries
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:106:1
    3

  - Compilation.js:626 Compilation.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compilation.js:626:18

  - Tapable.js:95 Compilation.applyPluginsAsyncSeries
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:95:46

  - Compilation.js:617 Compilation.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compilation.js:617:10

  - Tapable.js:95 Compilation.applyPluginsAsyncSeries
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:95:46

  - Compilation.js:612 Compilation.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compilation.js:612:9

  - Tapable.js:95 Compilation.applyPluginsAsyncSeries
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:95:46

  - Compilation.js:608 Compilation.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compilation.js:608:8

  - Tapable.js:95 Compilation.applyPluginsAsyncSeries
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:95:46

  - Compilation.js:554 Compilation.seal
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compilation.js:554:7

  - Compiler.js:468 Compiler.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compiler.js:468:16

  - Tapable.js:189
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:189:1
    1

  - Compilation.js:452 Compilation.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compilation.js:452:10

  - Compilation.js:347 Compilation.errorAndCallback
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compilation.js:347:3

  - Compilation.js:364 Compilation.<anonymous>
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/Compilation.js:364:11

  - NormalModuleFactory.js:40 onDoneResolving
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/NormalModuleFactory.js:40:
    20

  - NormalModuleFactory.js:159
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/NormalModuleFactory.js:159
    :21

  - async.js:726
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:726:13

  - async.js:52
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:52:16

  - async.js:241 done
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:241:17

  - async.js:44
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:44:16

  - async.js:723
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:723:17

  - async.js:167
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:167:37

  - async.js:52
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:52:16

  - async.js:361
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:361:13

  - async.js:52
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:52:16

  - async.js:241 done
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:241:17

  - async.js:44
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:44:16

  - async.js:358
    [Angular2TestProject]/[angular-cli]/[webpack]/[async]/lib/async.js:358:17

  - NormalModuleFactory.js:216
    [Angular2TestProject]/[angular-cli]/[webpack]/lib/NormalModuleFactory.js:216
    :19

  - Resolver.js:70 onResolved
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/Resolve
    r.js:70:11

  - createInnerCallback.js:31 loggingCallbackWrapper
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createI
    nnerCallback.js:31:19

  - Resolver.js:138 afterInnerCallback
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/Resolve
    r.js:138:10

  - createInnerCallback.js:31 loggingCallbackWrapper
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createI
    nnerCallback.js:31:19

  - Tapable.js:145 Resolver.applyPluginsAsyncSeriesBailResult1
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:145:4
    6

  - Resolver.js:125 innerCallback
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/Resolve
    r.js:125:19

  - createInnerCallback.js:31 loggingCallbackWrapper
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createI
    nnerCallback.js:31:19

  - Tapable.js:247
    [Angular2TestProject]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:247:1
    5

  - UnsafeCachePlugin.js:39
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/UnsafeC
    achePlugin.js:39:4

  - createInnerCallback.js:31 loggingCallbackWrapper
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createI
    nnerCallback.js:31:19

  - Resolver.js:138 afterInnerCallback
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/Resolve
    r.js:138:10

  - createInnerCallback.js:31 loggingCallbackWrapper
    [Angular2TestProject]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createI
    nnerCallback.js:31:19


webpack: bundle is now VALID.

Here is my package.json:-

{
  "name": "angular2-test-project",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

Can anybody help me on this?

Answer 1

ERROR in multi main
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localho
st:4200/' in 'D:\MYSPA\testproject\Angular2TestProject'
 @ multi main

ERROR in multi styles
Module not found: Error: Can't resolve 'style-loader' in 'D:\MYSPA\testproject
\Angular2TestProject'
 @ multi styles

ERROR in multi main
Module not found: Error: Can't resolve '@ngtools/webpack' in 'D:\MYSPA\testpro
ject\Angular2TestProject'

Error log clearly is showing what is the problem about Module not found ,you have changed the project name from Angular2TestProject to Angular@TestProject only at one place,you need to change its name wherever the project name is(the path is given in the error log).Try to change the name and run.