Angular errors "Module not found" when app is started

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

Did you recently upgrade your CLI version, or is this a fresh install of Beta.24? 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. — gelliott181, Dec 21 '16 at 18:15
Did you let the init command finish installation? This is commonly what happens when a part of the CLI doesn't install properly. Deleting `node_modules` and manually running `npm install` is the first step I'd take in resolving this. — gelliott181, Dec 21 '16 at 18:20
Oh ok, the installation finished properly but I'll try removing it and installing it again. I used `npm install -g angular-cli`. Is this the init command you're talking about? — Brian Moreno, Dec 21 '16 at 18:23
No, that's the command to install the CLI. The CLI provides commands under the `ng` process. `ng init` is the action taken to initialize a pre-existing project as a CLI project (Namely for upgrading CLI versions). It's automatically called after `ng new [app]` completes. — gelliott181, Dec 21 '16 at 18:28
Ahh I see, ok I'm reinstalling angular cli. Hopefully it works this time. — Brian Moreno, Dec 21 '16 at 18:34
I am also getting the same error, and it is fresh install using command npm install -g angular-cli — hozefam, Dec 28 '16 at 11:50

score 0 · Answer 1 · answered Dec 29 '16 at 16:07

0

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.

answered Dec 29 '16 at 16:07

Herberts Markūns

119
2
11

Still didn't work for me. Couldn't install the `beta.21`, it gave me an error during installation. – Brian Moreno Dec 30 '16 at 23:44
`Cannot find module 'autoprefixer'` – Brian Moreno Jan 03 '17 at 22:05
1

Try running: `npm install autoprefixer` – Herberts Markūns Jan 04 '17 at 08:03
Ok, I got through that but now I get this. `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`. I tried to install the web-pack using `npm install webpack && npm install webpack-dev-server` but still nothing. – Brian Moreno Jan 04 '17 at 15:32
Hmm. Reading the comments on the question, it doesn't seem clear if you ever performed `npm install` from you project directory. Have you? Just `npm install` with no other arguments, it should install all required dependencies. – Herberts Markūns Jan 05 '17 at 07:51

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

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

edited May 23 '17 at 10:29

Community

1
1

answered Dec 31 '16 at 22:18

Moby's Stunt Double

2,540
1
16
32

Ok thanks, I'll try it in a bit and let you know if it worked. – Brian Moreno Jan 01 '17 at 19:00

Angular errors "Module not found" when app is started

2 Answers2