Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

can't run ng serve in development mode

I can't run ng servein development mode.

I've upgraded Angular v11 to v12. Since then, I have compiling delays and development mode appears to not be enabled.

I'm always getting this warning:

****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************

My Lazy Chunk files are like this:

Terminal

and is taking a lot of time to debug anything since the compile files are being set on the browser.

Browser Inspect

I've already check my enviroment.ts variables and are set to:

export const environment = {
  production: false,
  api: 'http://127.0.0.1:8000'
};

My Angular Extension for Chrome is warning me that I'm running in production, even when I don't want to:

We detected an application built with production configuration. Angular DevTools only supports development builds.

ng serve section on angular.json

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "backoffice:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "backoffice:build:production"
            }
          }
        }

Exactly like the one on v11, i've checked

Update: Migrating Issues. Runned ng update @angular/cli --migrate-only --from=11.2.0 like @BojanKojog answer bellow.

like image 254
Cristian Oliveira Avatar asked Jun 17 '21 13:06

Cristian Oliveira


People also ask

What to do if ng serve is not working?

So what is the problem? Try npm uninstall -g angular-cli & npm cache clear . Then install the global CLI again.

Can I use NG serve in production?

You should not use ng serve for production because it use webpack-dev-server that is build for development only.

Why should I not use Ng serve for production?

You can use Angular Server Side Rendering (SSR) to run it on a node.js server. You should not use ng serve for production because it use webpack-dev-server that is build for development only. Right, my question was geared more towards why I shoudln't use it for production.

How to get Ng serve to run faster for local development?

To fix this manually, you add the development options as defaults, and a defaultConfiguration set to development for the serve target. Now, when running ng serve you will get a development build, which is faster for local development. If you liked this, click the ❤️ so other people will see it.

What is the use of Ng serve command?

The ng serve command re-builds the project in development mode before launching it, means ng serve includes ng build + ng serve, hence ng serve accepts all the flags of ng build. The last flag in the table enables or disables hot module replacement (HMR).

Does angular DevTools support production configuration?

We detected an application built with production configuration. Angular DevTools only supports development builds. "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "backoffice:build" }, "configurations": { "production": { "browserTarget": "backoffice:build:production" } } }


Video Answer


1 Answers

Rerun update migrations

ng update @angular/cli --migrate-only --from=11.2.0

Explanation

Projects that have not used ng update to update to v12 are missing important migrations that switch some builder options to their default values in v11. Without this migration, the builder now assumes production configuration as the defaults were changed to represent production builds by default. An automatic migration that is run in ng update @angular/cli would set the affected options to their prior defaults, such that a project continues to behave the same. Without this migration however, builds are configured for production with the corresponding optimisations turned on, making development builds very slow.

Please use ng update @angular/cli --migrate-only --from=11.2.0 to apply the migrations or update using ng update @angular/core @angular/cli when still on v11.

like image 59
Bojan Kogoj Avatar answered Oct 18 '22 05:10

Bojan Kogoj