이슈

현재 사내 패키지를 모노레포 구조로 관리하고 있다. angular를 프레임워크로 사용하고 있고, 모노레포 관리를 위해서 nx + lerna를 사용중이다.

nx를 사용하고 난 이후부턴 발생하지 않았지만 angular + lerna 조합으로만 사용했을 때 발생했던 이슈였다. lerna에서 병렬 빌드를 지원하고 있어 여러 패키지를 병렬 빌드로 돌렸는데 아래와 같은 에러가 발생했다.

Compiling with Angular sources in Ivy partial compilation mode.

ngcc is already running at process with id …

If you are running multiple builds in parallel then you might try pre-processing your node_modules via the command line ngcc tool before starting the builds.

대충 해석해 보자면,

ngcc를 이용해 컴파일 하려고 했는데 다른 프로세스에서 이미 ngcc를 사용중이라 컴파일할 수가 없다. 그러니까 빌드하기 전에 ngcc로 먼저 컴파일 해놓던지, 병렬 빌드하지 마라.

요런 얘기였다.

원인

Angular 8까지는 View Engine을 통해 컴파일과 렌더링 과정을 처리했는데, 9부턴 Ivy를 기본 옵션으로 사용하고 있다. Ivy에 대해서는 컴파일과 렌더링 과정에 최적화가 이루어졌구나 정도만 알고 넘어가자.

사내 패키지도 Angular를 9버전으로 올리면서 Ivy 모드를 사용했었다. Ivy 모드에서는 패키지를 빌드하기 전에 node_modules에 있는 Angular 기반의 패키지들을 Ivy에서 사용하는 형태로 컴파일해야 한다.

ngcc가 이 컴파일 역할을 담당하고 있는데 여러 프로세스에서 동시에 실행되는 것을 막아놓은 것 같다. 왜 막아놓았는진 모르겠다.

해결책

빌드하기 전에 컴파일을 미리 해놓으면 된다. 그런데 lerna를 사용하면 루트 폴더뿐만 아니라 각 패키지 폴더에도 node_modules 폴더가 생성되기 때문에 이 폴더들도 각각 컴파일 해줘야 한다.

{
  "scripts": {
    "ngcc": "ngcc"
  }
}

각 패키지의 package.json에 ngcc 컴파일 스크립트를 추가해 주고,

{
  "scripts": {
    "prebuild": "ngcc && lerna run ngcc"
  }
}

루트 폴더의 package.json에는 위와 같이 추가해준다. 빌드 과정이 실행되기 전에 루트 폴더의 node_modules 폴더를 컴파일하고 각 패키지의 ngcc 스크립트를 실행하는 것이다.