I can't run ng serve
in 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.
So what is the problem? Try npm uninstall -g angular-cli & npm cache clear . Then install the global CLI again.
You should not use ng serve for production because it use webpack-dev-server that is build for development only.
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.
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.
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).
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" } } }
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With