启动应用程序时出现角度错误答案

【问题标题】：Angular Error when App is Started启动应用程序时出现角度错误
【发布时间】：2017-05-07 06:10:55
【问题描述】：

所以我开始使用 Ionic 的混合移动应用程序。首先，我在 Windows 10 上安装了 NodeJS、Angular、Ionic 和 Cordova。我遇到的问题是当我创建我的 Anuglar 应用程序并尝试运行它时，它给了我很多错误，我不知道为什么如果我没有改变任何东西。我使用了以下命令。

# ng new [APP-NAME]
# cd [APP-NAME]
# ng serve

这将返回以下所有内容：

** NG Live Development Server is running on http://localhost:4200. **
 94% asset optimizationwebpack: wait until bundle finished: /
Hash: dc480c594a2365ced8eb
Time: 1626ms
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] [rendered]

ERROR in multi main
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:4200/' in 'C:\Users\Brian\Documents\Ionic Projects\github-repos'
 @ multi main

ERROR in multi styles
Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\Brian\Documents\Ionic Projects\github-repos'
 @ multi styles

ERROR in multi main
Module not found: Error: Can't resolve '@ngtools/webpack' in 'C:\Users\Brian\Documents\Ionic Projects\github-repos'
 @ multi main

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'raw-loader' in 'C:\Users\Brian\Documents\Ionic Projects\github-repos':
  Error: Can't resolve 'raw-loader' in 'C:\Users\Brian\Documents\Ionic Projects\github-repos'

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

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

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

  - Tapable.js:102 next
    [github-repos]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:102:11

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

  - Tapable.js:106 Compiler.applyPluginsAsyncSeries
    [github-repos]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:106:13

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

  - Tapable.js:102 next
    [github-repos]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:102:11

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

  - Tapable.js:106 Compilation.applyPluginsAsyncSeries
    [github-repos]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:106:13

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

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

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

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

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

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

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

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

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

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

  - Tapable.js:189
    [github-repos]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:189:11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  - Resolver.js:70 onResolved
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/Resolver.js:70:11

  - createInnerCallback.js:31 loggingCallbackWrapper
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createInnerCallback.js:31:19

  - Resolver.js:138 afterInnerCallback
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/Resolver.js:138:10

  - createInnerCallback.js:31 loggingCallbackWrapper
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createInnerCallback.js:31:19

  - Tapable.js:145 Resolver.applyPluginsAsyncSeriesBailResult1
    [github-repos]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:145:46

  - Resolver.js:125 innerCallback
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/Resolver.js:125:19

  - createInnerCallback.js:31 loggingCallbackWrapper
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createInnerCallback.js:31:19

  - Tapable.js:247
    [github-repos]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:247:15

  - UnsafeCachePlugin.js:39
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/UnsafeCachePlugin.js:39:4

  - createInnerCallback.js:31 loggingCallbackWrapper
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createInnerCallback.js:31:19

  - Resolver.js:138 afterInnerCallback
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/Resolver.js:138:10

  - createInnerCallback.js:31 loggingCallbackWrapper
    [github-repos]/[angular-cli]/[webpack]/[enhanced-resolve]/lib/createInnerCallback.js:31:19


webpack: bundle is now VALID.

有谁知道为什么会发生这种情况以及如何解决这个问题？我的服务版本如下：

Node: v4.6.0
Angular: angular-cli: 1.0.0-beta.24
Ionic: 2.1.17
Cordova: 6.4.0

非常感谢任何帮助，在此致谢。

【问题讨论】：

您最近是否升级了 CLI 版本，或者这是全新安装的 Beta.24？如果您升级了，请确保再次ng init 您的应用程序并d 获取 diff 它要求您覆盖的所有文件，然后再盲目地对您的组件和 package.json 进行更改。
全新安装，昨天刚开始安装。
你让init命令完成安装了吗？当 CLI 的一部分未正确安装时，通常会发生这种情况。删除node_modules 并手动运行npm install 是我解决此问题的第一步。
哦，好的，安装已正确完成，但我会尝试将其删除并重新安装。我用npm install -g angular-cli。这是你说的init命令吗？
不，这是安装 CLI 的命令。 CLI 在ng 进程下提供命令。 ng init 是将预先存在的项目初始化为 CLI 项目（即升级 CLI 版本）所采取的操作。它在ng new [app] 完成后自动调用。

标签： angularjs cordova angular-cli

【解决方案1】：

正如 gelliott181 在 cmets 中建议的那样：

如果您升级了，请务必再次“ng init”您的应用程序并“d”以区分它要求您覆盖的所有文件，然后再盲目地对您的组件和 package.json 进行更改。

这为我解决了同样的问题，但我遇到了另一个错误，那就是：

ERROR in default is not an NgModule

跟踪HERE，并提供降级到 beta21 的解决方法，为我解决了问题：

$ npm install --save-dev angular-cli@1.0.0-beta.21

它适用于我的角度 2.4.1。

【讨论】：

仍然对我不起作用。无法安装beta.21，它在安装过程中给了我一个错误。
Cannot find module 'autoprefixer'
尝试运行：npm install autoprefixer
好的，我通过了，但现在我明白了。 ERROR in multi main Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:4200/' in 'C:\Users\Brian\Desktop\test\my-app\node_modules\angular-cli\models' @ multi main。我尝试使用npm install webpack && npm install webpack-dev-server 安装 web-pack，但仍然没有。
嗯。阅读有关该问题的 cmets，您是否曾在项目目录中执行过 npm install 似乎并不清楚。你？只是npm install 没有其他参数，它应该安装所有必需的依赖项。

【解决方案2】：

我有几个小时的问题。原来我安装了错误的 angular-cli 版本。 ng new 正在生成一个无法构建的应用程序。

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

是什么让我工作。感谢@yoongkang-lim 的回答 ng serve does not work

【讨论】：

好的，谢谢，我会尝试一下，如果它有效，请告诉您。