在 Angular 2 应用程序中运行时出现 ng 服务错误答案

【问题标题】：ng serve error while running in angular 2 application在 Angular 2 应用程序中运行时出现 ng 服务错误
【发布时间】：2016-12-29 12:27:18
【问题描述】：

我首先使用npm install -g angular-cli 命令安装了 angular-cli 并创建了一个 angular-cli 项目。然后我使用ng new Angular2TestProject 命令创建项目并将目录更改为Angular@TestProject 并运行ng serve 命令。它给出了错误。之后我运行npm install 和npm upgrade，然后再次运行ng serve，但同样的错误仍然存在于命令提示符中。错误如下：

    ** 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.

这是我的 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"
  }
}

有人可以帮我吗？

【问题讨论】：

你试过删除 node_modules 文件夹并再次运行 npm install 吗？
是的，我这样做了，但没有工作。同样的错误。
你安装 webpack-dev-server 了吗？ .. 你能发布你的 pacake.json 吗？
它仍然指向Angular2TestProject .. 简单地重新创建另一个。
完成。 @federico

标签： angularjs angular angular-cli

【解决方案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'

错误日志清楚地显示了Module not found 的问题，您仅在一处将项目名称从 Angular2TestProject 更改为 Angular@TestProject，您需要在项目名称所在的任何位置更改其名称（路径已给出在错误日志中）。尝试更改名称并运行。

【讨论】：