Skip to content

Add documentation for "npm link" #61114

@mcelotti

Description

@mcelotti

Describe the problem that you experienced

I think it would be beneficial to add some details about the "npm link" technique to the "Creating Libraries" page, as it can help connect and debug multiple libraries while working on an Angular project.

On top of using "npm link", we benefit from:

  • Auto-reload when library code changes
  • The ability to "npm link" only selected libraries
  • Fine-grained permissions and DevOps independence, as it's not a monorepo setup
  • Familiarity with other npm-based projects (both backend and frontend) that follow the same "npm link" approach

Thanks!

Enter the URL of the topic with the problem

https://angular.dev/tools/libraries/creating-libraries

Describe what you were looking for in the documentation

Best practices and common patterns for using "npm link" with Angular libraries.

Describe the actions that led you to experience the problem

I needed to connect and debug multiple libraries while working on my Angular project. Unfortunately, the official docs don’t explain how to do that.

Describe what you want to experience that would fix the problem

Add a section with the configurations needed to properly set up "npm link".

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here


If the problem is browser-specific, please specify the device, OS, browser, and version


Provide any additional information here in as much as detail as you can

Here's my current setup. All the details about how "npm link" works are available in the npm documentation, so I'll skip that part.

In the project's angular.json:

- "projects.angular-main.architect.build.configurations.development.sourceMap" is set to { "scripts": true, "styles": true, "vendor": true }
- "projects.angular-main.architect.build.options.preserveSymlinks" is set to true
- "cli.cache" is set to { "environment": "local", "enabled": false }

In the libraries' tsconfig.lib.json:
- "declarationMap" is set to true

With these configs, I'm able to build and watch my libraries, use "npm link" to add them to my project, and debug all the code (both the project and the libraries) - all while maintaining a good developer experience, with fast reloads as well.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: docsRelated to the documentation

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions