Angular-cli: ng serve command not working

[lukejoliat]

Please provide us with the following information:

OS?

MacOS Sierra

Versions.

angular-cli: 1.0.0-beta.28.3
node: 7.4.0
os: darwin x64

Repro Steps

After running 'ng serve' in an app created by 'ng new...' I get this output from the console:

`As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

** NG Live Development Server is running on http://localhost:4200. **
Hash: b17a9b8b2eeffaf40894                                                    e Time: 6294ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 222 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 3.94 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.64 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.`

But when I navigate to the localhost:4200 in my browser, I get this message:

This site can’t be reached

localhost refused to connect.

Which to me indicates that there is nothing running on that port, contrary to what the output in the console says. If I try running in different ports, I get the same result. No error messages, just no server.

Any help would be really appreciated.

---

Thanks! We'll be in touch soon.

[matthewharwood]

I had some different but equally weird problems with ng serve last night.
OS?

Windows 10

Versions.
angular-cli: @latest
node: 7.4.0

I would run ng serve. The bundle would work properly.
Onchange of the code, webpack would recompile successfully.
Refresh browser and the changes were not represented at all.

[lukejoliat]

Yes. It's quite hard to debug, since there is no error output.

[Cody-Nicholson]

@matthewharwood That's interesting. I have the opposite issue. I just updated to 1.0.0-beta.28.3 and right now if I run ng serve, I get a '... is not an NgModule' error. If i change something and it reloads I don't get any errors and it serves fine.

[denkomanceski]

I also updated to 1.0.0-beta.28.3, I created completely new app ng new something and than ng serve, and this is happening:

