Integrating a local library with Angular: A comprehensive guide

As I was developing an Angular application, I had the idea to create a library containing reusable components for future projects. To achieve this, I set up a separate Angular workspace where I created a library project. I utilized the automatically generated application project within the workspace to preview individual components.

ng new my-components-library
cd my-components-library
ng generate library components-library

After successfully creating the library with functional components that passed unit tests and integrated well with the attached application project, I needed to incorporate them into my project's workspace. I attempted to include the library using the following method.

Within my project's workspace

npm install ../my-components-library/projects/components-library

The command executed without any issues, adding a reference to the library in the host project's package.json. However, when I attempted to import modules from the external library into a project module using 

import {myModule} from 'components-library'
, I encountered an error stating that Angular could not locate the module.

angulartypescriptnpm

Answer №1

To establish a connection between your local library and host application, you have two options:

  • Execute npm link in the local library
  • Execute npm link @local-library-name in the host application
  • Remember to modify your host application's angular.json file. For Angular 11 or earlier versions, include 
    "preserveSymlinks": true
    . For Angular 12 or later, update sourceMap properties like scripts, styles, and vendor to true.
    "build": {
      "options": {
        "preserveSymlinks": true, // for Angular 11 or lower
      }
    }, 

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "sourceMap": {     // for Angular 12 or higher
              "scripts": true,
              "styles": true,
              "vendor": true
            },

To bundle the library into a tar package, use npm pack.

  • Run npm pack in your library
  • Install the tar package in your host application using npm i your-library-path.tgz
  • Alternatively, update the package.json of the host application with the new dependency and execute npm i
"your-library-name": "file:your-library-path.tgz",

Answer №2

To enable a library in angular.json, follow these steps:

"scripts": ["src/assets/scripts/yourComponentLibrary.js"]

