NestJS + Angular project throws Module not found: Error: Can't resolve 'cache-manager'

Question

I have a NestJS backend (6.9.0) and Angular frontend project (8.2.11). I use concurrently to start the front end and backend in parallel in my localhost.

The backend starts fine (starts faster) but when the Angular project starts compiling and when the compilation is ready it throws the following error:

Any ideas why ?

This has worked fine before, unfortunately I can not pinpoint exactly what changes caused this behavior. In NestJS I am not using the cli, I build it just with tsc.

WARNING in ../server/node_modules/@nestjs/common/utils/load-package.util.js 8:39-59
Critical dependency: the request of a dependency is an expression

ERROR in ../server/node_modules/@nestjs/common/cache/cache.providers.js
Module not found: Error: Can't resolve 'cache-manager' in '/mnt/c/codes/salesforce-compare/server/node_modules/@nestjs/common/cache'
ERROR in ../server/node_modules/@nestjs/common/pipes/validation.pipe.js
Module not found: Error: Can't resolve 'class-transformer' in '/mnt/c/codes/salesforce-compare/server/node_modules/@nestjs/common/pipes'
ERROR in ../server/node_modules/@nestjs/common/serializer/class-serializer.interceptor.js
Module not found: Error: Can't resolve 'class-transformer' in '/mnt/c/codes/salesforce-compare/server/node_modules/@nestjs/common/serializer'
ERROR in ../server/node_modules/@nestjs/common/pipes/validation.pipe.js
Module not found: Error: Can't resolve 'class-validator' in '/mnt/c/codes/salesforce-compare/server/node_modules/@nestjs/common/pipes'

Answer 1

Looks like some of your nestjs packages was imported in angular application.

I also encountered this issue. In my case, I shared entity classes with @ApiProperty annotations from @nestjs/swagger for both backend and frontend apps.

Answer 2

This happens when trying to import parts of a package which are not designed for being incorporated in a final bundle (like ApiProperty for the case of @chshanovskiy and me).

This is a common issue when trying to mix Nest.js and JS based front-end parts (in my case: Angular in an Nx workspace) and there is an interesting discussion about it in the Nest project itself here.

After reading carefully and trying the strategies described in the previous issue, I finally solved it by changing the way I architecture my dependencies, here is an explanation about the working file system I ended with:

├── apps
│ ├── back // <- Nest.js app
│ ├── front // <- Angular app
├── libs
│ ├── back
│ │ ├── service-1 // <- Nest.js library (publishable)
│ ├── front
│ │ ├── service-1 // <- Angular library (NgRx feature, publishable)
│ ├── interfaces
│ │ ├── service-1 // <- Node.js library (publishable)

• back / service-1: Nest.js library, using Swagger annotations (especially ApiProperty). Each DTO Class also implements an homologue interface coming from interfaces / service-1
• front / service-1: Angular library calling Nest.js APIs and specifying its interface contract with types coming from interfaces / service-1
• interfaces / service-1: Standalone Node.js library exporting interfaces / types which needed to be share between back / service-1 and front / service-1

This way, both back and front depend are on same interfaces and there is no need to use Nest.js parts somewhere else than in their own places: the back/* libs and apps.