ERROR in ./~/@angular/core/src/util/decorators.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\core\src\util\decorators.js Parenthes
ized pattern (156:12)
You may need an appropriate loader to handle this file type.
|     if (clsDef.hasOwnProperty('extends')) {
|         if (typeof clsDef.extends === 'function') {
|             ((constructor)).prototype = proto =
|                 Object.create(((clsDef.extends)).prototype);
|         }
 @ ./~/@angular/core/src/util.js 9:0-42
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/@angular/core/src/di/forward_ref.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\core\src\di\forward_ref.js Parenthesi
zed pattern (24:4)
You may need an appropriate loader to handle this file type.
|  */
| export function forwardRef(forwardRefFn) {
|     ((forwardRefFn)).__forward_ref__ = forwardRef;
|     ((forwardRefFn)).toString = function () { return stringify(this()); };
|     return (((forwardRefFn)));
 @ ./~/@angular/core/src/di.js 14:0-65
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/@angular/core/src/facade/errors.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\core\src\facade\errors.js Parenthesiz
ed pattern (60:32)
You may need an appropriate loader to handle this file type.
|          * @return {?}
|          */
|         set: function (value) { ((this._nativeError)).stack = value; },
|         enumerable: true,
|         configurable: true
 @ ./~/@angular/core/src/application_ref.js 15:0-53
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/@angular/compiler/src/aot/static_reflector.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\compiler\src\aot\static_reflector.js
Parenthesized pattern (793:4)
You may need an appropriate loader to handle this file type.
| function positionalError(message, fileName, line, column) {
|     var /** @type {?} */ result = new Error(message);
|     ((result)).fileName = fileName;
|     ((result)).line = line;
|     ((result)).column = column;
 @ ./~/@angular/compiler/index.js 30:0-61
 @ ./~/@angular/platform-browser-dynamic/src/platform-browser-dynamic.js
 @ ./~/@angular/platform-browser-dynamic/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/@angular/compiler/src/jit/compiler.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\compiler\src\jit\compiler.js Parenthe
sized pattern (283:12)
You may need an appropriate loader to handle this file type.
|             assertComponent(compMeta);
|             var /** @type {?} */ HostClass = function HostClass() { };
|             ((HostClass)).overriddenName = identifierName(compMeta.type) + "_Host";
|             var /** @type {?} */ hostMeta = createHostComponentMeta(HostClass, compMeta);
|             compiledTemplate = new CompiledTemplate(true, compMeta.selector, compMeta.type, hostMeta, ngModule, [compM
eta.type]);
 @ ./~/@angular/compiler/index.js 36:0-49
 @ ./~/@angular/platform-browser-dynamic/src/platform-browser-dynamic.js
 @ ./~/@angular/platform-browser-dynamic/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/@angular/platform-browser/src/browser/browser_adapter.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\platform-browser\src\browser\browser_
adapter.js Parenthesized pattern (88:75)
You may need an appropriate loader to handle this file type.
|      * @return {?}
|      */
|     BrowserDomAdapter.prototype.setProperty = function (el, name, value) { ((el))[name] = value; };
|     /**
|      * @param {?} el
 @ ./~/@angular/platform-browser/src/browser.js 12:0-62
 @ ./~/@angular/platform-browser/src/platform-browser.js
 @ ./~/@angular/platform-browser/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/@angular/platform-browser/src/dom/dom_renderer.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\platform-browser\src\dom\dom_renderer
.js Parenthesized pattern (321:8)
You may need an appropriate loader to handle this file type.
|      */
|     DomRenderer.prototype.setElementProperty = function (renderElement, propertyName, propertyValue) {
|         ((renderElement))[propertyName] = propertyValue;
|     };
|     /**
 @ ./~/@angular/platform-browser/src/browser.js 18:0-71
 @ ./~/@angular/platform-browser/src/platform-browser.js
 @ ./~/@angular/platform-browser/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/@angular/compiler/src/facade/errors.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\compiler\src\facade\errors.js Parenth
esized pattern (60:32)
You may need an appropriate loader to handle this file type.
|          * @return {?}
|          */
|         set: function (value) { ((this._nativeError)).stack = value; },
|         enumerable: true,
|         configurable: true
 @ ./~/@angular/compiler/src/util.js 13:0-44
 @ ./~/@angular/compiler/index.js
 @ ./~/@angular/platform-browser-dynamic/src/platform-browser-dynamic.js
 @ ./~/@angular/platform-browser-dynamic/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/json3/lib/json3.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\json3\lib\json3.js Parenthesized pattern (89:1
2)
You may need an appropriate loader to handle this file type.
|           if (stringifySupported) {
|             // A test function object with a custom `toJSON` method.
|             (value = function () {
|               return 1;
|             }).toJSON = value;
 @ ./~/sockjs-client/lib/main.js 7:12-28
 @ ./~/sockjs-client/lib/entry.js
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://localhost:4200/
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./~/@angular/common/src/facade/errors.js
Module parse failed: C:\Users\denko\WebstormProjects\starter\node_modules\@angular\common\src\facade\errors.js Parenthes
ized pattern (60:32)
You may need an appropriate loader to handle this file type.
|          * @return {?}
|          */
|         set: function (value) { ((this._nativeError)).stack = value; },
|         enumerable: true,
|         configurable: true
 @ ./~/@angular/common/src/pipes/invalid_pipe_argument_error.js 13:0-45
 @ ./~/@angular/common/src/pipes/date_pipe.js
 @ ./~/@angular/common/src/pipes/index.js
 @ ./~/@angular/common/src/common.js
 @ ./~/@angular/common/index.js
 @ ./~/@angular/platform-browser/src/browser.js
 @ ./~/@angular/platform-browser/src/platform-browser.js
 @ ./~/@angular/platform-browser/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

[koop-bremen]

@denkomanceski I have the exact same problem

[soumak77]

I'm also experiencing the same issue as @denkomanceski

[coryrylan]

Same issues here, also noticed changes are not reflected when using ng build -watch. Not sure if this issue is related https://github.com/angular/angular-cli/issues/4353

[lukejoliat]

OK I uninstalled angular CLI, reinstalled it after a npm cache clear. And now I'm getting the same issue as @denkomanceski. Strange.

[andreas-aeschlimann]

I have just updated angular-cli from 26 to the current version (28.3) and cannot run ng serve anymore. I receive nearly the same error text as @denkomanceski.

Using Windows 10, here my version info:

angular-cli: 1.0.0-beta.28.3
node: 6.6.0
os: win32 x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5

[lukejoliat]

Here's my full version in for my mac install:

angular-cli: 1.0.0-beta.28.3
node: 7.4.0
os: darwin x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

[lundcm]

I'm having the same issue. Apparently I choose the wrong time to get into Angular dev again :frowning_face:

```
angular-cli: 1.0.0-beta.28.3
node: 6.9.5
os: linux x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

[gotofritz]

Same problem as @denkomanceski, but with node 6.4.0.
Project created with no options ng new xxx
Problem persists also if I downgrade to 1.0.0-beta.22-1 (

angular-cli: 1.0.0-beta.28.3
node: 6.4.0
os: darwin x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

[andreas-aeschlimann]

I have to be honest, I don't understand what is going on. I have tried to downgrade angular-cli, reinstall all local and global modules, but no success so far.

[lundcm]

@andreas-aeschlimann - from #4378 it looks like it might be an angular-cli dependency that wasn't locked to a certain version. That issue is a duplicate, but appears to be more active.

[andreas-aeschlimann]

In case anyone cares: To clean the broken dependencies, I updated to @angular-cli globally and locally, created a new project bla and checked the package.json. Then I copied the values to my existing project and tried ng serve again. It now works again, phew...

{
  "name": "bla",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "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/cli": "1.0.0-beta.29",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "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.3.0",
    "typescript": "~2.0.3"
  }
}

[beeman]

The Parenthesized pattern error is probably related to this issue + fix here: https://github.com/angular/angular-cli/issues/4378#issuecomment-277127588

[lukejoliat]

Ok well the fix mentioned by @beeman removed the error, but now I'm back to my original problem. The server runs but when I enter the url, I get the 'this site can't be reached message.'

Does anyone have any idea what this could be?

[lukejoliat]

I tried this on my other mac and it worked. So it's laptop specific. It must be some setup issue or security thing on my computer.

[lundcm]

"Resolution" is available from #4378 by hard coding either acorn or rxjs to the versions below in the project.json file after deleting node_modules and doing a full re-install.

"rxjs": "5.0.1"
"acorn": "4.0.7"

[steveo99]

In Issue #1610 webpack live reload is not working, miguelcaravantes commented 5 hours ago:

the problem is the new version the @ngtools/webpack
i solved it go back to beta26 and @ngtools/[email protected]

this command
npm install --save @ngtools/[email protected]

maybe work in beta 28.

This worked for me.

[gotofritz]

I can confirm that it now works for me.

I did un unistall and re-install for the npm angular-cli module

[hansl]

@lukejoliat if you have a Windows machine, could you try reinstalling the CLI? Let me know if it's fixed.

[kilgarenone]

Live reload doesn't work for changes in.ts files. It works on html.

@angular/cli: 1.0.0-beta.30
node: 6.9.5
os: win32 x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/flex-layout: 2.0.0-beta.4
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6
@ngtools/webpack: 1.2.7

[beeman]

@kilgarenone a new version of @ngtools/webpack has been released recently.

Can you remove node_modules and npm install and see if that fixes it?

[pnsvinodkumar]

Cool.. @beeman
Thank you.. It works

delete "node_modules"
npm install

[KISHANSHUKLA]

ng serve not working plz help me.

[lordnino]

for any of you guys who still have the problem, you need to re-install angular-cli through this command

npm install -g @angular/cli

or if you are using the old cli, you can just updated by this command

ng update

[KISHANSHUKLA]

Thanks man..

[aarondiazr]

@lordnino thanx for you comment, fix my problem with angular-cli!!!!

[filipesilva]

Closing as the original poster has identified it's a local setup problem (https://github.com/angular/angular-cli/issues/4368#issuecomment-277152176).

Most of the comments here are also completely unrelated to the original one.

[naru6be]

At last find the solution for ng command is not working issue ,Find the solution below http://itechiesol.blogspot.com/2017/07/angular-cli-ng-command-is-not-working.html

[ilkin93]

69% building modules 697/701 modules 4 active ...es\@angular\common\src\facade\ 69% building modules 697/702 modules 5 active ...gular\common\src\facade\collec 69% building modules 698/702 modules 4 active ...gular\common\src\facade\collec 69% building modules 699/702 modules 3 active ...gular\common\src\facade\collec 69% building modules 700/702 modules 2 active ...gular\common\src\facade\collec 69% building modules 701/702 modules 1 active ...gular\common\src\facade\collec 69% building modules 702/703 modules 1 active ...\@angular\common\src\facade\erHash: a0a14da72a6852660afd
Time: 11803ms
chunk {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 234 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.map (main) 4.04 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.map (styles) 9.71 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Can anyone help me? when i start to write "ng-serve/server" the app doesn't launch

[AnalyzePlatypus]

As of March 2018, this problem has resurfaced.
This shell script reproduces the problem:

# fail.sh
npm install -g @angular/cli
ng new dir
cd dir
npm install
ng serve --open

My browsers (Safari 11.0.3 and Chrome 65.0.3325.162) both claim that "the server unexpectedly
dropped the connection".

System

macOS High Sierra 10.13.3

$ uname -a
 17.4.0 Darwin Kernel Version 17.4.0: Sun Dec 17 09:19:54 PST 2017; root:xnu-4570.41.2~1/RELEASE_X86_64 x86_64

```shell
$ node --version
v9.4.0

```shell
$ ng version
Angular CLI: 1.7.3
Node: 9.4.0
OS: darwin x64
Angular:
...

Debugging steps

The port, (4200) is correctly bound to node:

$ lsof -i :4200
COMMAND   PID      USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    45087 developer   19u  IPv4 0x8ad892271debf961      0t0  TCP localhost:4200 (LISTEN)

Both curl and Postman manage to load the bundle from ng correctly:

$ curl -L localhost:4200/
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <app-root></app-root>
  ...
</html>

Safari 11.0.3 and Chrome 65.0.3325.162 both claim that "the server unexpectedly
dropped the connection".

Why are my browsers unable to connect to the Angular dev server, when curl and Postman can?

Update

Running ng serve --host 0.0.0.0 and visiting 0.0.0.0:4200 solves this.
I still do not understand why Chrome and Safari dislike localhost:4200.

[jcotilla]

thanks @lordnino
problem solved 👍

[playnox]

@lordnino Thanks mate! simple
npm install -g @angular/cli
did the job...

[aanya1879]

As of March 2018, this problem has resurfaced.
This shell script reproduces the problem:

# fail.sh
npm install -g @angular/cli
ng new dir
cd dir
npm install
ng serve --open

My browsers (Safari 11.0.3 and Chrome 65.0.3325.162) both claim that "the server unexpectedly
dropped the connection".

System

macOS High Sierra 10.13.3

$ uname -a
 17.4.0 Darwin Kernel Version 17.4.0: Sun Dec 17 09:19:54 PST 2017; root:xnu-4570.41.2~1/RELEASE_X86_64 x86_64

$ node --version
v9.4.0

$ ng version
Angular CLI: 1.7.3
Node: 9.4.0
OS: darwin x64
Angular:
...

Debugging steps

The port, (4200) is correctly bound to node:

$ lsof -i :4200
COMMAND   PID      USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    45087 developer   19u  IPv4 0x8ad892271debf961      0t0  TCP localhost:4200 (LISTEN)

Both curl and Postman manage to load the bundle from ng correctly:

$ curl -L localhost:4200/
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <app-root></app-root>
  ...
</html>

Safari 11.0.3 and Chrome 65.0.3325.162 both claim that "the server unexpectedly
dropped the connection".

Why are my browsers unable to connect to the Angular dev server, when curl and Postman can?

Update

Running ng serve --host 0.0.0.0 and visiting 0.0.0.0:4200 solves this.
I still do not understand why Chrome and Safari dislike localhost:4200.

Visiting http://127.0.0.1:4200/ worked for me.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>