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 #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 ☹️

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.