Angular errors "Module not found" when app is started - angularjs

Question

I'm starting out with hybrid mobile apps using Ionic. To start off I installed NodeJS, Angular, Ionic and Cordova on Windows 10. The problem I came across is when I created my Anuglar app and try to run it, it gives me a lot of errors and I don't know why if I haven't changed anything. I used the following commands.
# ng new [APP-NAME]
# cd [APP-NAME]
# ng serve
This returns all the following:
** 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.
Why is this is happening? How can I fix this?
My versions of the services are the following:
Node: v4.6.0
Angular: angular-cli: 1.0.0-beta.24
Ionic: 2.1.17
Cordova: 6.4.0

Answer 1

As gelliott181 suggested in the comments:
If you upgraded, be sure to "ng init" your app again and "d" for diff all files it asks you to overwrite before blindly OKing changes to your components and package.json.
This solved the same issue for me, but I was left with another error, which was:
ERROR in default is not an NgModule
Which is tracked HERE, and provides a workaround of downgrading to beta21, which solved the problem for me:
$ npm install --save-dev angular-cli#1.0.0-beta.21
It works with angular 2.4.1 for me.

Answer 2

I had hours of issues with this. Turned out I had the wrong verion of the angular-cli installed. ng new was spawning up an app that wouldn't build.
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli#latest
Was what got me working. All thanks to this answer from #yoongkang-lim
ng serve does not work