Skip to content

NX Tips: Managing TsConfig Compiler Options Paths when building multiple angular libraries

Cover Image

Working with NX allows one to develop publishable or local shared libraries for all the applications and libraries in the monorepo itself.

One issue that one may encounter is when trying to build libraries that depend on other libraries within the same monorepo. Say for instance we are working in an nx workspace called @boomerang and within this workspace we have two angular buildable libraries called @boomerang/common and @boomerang/utils. Since these are Angular libraries, NX uses it's own wrapper around ng-packagr called @nrwl/ng-packagr-lite.

If, say @boomerang/common imports @boomerang/utils, when trying to build @boomerang/common, an error I encountered looked like TS2307: Cannot find module '@boomerang/utils' or its corresponding type declarations.

When I looked into what was causing the issue, its seems like a small tweak to the tsConfig.base.json at the root of the workspace by adding the @boomerang/utils dist path to the compilerOptions paths fixes the import issue.

{
	"compilerOptions": {
		"paths: {
			"@boomerang/common": ["libs/common/src/index.ts"],
 		    "@boomerang/utils": ["libs/utils/src/index.ts"],
 		    "@boomerang/utils": [
 			    "dist/libs/utils",
 			    "libs/utils/src/index.ts"
 		    ]
		}
	}
}

This solution was inspired by this comment on nx github issues as well as this commit diff solution. Both of these mention updating the package.json as well to use the npm scope, i.e. updating the package.json for @boomerang/utils to look like:

{
	"name": "@boomerang/utils"
}

However, this update doesn’t necessarily fix the build issue if your packages are not publishable.

Happy Hacking!

Resources and Links