Build in dev mode for Angular 12

user_767200 0
Viewed 26315

Angular 12 comes with default prod mode, how can we keep old dev mode ON? We are missing the sourcemap and the main.js is also minified by default which is cool but does not help in developer mode.

So the question is how to turn back to old dev mode or generate sourcemap and not minify. Tried updating the configuration in angular.json but did not work.

"optimization": {
  "scripts": false,
  "styles": {
    "minify": false,
    "inlineCritical": false
  },
  "fonts": false
},
"outputHashing": "none",
"sourceMap": true,
"extractCss": true,
angular
6 Answers

I've just added a development section under build/configurations

"development": {
          "optimization": false,
          "sourceMap": true,
          "namedChunks": true,
          "extractLicenses": true,
          "vendorChunk": true,
          "buildOptimizer": false,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "6mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }

And under serve/configurations:

 "development": {
          "browserTarget": "studio:build:development"
        }

and I run the app with ng serve myapp --configuration development

user_67505810

From official docs

--prod Deprecated: Use --configuration production instead.

The default configuration is set to production for ng build when a new project generated.

You have 2 options

  1. Build using
ng build --configuration development
  1. Change default configuration to development in angular.json file
projects > {YOUR-PROJECT-NAME} > architect > build > defaultConfiguration
user_117197870

The problem is that you did not use ng update when updating to the latest version, but you manually upgraded.

You can try to run the migrations yourself:

ng update @angular/cli --migrate-only --from 11 --to 12

If this doesn't work for some reason, the angular.json has gotten quite some updates. I would advise you to create a new project with v12 and check what differences there are between your current angular.json and the new one.

For instance, inside the .../architect.serve path there is not a "defaultConfiguration": "development" entry. Where for the .../architect.build this is set to "production". Perhaps adding these for your project should already be enough.

user_31069200

With Angular CLI v12.2.3,

ng build --configuration development

was not working for me.

So I had to use the below command instead:

ng build --configuration="development"
user_91278540

For me I had everything fine in angular.json but one of my environment.<uat>.ts file that gets replaced during build had production:true.

Changed for uat to production:false

Silly thing.

user_67899990

Using .net core publish step in Azure Pipeline

If you get this issue using Azure pipeline with .net core build/publish, then you need to alter the publish step in your web.csproj file.

Replace the following:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

With

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --configuration production" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --configuration production" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

You can see on lines 2 and 3 in the code snippet where the Command has changed from --prod to --configuration production.

user_14491810
Related