angular-cli: ng serve command not working

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

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.

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

@denkomanceski I have the exact same problem

@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?

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/webpack@1.2.4

this command npm install --save @ngtools/webpack@1.2.4

maybe work in beta 28.

This worked for me.

I’m also experiencing the same issue as @denkomanceski

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

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

@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.