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,
SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
Amol Ghotankar
  • 2,008
  • 5
  • 28
  • 42
  • 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 '21 at 09:45
  • Just downgrade to Angular 11+ and wait till the Ionic team will give official support for Angular 12. – Sampath May 24 '21 at 10:47
  • https://stackoverflow.com/questions/67647471/angular-12-source-map-is-missing-in-browser Here is the answer. Try it. it worked for me. – ammad khan May 26 '21 at 10:33

7 Answers7

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
MShNajar
  • 56
  • 7
tano
  • 2,657
  • 1
  • 15
  • 16
  • 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 '21 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 '21 at 18:09
  • I was upgrading my Angular version to 13 and this did the trick for me! – LatentDenis Feb 04 '22 at 15:36
  • This is the answer. Thanks – pantonis Apr 07 '22 at 04:52
37

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
Sameer
  • 4,758
  • 3
  • 20
  • 41
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"
Pran Kumar Sarkar
  • 953
  • 12
  • 26
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.

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
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.

minigeek
  • 2,766
  • 1
  • 25
  • 35
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.

Christian Phillips
  • 18,399
  • 8
  • 53
  • 82
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".

joohong89
  • 1,241
  • 8
  • 15