In your component file where you intend to utilize the library, you must first declare it as a constant before the @Component({...

declare const YourComponentLibraryName: any;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered when attempting to execute a custom build task in VSTS for npm, resulting in a type error

In my package.json file, I have defined some scripts like this: "config": { "source": "./assets/stylesheets/civica-styles.scss", "dist": "./dist/civica-styles.css", "minCss": "./dist/civica-styles.min.css" }, "scripts": { "transpil ...

npmazure-pipelinesazure-pipelines-build-tasknpm-run

Is it possible to manipulate an Object within Object typescript?

My recent project involved working with React and Typescript to fetch data from an API. Once the data is fetched, it is saved as an object called coin. However, I encountered a situation where the data may not be fully loaded, resulting in coin being null. ...

javascriptreactjstypescriptapi

The function in Angular 5/Typescript disappears when attempting to call it from within another function

After importing D3 into my component, I encounter an issue when trying to assign a layout to the D3.layout property. Strangely, although the layout property is present in the console output of my D3 object, it seems to be unknown when I attempt to call i ...

angulartypescriptd3.js

Issue with Angular 2: Route remains unchanged when clicking back button despite view changes

Currently I am utilizing : "@angular/router": "3.0.0" An issue I am encountering is that upon pressing the back button of the browser, the view switches back to the previously loaded view, yet the route does not update. What could potentially be causing ...

angularangular2-routing

Utilize JQuery to choose the angular element

Can Angular tags be selected using JQuery? I am currently utilizing the ui-select Angular component, which is integrated into the HTML page as shown below: <ui-select ng-model="rec.currencyCode" on-select="ctrl.selectCurrencyCode(rec, $item)"> & ...

jqueryangularjstypescript

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

Currently, I am attempting to record the date and time in the JavaScript console. Despite the code successfully logging the dates, an error message persists: Note: The code is functioning properly, with the dates being displayed in the console. It is only ...

javascriptnode.jsangulartypescriptecmascript-6

Simple steps to turn off error highlighting for TypeScript code in Visual Studio Code

Hey there! I've encountered an issue with vscode where it highlights valid code in red when using the union operator '??' or optional chaining '?.'. The code still builds without errors, but vscode displays a hover error message st ...

javascripttypescriptvisual-studio-code

What is the reason for the truth value of `type a = {} extends {a?:number}? true:false;`?

Why is type a = {} extends {a?:number}? true:false; evaluated as true, while type b = {a?:number} extends {}? true:false; is also true! It seems like the empty object {} acts as a supertype that can extend other types. This raises some questions about ...

typescript

What is the process of setting up NPM to trust the firewall issuer for HTTPS proxying?

Currently facing a challenge using NPM within a corporate firewall environment. The firewall intercepts and signs all https traffic with its own CA. How can I establish trust for this CA in order to enable NPM functionality? ...

node.jshttpsssl-certificatenpmfirewall

When utilizing a Node package in conjunction with Electron, I encountered an error message stating `ERR_CONNECTION_REFUSED`

Currently, I am in the process of developing an app similar to a Pokedex using Electron. To accomplish this, I am utilizing this specific API, which serves as the node version of another API. The issue I'm encountering is that whenever I attempt to i ...

node.jsjsonapinpmelectron

Display a dynamic array within an Angular2 view

I have a dynamic array that I need to display in the view of a component whenever items are added or removed from it. The array is displayed using the ngOnInit() method in my App Component (ts): import { Component, OnInit } from '@angular/core' ...

javascriptangulartypescriptdynamic-arrays

Tips for identifying and resolving dependency issues

Recently, I've encountered multiple issues while trying to set up a React application. Initially, when I executed the npx create-react-app command, I faced a problem. It turned out that I needed to install Node.js before proceeding, so I installed it ...

reactjsnpmscripting

Module-alias cannot be resolved by esm

Currently, I am utilizing the combination of esm package and module-alias. However, it appears that esm is not recognizing module-alias's paths. This is how I am loading my server file: nodemon -r esm ./src/index.js 8081 At the beginning of my inde ...

javascriptnode.jsnpm

Having trouble getting Grunt to function properly on a Windows environment?

I recently started using grunt on Windows with version 0.3. After installing nodejs and npm, I installed grunt 0.3 using the following command: npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e3f6f1eaf0c4b4aa ...

windowsnode.jsgruntjsnpm

Issue occurred when trying to load controllers during the migration process from AngularJS1 to Angular6

Currently, I am in the process of upgrading AngularJS1 components to Angular6. My strategy involves creating wrappers for all existing AngularJS1 components by extending "UpgradeComponent" and storing them under the folder "directive-wrappers". However, wh ...

angularjsangularng-upgradeangular-upgrade

It appears that the input variables in Angular (5) are experiencing some issues

After upgrading my Angular project from version 4 to 5, I've noticed some unexpected changes in the behavior of my components. In my application, there is a ParentComponent and a ChildComponent. The ChildComponent receives an InputObject from its par ...

angular

Error: Unable to locate 'v8' in NextJS when using Twin Macro

I am encountering the error message Module not found: Can't resolve 'v8' when using a package in Nextjs with TypeScript. If I use a .js file, everything works fine. However, when I switch to a .tsx file, it throws a Module Not found error. ...

reactjstypescriptnext.jstailwind-css

Issue with Vue CLI: NPM script "dev" fails to run following system restoration on Windows 7

Hey there, I'm having some trouble running vue js projects using the npm run dev command. I've tried several solutions to fix it: reinstalling NodeJs, updating npm, installing a fresh vue project via cli following the official documentation, ...

node.jsnpmvue.js

Unable to access pathways from a separate source

In my app.component.ts file, I have two router outlets defined, one with the name 'popup': @Component({ selector: 'app-main', template: `<router-outlet></router-outlet> <router-outlet name="popup" ...

angulartypescriptjhipster

Utilizing Angular to enhance tracking page views with the latest Google Analytics integration

I have been using various Angular applications to track page views, implementing a strategy similar to the one outlined in this blog post. In order to avoid third party references, I will provide the relevant code snippets here. To include the gtag depen ...

angulargoogle-analyticsgoogle-analytics-4