Angular では下記のような感じに、マルチプロジェクト構成を取ることができます。
Angular - ワークスペースとプロジェクトのファイル構造 のマルチプロジェクト に記載されている手順を踏むことで作成できます。

workspace/
    ...
    projects/
        application-project/
            ...
            src/
        library-project/
            ...
            src/

さてこのマルチプロジェクトですが、Visual Studio Code でデバッグしようとしても、ng serve しているプロジェクト以外でデバッグポイントを置いている箇所は無視されてしまいます。
それらもデバッグ対象にしたい場合は、いくつか設定する必要があるので、この記事でまとめていきたいと思います。

検証環境

使用したAngular の情報

Angular CLI: 8.3.6
Node: 10.16.3
OS: linux x64
Angular: 8.2.8
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.6
@angular-devkit/build-angular      0.803.6
@angular-devkit/build-ng-packagr   0.803.6
@angular-devkit/build-optimizer    0.803.6
@angular-devkit/build-webpack      0.803.6
@angular-devkit/core               8.3.6
@angular-devkit/schematics         8.3.6
@angular/cli                       8.3.6
@ngtools/webpack                   8.3.6
@schematics/angular                8.3.6
@schematics/update                 0.803.6
ng-packagr                         5.5.1
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.39.2

使用したVisual Studio Code の情報

基本情報

1.38.1
b37e54c98e1a74ba89e03073e5a3761284e3ffb0
x64

拡張機能

• Debugger for Chrome

設定手順

設定を始める前にVisual Studio Code の拡張機能Debugger for Chrome をインストールしておきます。

1. マルチプロジェクトをVisual Studio Code で開きます
2. ライブラリプロジェクトのソースマップ情報もng serve するために対象プロジェクトのangular.json に下記の設定を追加します

   "serve": {
   "options": {
    ...
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    }
   },
   }
   ...

3. 画面上部にあるツールバーで「デバッグ」＞「構成の追加」をクリックします
4. 手順３で表示されるウィンドウで"Chrome" を選択します
5. 手順４で作成されたlaunch.json を下記のように編集していきます

   {
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Main",
            // (port) はng serve で使用しているポート番号を指定します
            "url": "http://localhost:(port)",
            // (path) はprojects フォルダーがある場所を、(application name) はng serve しているアプリケーションプロジェクトを指定します
            "webRoot": "${workspaceFolder}/(path)/projects/(application name)",
            // (library name) はデバッグ対象のライブラリプロジェクト名を指定します
            "sourceMapPathOverrides": {
                "webpack:///ng://(library name)/*": "${workspaceFolder}/(path)/projects/(library name)/src/*",
                "webpack:///./src/*": "${workspaceFolder}/(path)/projects/(application name)/src/*"
            }
        }
    ]
   }

補足

• Angular 8 の時点では、ライブラリプロジェクトのソースマップをserve する設定はangular.json で記述する必要があります
  • 古いバージョンではng serve --vendorSourceMap とオプションで指定できたようです
• TravelGuide2019Autumn でサンプルの実装をしています。
• 設定手順２のsourcemap の設定が上手くいっているかどうかはng serve してからChrome の開発者ツールの"Sources" タブで表示されているかで確認できます

参考文献

• Angular - ワークスペースとプロジェクトのファイル構造 (2019/10/08)