DEV Community

NagarLalit
NagarLalit

Posted on

How rollup's latest release affected our angular library build

In one of our project at workplace we are using mono-repo architecture for our angular applications.
Following is the tech stack for the mono repo.

  1. Angular
  2. Lerna (to manage the packages at multiple application level)
  3. NPM (package manager)

Folder structure:-

project
│   README.md   
│   lerna.json
|   package.json
|   package-lock.json
└───apps
│   │
│   └───angular-app-1
│       │   package.json
│       │   angular.json
│       │   ...
|   |
│   └───angular-app-2
│       │   package.json
│       │   angular.json
│       │   ...
|
└───SDK
|   |
│   └───angular-library
│       │   package.json
|       |   ...
Enter fullscreen mode Exit fullscreen mode

The angular library located inside SDK directory is used to share the code between multiple angular applications. Majorly it contains services, translators and utility functions.
The npm package which is used to build angular library is ng-packagr (for more info visit this website)
ng-packagr internally uses rollup for building the angular library. See the highlighted package in below screenshot.

ng-packagr's package.json

If you have noticed ng-packagr is using caret(^) sign to download the rollup package. It means every package version from 2.0.0 till < 3.0.0 will be automatically fetched from npm registry whenever we are going to install the packages.

When rollup released its version 2.75.3 our angular library's build was suddenly started breaking. It throws following error.
Cannot read properties of null (reading 'render')
Visit this link to see more details

Remediation:-
When we checked the npm error log. We have found out that it was getting generated from rollup.js . But we were not using rollup.js in our root package.json so to know that from where it is getting installed we fired following command to identify the source package.
npm list rollup

npm list result
Then we got to know that it is being used by ng-packagr.
To resolve the issue quickly we added rollup's latest stable version in our root package.json without caret sign due to which the version specified by us was installed instead of the version which is required by ng-packagr.

"rollup": "2.75.2"
Enter fullscreen mode Exit fullscreen mode

It was later fixed by rollup team in another release.
Visit this link to understand the fix

Top comments (0)