title: Angular 12 - Generating browser application bundles (phase: sealing) very slow
body: <p>After I update my Angular Application from <strong>Angular 11.2.12</strong> to <strong>Angular 12.0.0</strong></p>
  <pre><code>Angular CLI: 12.0.0
  Node: 14.15.4
  Package Manager: npm 6.14.10
  OS: win32 x64
  
  Angular: undefined
  ...
  
  Package                      Version
  ------------------------------------------------------
  @angular-devkit/architect    0.1200.0 (cli-only)
  @angular-devkit/core         12.0.0 (cli-only)
  @angular-devkit/schematics   12.0.0 (cli-only)
  @schematics/angular          12.0.0 (cli-only)
  typescript                   4.2.4
  </code></pre>
  <p><code>ng serve</code> <em>generating browser application bundles</em> takes horrible long.</p>
  <pre><code>Build at: 2021-05-28T06:03:02.008Z - Hash: 3b63141b76ac88698d67 - Time: 63941ms &lt;- change one line in template
  Build at: 2021-05-28T06:08:04.424Z - Hash: e684399b5f80b2b4d785 - Time: 59834ms &lt;- change property name
  Build at: 2021-05-28T06:10:05.725Z - Hash: 8125e1bdc31a25d398b5 - Time: 65621ms &lt;- change one line in model
  </code></pre>
  <p>I try different properties for <code>ng serve</code>, at the moment I use:</p>
  <pre><code>ng serve --source-map=true --hmr --live-reload
  </code></pre>
  <p>After update to <strong>Angular 12.0.0</strong> I generate an complete new angular app and take over the <code>angular.json</code> to my application <strong>myapp</strong>:</p>
  <h3>angular.json</h3>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;myapp&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;scss&quot;
          }
        },
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;myapp&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
            &quot;options&quot;: {
              &quot;outputPath&quot;: &quot;dist/myapp&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.json&quot;,
              &quot;inlineStyleLanguage&quot;: &quot;scss&quot;,
              &quot;assets&quot;: [&quot;src/favicon.ico&quot;, &quot;src/assets&quot;],
              &quot;styles&quot;: [&quot;./node_modules/@angular/material/_theming.scss&quot;, &quot;src/styles.scss&quot;],
              &quot;scripts&quot;: []
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;500kb&quot;,
                    &quot;maximumError&quot;: &quot;1mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;2kb&quot;,
                    &quot;maximumError&quot;: &quot;4kb&quot;
                  }
                ],
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;outputHashing&quot;: &quot;all&quot;
              },
              &quot;development&quot;: {
                &quot;buildOptimizer&quot;: false,
                &quot;optimization&quot;: {
                  &quot;scripts&quot;: true,
                  &quot;styles&quot;: false,
                  &quot;fonts&quot;: false
                },
                &quot;vendorChunk&quot;: true,
                &quot;extractLicenses&quot;: false,
                &quot;sourceMap&quot;: true,
                &quot;namedChunks&quot;: true
              }
            },
            &quot;defaultConfiguration&quot;: &quot;production&quot;
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;myapp:build&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;myapp:build:production&quot;
              }
            }
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;myapp:build&quot;
            }
          },
          &quot;test&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
            &quot;options&quot;: {
              &quot;main&quot;: &quot;src/test.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
              &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
              &quot;inlineStyleLanguage&quot;: &quot;scss&quot;,
              &quot;assets&quot;: [&quot;src/favicon.ico&quot;, &quot;src/assets&quot;],
              &quot;styles&quot;: [&quot;./node_modules/@angular/material/prebuilt-themes/indigo-pink.css&quot;, &quot;src/styles.scss&quot;],
              &quot;scripts&quot;: []
            }
          },
          &quot;lint&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
            &quot;options&quot;: {
              &quot;tsConfig&quot;: [&quot;tsconfig.app.json&quot;, &quot;tsconfig.spec.json&quot;, &quot;e2e/tsconfig.json&quot;],
              &quot;exclude&quot;: [&quot;**/node_modules/**&quot;]
            }
          },
          &quot;e2e&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
            &quot;options&quot;: {
              &quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
              &quot;devServerTarget&quot;: &quot;myapp:serve&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;devServerTarget&quot;: &quot;myapp:serve:production&quot;
              }
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;myapp&quot;
  }
  </code></pre>
  <p>Is there something I can do to speed up the <em>Generating browser application bundles (phase: sealing)</em>?</p>