42

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,
    
3
  • I am also facing this issue and unable to find dev mode for angular 12. As you cannot debug in Prod mode as there won't be any source map in the browser.
    – ammad khan
    May 21, 2021 at 9:45
  • Just downgrade to Angular 11+ and wait till the Ionic team will give official support for Angular 12.
    – Sampath
    May 24, 2021 at 10:47
  • stackoverflow.com/questions/67647471/… Here is the answer. Try it. it worked for me.
    – ammad khan
    May 26, 2021 at 10:33

7 Answers 7

45

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"
        }

Then for running it on the go (embed web-server), run this command:

ng serve myapp --configuration development

Also for building and running the development version on a web-server (like NGinx) you could run this command:

ng build --configuration development
4
  • Thanks a lot! You really saved my time. But I still cannot figure out why NG-12 project cannot run in development mode automatically as another NG-11 project can do it. Although both have the same angular.json. So weird.
    – SHUMING LU
    Aug 24, 2021 at 14:25
  • 1
    you're welcome! Things change. To prevent accidental development build in prod they set production build as default. Since the serve uses the default configuration it causes the issue.
    – tano
    Aug 24, 2021 at 18:09
  • I was upgrading my Angular version to 13 and this did the trick for me! Feb 4, 2022 at 15:36
  • This is the answer. Thanks
    – pantonis
    Apr 7, 2022 at 4:52
37
+25

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
9

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"
1
  • 1
    Thanks, it works for me ! I'm on Windows 10. Maybe it should be the accepted answer ?
    – benCat
    Oct 12, 2021 at 10:09
8

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.

3

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.

1
  • 1
    Thanks for posting. Had the same error in a project at work. Jul 18, 2022 at 14:52
1

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.

0

Ran into this issue when I was trying to upgrade from v11 to v15.

The structure of angular.json and configurations were not updated during the migration.

Did the following to disable minification

  1. Added "development" to architect > build > configurations
  2. Added "development" to architect > serve > configurations
  3. Added "defaultConfiguration" to architect > serve

Run ng serve

Details of modifications to angular.json,

"architect": {
    "build": {
      ...,
      "configurations": {
        ...,
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      }
    },
    "serve": {
      ...
      "configurations": {
        ...
        "development": {
          "browserTarget": "myproject:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    ...
}

Also have to move "extract-i18n", "test", "lint", "e2e" under "architect".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.