After upgrading to Angular 9, compile time has increased drastically

Question

When I upgraded from Angular 8 to 9, the compile time increased by more than 3 times and also, I used the Scss style template but after upgrading, when I generate component, it creates a css file for the component.

I checked angular.json and the config is "styleext": "scss" is there any solution for these issues?

Answer 1

Compile Time Issue

FIX

Turn off AOT in the angular.json -> search the first occurrence (default build config) of aot and change from true to false

The production build should still use AOT, since the production build config further down has AOT still turned on.

Explanation

As part of migration from Angular 8 > 9 they simply decided to enable the AOT (Ahead Of Time) compilation not only for --prod builds, but also for regular builds (+watch/serve), with the argument that AOT is now much faster with the new Ivy compiler. They haven't thought this through IMO, because this caused my watch/serve builds to increase from 1 second to 30 seconds.

Further reading: https://v9.angular.io/guide/ivy

Style Extension Issue

The correct definition is through style and not styleext. Create a new project (ng new demo) and choose SCSS and have a look how it is defined there.

Answer 2

I got same issue when I migrated Angular 4 to Angular 9. Then, I disabled Ivy in Angular 9. From Angular 9, Ivy is set to true as default which was not in Angular 8.

Go to tsconfig.json and disabled Ivy mode.

{
  ...
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": false
  }
  ...
}

Note: This is temporary solution only. Maybe, in the next version, this issue will be handled.

Answer 3

I see only temporary half-solutions so I am going to provide more ligh on this matter.

I met these problems on few projects and it is probably due to how your app is written. In my case there were problems with compiling scss and wrong NgModules management. Unfortunately you cannot show us whole application I guess.

I recommend a few things:

• Use webpack-bundle-analyzer and fix everything you will find thanks to this tool (it is possible you compile things you have there by accident or that you don´t need at all).
• Check your global styles. It is important how you import those styles, you have to AVOID duplicities of imported styles and circular dependencies. It is easy to miss that you are importing scss file that import another scss file and so on. I recommend to have only ONE file with imports (order of imports matters), then it is easy to debug the compile time of those styles. And in components you will never import this file that imports everything but only the styles/mixis you really need.
• Check what libraries/styles/scripts you added in angular.json in scripts, styles and stylePreprocessorOptions. Everything like that can slow the build time.
• Maybe you want to try dart sass over node sass? If so, install fibbers, uninstall node-sass and try to build.
• Check your NgModules. Are all of them imported correctly? Again look into result javascript bundle. Aren´t there any duplicities you want to avoid in the result bundle?
• I recommend to reduce your app only on the core AppModule and maybe styles... then add (or even remove styles or other things) gradually more things... and build. You will debug the problem this way, find the problem and resolve it.

Things like that happen when the application grows and noone pays attention to this, but many of those things are easily to miss. People then say that Angular is bad and move to other libraries/frameworks, but it is just our misunderstanding of Angular genius and complexity that limits us. Good luck! :-)

Answer 4

Make sure in your angular configuration is similar to as below

    "@schematics/angular:component": {
      "style": "scss",
      "prefix": "cfs"
    },

I think styleext changed to style in angular 9

there might be some configuration issue, in angular, the compiler time should be drastically reduced.

you can look into this PR, i migrated and it wend well https://github.com/aniruddhadas9/candifood-ui/pull/15