What is the best way to incorporate node modules into my tsconfig file?

I've taken some raw angular typescript components and packaged them into a private NPM module for sharing between various projects.

Although I import these components like any other npm library, I encounter an error message when trying to serve my application: 

./node_modules/@bit/myusername.test.global.test-component/test.component.ts is missing from the TypeScript compilation.

My attempt to resolve this by adding 

node_modules/@bit/myusername.test.global.test-component/**/*.ts
to the files section in tsconfig.json failed to eliminate the error.


    {
      "compileOnSave": false,
      "filesGlob": [
        "**/*.ts", //Default local source 
        "node_modules/@bit/**/*.ts",  //Generated sources

    ], 

//Add additional directories as necessary
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Below is the content of the package.json file residing in my private module:

{
  "_from": "@bit/myusername.test.global.test-component",
  "_id": "@bit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb2a6aaacbaadb1beb2baf1abbaacabf1b8b3b0bdbeb3f1abbaacabf2bcb0b2afb0b1bab1ab9feef1eff1ee">[email protected]</a>",
  "_inBundle": false,
  "_integrity": {{removed}},
  "_location": "/@bit/myusername.test.global.test-component",
  "_phantomChildren": {},
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "@bit/myusername.test.global.test-component",
    "name": "@bit/myusername.test.global.test-component",
    "escapedName": "@bit%2fmyusername.test.global.test-component",
    "scope": "@bit",
    "rawSpec": "",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://node.bitsrc.io/myusername.test.global.test-component/-/myusername.test.global.test-component-1.0.1.tgz",
  "_shasum": {{removed}},
  "_spec": "@bit/myusername.test.global.test-component",
  "_where": "/Users/HD/Desktop/_temp/booker",
  "bundleDependencies": false,
  "dependencies": {
    "@angular/core": "~7.0.0"
  },
  "deprecated": false,
  "devDependencies": {},
  "homepage": "https://bitsrc.io/myusername/test/global/test-component",
  "license": "SEE LICENSE IN LICENSE",
  "main": "test.component.ts",
  "name": "@bit/myusername.test.global.test-component",
  "peerDependencies": {},
  "version": "1.0.1"
}

How can I properly reference these files in my tsconfig?

angulartypescriptbit-src

Answer №1

Here are a couple of key steps to follow:

  1. Make sure to configure the saveDependenciesAsComponents setting in your bit.json file. You can find more information here.
  2. When running the bit import command to bring in your components, use bit import --skip-npm-install to avoid installing component package dependencies. This will default to using project dependencies based on node module resolution.

For those unfamiliar with the context, the original poster is attempting to import angular components using the bitsrc.io CLI. Currently, there is limited support for using angular and bit together. To share components, they need to exist within similar angular projects so that the angular compiler can handle compilation.

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

An easy method to define argument types for every function type in TypeScript

How can I assign argument types to each function type in TypeScript? Each function has a parameter associated with it. [Example] type F1 = (arg: number) => void; type F2 = (arg: string) => void; const caller = (f: F1 | F2) => (n: number | strin ...

typescript

Setting a default value for a null Select Option in React: a guide

I am currently working with an array of values and looping through them to display in a Select Option. <Form.Item label="Status"> <Select value={user.status} onChange={handleStatusChange} > ...

reactjstypescriptantd

Tips for effectively highlighting search text within HTML content without causing any issues

I am in search of a solution that can assist me in searching for specific terms within an HTML string while also highlighting them. I have the ability to remove the HTML content from the string, but this poses the problem of losing the context of the origi ...

javascripthtmltypescript

The .ts source file is mysteriously missing from the development tool's view after being deployed

When I work locally, I can see the .ts source files, but once I deploy them, they are not visible in any environment. Despite setting my sourcemap to true and configuring browserTargets for serve, it still doesn't work. Can someone help with this issu ...

angulartypescriptgoogle-chrome-devtoolspackage.jsonangular.json

Unit Testing Angular Components with Karma and Jasmine: Exploring Test Scope

After reading various guides on unit testing, I have gained an understanding that in unit testing, the focus is on testing the logic within a component, with children components tested separately. Despite this knowledge, I still find myself uncertain about ...

angularunit-testingkarma-jasmine

Suggestions for efficiently filtering nested objects with multiple levels in RXJS within an Angular environment?

Just a Quick Query: Excuse me, I am new to Typescipt & RxJS. I have this JSON data: [ { "ID": "", "UEN": "", "Name": "", "Address": "", "Telephone&quo ...

javascriptarraystypescriptrxjsfiltering

Sending JSON object data to an API endpoint using the POST method in an Angular application

Attempted to post data to an API, but received a 400 bad request error. After testing with Postman, it seems that the issue may lie within my service or TypeScript code. As a newcomer to Angular, I am seeking assistance as I have searched extensively witho ...

angulartypescriptangular-servicesangular4-httpclient

A step-by-step guide on injecting dependencies manually in NestJS

When working with Angular, it is possible to access and inject dependencies manually using the built-in Injector class. This allows you to access and inject services without having to pass them through the constructor. Essentially, you can inject a service ...

node.jstypescriptnestjs

Angular 5 error: The property you are trying to access is not defined in

I've been working on a simple class and I'm stuck trying to figure out why the "currentHost" variable is showing as non-existent. export class AppModule { public static currentHost: string = 'http://localhost:8080/'; constructor() ...

angulartypescriptangular5

Exploring the latest features of Angular 2's ngModel form to track user selections

Consider this form: <form name="setQuestions_form" (ngSubmit)="set_questions()"> <ng-select [multiple]="true" [options]="questions" [(ngModel)]="selectedQuestions" name="selectedQuestions"></ng-select> <button>send</butt ...

formsangular

The takeUntil function will cancel an effect request if a relevant action has been dispatched before

When a user chooses an order in my scenario: selectOrder(orderId): void { this.store$.dispatch( selectOrder({orderId}) ); } The order UI component triggers an action to load all associated data: private fetchOrderOnSelectOrder(): void { this.sto ...

angulartypescriptrxjsngrx

The Angular router seems to be refusing to show my component

My Angular 2 App includes a Module called InformationPagesModule that contains two lazy load components (Info1 Component and Info2 Component). I would like these components to load when accessing the following routes in the browser: http://localhost:4200/ ...

javascriptangulartypescriptlazy-loadingangular2-routing

Retrieving the ngModel value in Ionic without triggering any actions

After trying to send the value of <ion-text> to a TypeScript file when a button is clicked on the same HTML page, I encountered an issue where it didn't work as expected. <ion-text [(ngModel)]='xy' ngDefaultControl >'vari ...

angularionic-framework

Struggling with parsing JSON files in Angular 5?

Hello, I am currently working on a web application using Angular 5. I am facing an issue while trying to read a JSON file through an HTTP call. Despite the file being in the same folder, I keep getting a 404 error. Here is a snippet from my service.ts file ...

jsonangularhttp

Waiting for the execution of the loop to be completed before proceeding - Typescript (Angular)

There's a code snippet triggered on an HTML page when clicked: public salaryConfirmation() { const matDialogConfig: MatDialogConfig = _.cloneDeep(GajiIdSettings.DIALOG_CONFIG); this.warningNameList = []; for(let i=0; i < this.kelolaDat ...

javascriptangulartypescript

What could be causing the Angular imports to not function properly?

I've recently set up a project, and it's compiling successfully. However, every time I attempt to add a directive like [formGroup], it throws an error such as "Property formGroup is not provided by any applicable directives nor by form element". ...

angularimportmoduleng

In fact, retrieve the file from an S3 bucket and save it to your local

I've been attempting to retrieve an s3 file from my bucket using this function: async Export() { const myKey = '...key...' const mySecret = '...secret...' AWS.config.update( { accessKeyId: myKey, secretAcces ...

angulartypescriptamazon-web-servicesamazon-s3

Execute a batch file to initiate the npm start command

I'm currently working on an Angular application and I'm looking to streamline the startup process. Instead of manually running "npm start" in the console, I want to create a batch file that will automatically run "npm install" for me. Here is the ...

angularbatch-filenpm

Make multiple calls to gapi.auth2.init using varying client_id each time

I am currently working on a single web page (Angular 6 app) where an admin user can create different Google accounts. In order to obtain a backoffice code with grantOfflineAccess, I am utilizing gapi. However, there seems to be an issue when trying to set ...

angulargoogle-authenticationgoogle-api-js-clientclientid

Describing an Object with some typed properties

Is there a method to specify only a portion of the object type, while allowing the rest to be of any type? The primary objective is to have support for intelliSense for the specified part, with the added bonus of type-checking support. To demonstrate, let& ...

typescriptintellisense