ng serve --open always gives issue (webpack: Failed to compile.)

[shadikkhan]

Created App By ng new, successfull, but running by ng serve always a pain

ERROR in multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localho
st:4200' in 'D:\javascript\angular2\HelloWord'
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in multi ./src/styles.css
Module not found: Error: Can't resolve 'style-loader' in 'D:\javascript\angular2
\HelloWord'
 @ multi ./src/styles.css

ERROR in multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
Module not found: Error: Can't resolve '@ngtools/webpack' in 'D:\javascript\angu
lar2\HelloWord'
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in multi ./src/polyfills.ts
Module not found: Error: Can't resolve '@ngtools/webpack' in 'D:\javascript\angu
lar2\HelloWord'
 @ multi ./src/polyfills.ts

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'raw-loader' in 'D:\javascript\an
  gular2\HelloWord':
  Error: Can't resolve 'raw-loader' in 'D:\javascript\angular2\HelloWord'

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

  - Compiler.js:280 Compiler.<anonymous>
    [HelloWord]/[cli]/[webpack]/lib/Compiler.js:280:10

  - Compiler.js:480
    [HelloWord]/[cli]/[webpack]/lib/Compiler.js:480:13

  - Tapable.js:138 next
    [HelloWord]/[cli]/[webpack]/[tapable]/lib/Tapable.js:138:11

  - CachePlugin.js:62 Compiler.<anonymous>
    [HelloWord]/[cli]/[webpack]/lib/CachePlugin.js:62:5

  - Tapable.js:142 Compiler.applyPluginsAsyncSeries
    [HelloWord]/[cli]/[webpack]/[tapable]/lib/Tapable.js:142:13

  - Compiler.js:477
    [HelloWord]/[cli]/[webpack]/lib/Compiler.js:477:10

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [HelloWord]/[cli]/[webpack]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:640 self.applyPluginsAsync.err
    [HelloWord]/[cli]/[webpack]/lib/Compilation.js:640:19

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [HelloWord]/[cli]/[webpack]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:631 self.applyPluginsAsync.err
    [HelloWord]/[cli]/[webpack]/lib/Compilation.js:631:11

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [HelloWord]/[cli]/[webpack]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:626 self.applyPluginsAsync.err
    [HelloWord]/[cli]/[webpack]/lib/Compilation.js:626:10

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [HelloWord]/[cli]/[webpack]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:622 sealPart2
    [HelloWord]/[cli]/[webpack]/lib/Compilation.js:622:9

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [HelloWord]/[cli]/[webpack]/[tapable]/lib/Tapable.js:131:46


webpack: Failed to compile.

Versions.

@angular/cli: 1.0.0-rc.2
node: 6.9.2
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.9

[Song-Ethan]

I have the same problem too

[lizacodes]

Also have the same issue. I'm on Windows 10, upgraded Node and npm to the latest versions to be sure. Did an npm install in the project directory as well - didn't make a difference.

Installing Angular CLI locally to my project solved the serve/build issue, it's more of a workaround than a solution.

[filipesilva]

You seem to have a broken install. A lot of packages that the CLI depends on are not there. @Noogn reported reinstalling everything and it still did not work though.

So I'm not sure what's happening.

What's your node and npm versions? And what's the result of running these commands?

npm ls @ngtools/webpack
npm ls raw-loader

[lizacodes]

Node: 6.9.1
npm: 4.4.1

The first time I ran it, I got nothing from running both commands, like they didn't exist.

Since then I've reinstalled Node, npm (even though they were already the latest versions) and angular-cli and rebooted. ng serve and build now seems to work without a hitch.

[zartdinov]

@angular/cli: 1.0.0-rc.4
node: 6.10.0
os: win32 x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 2.4.10

Maybe it will be useful for someone else.
I have same errors when using ng serve, ng build.

I tried all instructions from other related issues (also properly reinstalled all globally).
I was confused when get same error in docker container too (Linux image).

I solved problem by using yarn as default package manager for angular-cli.

npm install yarn -g
ng set --global packageManager=yarn

[filipesilva]

Closing as it seems it's an install issue. There isn't much we can do for those... the CLI never even gets installed, much less run. It's usually some problem with npm, or the npm install.

[supriyasuresh]

Not able run the ng serve command its showing error like this.if any body knows please suggest me.

[Tyshark9]

run this for the kendo errors

npm install --save @progress/kendo-angular-l10n@^0.2.0

[fahad-nxvt]

@zartdinov using Yarn fixed the issue.

[uditguru]

I am getting the following error : what could be the issue ?
i've tried everything here

`ERROR in C:/Users/Udit/yatrum/src/app/components/trips/trip-detail/trip-detail.component.ts (14,26): Cannot find module 'ng2-cable/js/index'.

ERROR in C:/Users/Udit/yatrum/src/app/components/trips/trip-detail/trip-detail.component.ts (17,29): Cannot find module 'ng2-cable/js/index'.

ERROR in C:/Users/Udit/yatrum/src/app/components/trips/trip-detail/trip-detail.module.ts (9,39): Cannot find module 'ng2-cable/js/index'.

ERROR in Error encountered resolving symbol values statically. Could not resolve ng2-cable/js/index relative to C:/Users/Udit/yatrum/src/app/components/trips/trip-detail/trip-detail.module.ts., resolving symbol TripDetailModule in C:/Users/Udit/yatrum/src/app/components/trips/trip-detail/trip-detail.module.ts, resolving symbol TripDetailModule in C:/Users/Udit/yatrum/src/app/components/trips/trip-detail/trip-detail.module.ts

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (C:\Users\Udit\yatrum\node_modules\typescript\lib\typescript.js:9426:20)
    at Object.createCompilerHost A(C:\Users\Udit\yatrum\node_modules\typescript\lib\typescript.js:62475:26)
    at Object.ngcLoader (C:\Users\Udit\yatrum\node_modules\@ngtools\webpack\src\loader.js:202:31)
 @ multi webpack-dev-server/client?http://localhost:4200 `./src/main.ts``

[mmanavaz]

I'm having a similar issue. Below is my error:

(ERROR in ./src/main.ts
Module build failed: [object Object]
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/polyfills.ts
Module build failed: [object Object]
@ multi ./src/polyfills.ts)`

[Vishals05]

what will be the possible solution for this to get rid of this error?

[hardy1334]

I'm also facing the same problem