How to test nested libraries locally in Angular?

Question

I have two component in my library named lib-questionnaire and lib-choices.

The component lib-questionnaire uses lib-choices like this in its html file.

<div class="row">
  <div class="col-xs-12">
    <lib-choices
       [name]="name"
       [id]="id"
       [choices]="choices">
    </lib-choices
  </div>
</div>

But since I have changes in my lib-questionnaire like adding another Input for example like this:

<div class="row">
  <div class="col-xs-12">
    <lib-choices
       [name]="name"
       [id]="id"
       [multipleChoices]=true
       [choices]="choices">
    </lib-choices
  </div>
</div>

The added Input which is [multipleChoice] is not currently declared in the lib-choices in the production but I've declared it in my local.

I've tried building first the lib-choices locally, then building the lib-questionnaire but it fails to build since it cannot accept my new input since it is not yet implemented in the production.

My question is how to build both of my components in the library locally?

Answer 1

You can use npm link, which creates a symlink in your dependant apps/libraries node_modules directory. It involves:

• Run npm link in the local library
• Run npm link @local-library-name in the host application
• But make sure you set "preserveSymlinks": true on your host applications/libraries angular.json file:

    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "preserveSymlinks": true,
        "tsConfig": "projects/button/tsconfig.lib.json",
        "project": "projects/button/ng-package.json"
      }
    }, 

In your case you can do the following:

• Get into @lib/choices directory and run npm link
• Get into @lib/questionnaire directory run npm link @lib/choices and do your build. You can also do npm link here so that you can use it in the host application by using npm link @lib/questionnaire

Update:

In angular 14, you would also have to update tsconfig.json of your host app:

"compilerOptions": {
    "preserveSymlinks": true,
}