49

With angular 9 and it's new compilation engine IVY, my CI build times have increased substantially. This is of course is because ngcc is ran on many modules.

e.g.

Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

...

I thought ngcc cached the compiled libs in node_modules, but my node_modules is cached on my CI job and there is still compilation occuring, so it can't be.

What path should I cache to avoid recompiling all modules with ngcc on each build?

Maxime Dupré
  • 5,319
  • 7
  • 38
  • 72
  • I'm not experiencing the same problem. When caching node_modules the build time reduces from 360 to 219 seconds for me. You might want to double check that your cache is working properly. Maybe your cache is scoped to the current branch? In this case the first build will regenerate the es2015 modules. Afterwards it's way quicker. – Christian Klemm Mar 12 '20 at 09:14
  • 3
    What does the cache line look like exactly in your circle-ci config? The ivy build cache looks like it resides in `node_modules/.cache` (a hidden directory), so the glob pattern might be off? – Rusty Shacleford May 03 '20 at 17:51
  • In my case, the ngcc cache be removed after `yarn install` (or `npm install`). – Eric Li Jun 28 '20 at 15:08
  • Did anyone found answer to this? – Adi Jul 27 '20 at 03:24
  • 1
    One way of doing this is by using NxDevTools: https://nx.dev/ – Mateus Carniatto Nov 12 '20 at 17:23
  • Note that with Angular 13, ngcc will no longer compile Angular (and any newer libraries) which will drastically speed up CI! No cache needed. – Bufke Dec 06 '21 at 20:39

3 Answers3

2

UPDATE 1:

Hard coded Ivy entry points have been Removed from the angular build if you are using latest, it was previously & wrongly hardcoded inside Angular init TS github code link

Now/latest you can just do

ngcc --properties es2015 browser module main

For older versions only, please see Update 1 for newer versions

ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

Or as par of you build inside package.json

{  
  "scripts": {    
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
  }
}

Some ref configure Travis to

# custom caching for .travis.yml
install:
- npm ci
# keep the npm cache around to speed up installs
cache:
  directories:
  - "$HOME/.npm"
# you can add other

Option 2: Much faster with yarn or pnpm

pnpm install
// or
yarn install
// or
npm install --prefer-offline --no-audit
Transformer
  • 6,963
  • 2
  • 26
  • 52
0

In short, you can't do that. Current version of ngcc doesn't check for any changes and always recompile all packages upon calling ngcc command. This case can be resolved in future with angular linker but it's not certain, for sure it will improve build times.

EltraEden
  • 111
  • 1
  • 5
0

Retain package-lock.json and folder node_modules/ between each runs. I hope you are NOT running build on brand new image every time.

If package.json or package-lock.json gets updated in next CI build, only the updated ones will be pre-processed and installed. Others will not be installed again and again.

There are various do's and dont's guidelines around package-lock.json and node_modules folder. You will find a lot to read about it on the internet and I am not going to get involved

Thumb rule: Keep package-lock.json and node_modules together

Basically a package gets installed (mentioned in package.json) if

  1. There is no entry in package-lock.json
  2. Updated version is available than the one entered into package-lock.json
  3. Package will be removed if its not referred any more
Jp Vinjamoori
  • 1,173
  • 5
  • 16