How to import local monorepo typescript package in Angular apps?

I'm trying to integrate an Angular project into a PNPM workspace monorepo that mainly contains react app. Here is the directory structure

|-apps
|  |-react-app
|  |  |-package.json
|  |
|  |-angular-app (new)
|    |-package.json
|
|
|-packages
|  |-shared
|     |-index.ts
|     |-package.json
|
|-package.json
|-pnpm-workspace.yaml

Lets say the shared package has the name @my-app/shared and it has "main": "index.ts".

In the react-app, I can install this local package and directly use it in my code like the following

import { someValue } from '@my-app/shared';

With some adjustment to the webpack config, the react-app is able to include the shared module in the bundle correctly.

However, I couldn't figure out how to do it in an angular app. The package can install correctly and everything, but when I run the development server, seems that it doesn't include the @my-app/shared into the bundle

import { value } from '@my-app/shared';
console.log('xxx', value);

When I inspected the bundle, seems that the angular compiler does not bundle the module. Instead it just shows the placeholder

How do you import local package in Angular then? I believe there needs to be some config added to the angular.json but I couldn't find any resource. All of the sources out there points to Angular Library through ng generate library, which isn't what I'm looking for since @my-app/shared just a simple typescript utils functions.

I've run into the same problem. Unfortunately, the only way I've been able to resolve it is using tsconfig paths.

Assuming the above structure:

|-apps
|  |-react-app
|  |  |-package.json
|  |
|  |-angular-app (new)
|    |-package.json
|    |-tsconfig.app.json
|
|
|-packages
|  |-shared
|     |-index.ts
|     |-package.json
|
|-package.json
|-pnpm-workspace.yaml

Note the file at apps/angular-app/tsconfig.app.json

{
  "compilerOptions": {
    "paths": {
       "@my-app/shared": ["../../packages/shared/index.ts"]
    },
    // ... the rest of your options
  }
}

This has the unfortunate downside of the angular-app having to recompile the entire shared package whenever there's a change. Imo, it's better than nothing. If there's a better way, I'd love to know!