Angular 10: Manually include the (*)d.ts file in the compilation process

I am currently experiencing an issue with my Angular library that has description files *.d.ts in a specific structure as shown below:

├ src
│  ├ my-lib
│  │   ├ my-typedef.d.ts
│  └ public_api.ts
│  
└ tsconfig.lib.json

In the tsconfig.lib.json file, I have included it like this:

"include": [
    "src/lib/typedefs"
  ],

Edit

Prior to upgrading to Angular 10, the configuration was set to Angular 8. The compile process included these files in the final package build. However, after the upgrade to Angular 10, I encountered this issue specifically related to typedefs folder.

According to the Angular upgrade guidelines, it mentions that we need to manually add necessary files.

We have updated the tsconfig.app.json to limit the files compiled. If you rely on other files being included in the compilation, such as a typings.d.ts file, you need to manually add it to the compilation.

For more information on the Angular update, click here.

Link to the GitHub repository for this issue: GitHub Repo

  • To resolve this issue, download the repository.
  • Run npm install
  • Execute ng build
angulartypescriptangular-cliangular9angular-cli-v9

Answer №1

After some investigation, I have discovered that the lack of emitted type definitions is actually the expected behavior when upgrading to ng-packagr. If we need to emit type descriptions, we can do so by utilizing the assets option or changing the file extensions to .ts. To include the emitting of .d.ts files, we should add the following section to our ng-package.json file:

{
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./typedefs/**/*.d.ts"
    ],
    "lib": {
      ...
    }
  }
}

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

How can I ensure a module in Angular module federation v14 is only loaded in either the parent or child app, but not both?

I am currently utilizing Angular 14 along with module federation in my project. Within my child application, I have the following configuration: module.exports = withModuleFederationPlugin({ name: 'childapp', exposes: { './app1&apos ...

angularmoduleangular14webpack-module-federationangular-module-federation

What could be causing my function to return as undefined the second time it's invoked?

Within my approach private onDataLoadSuccessful(users: User[], roles: Role[]) { this.alertService.stopLoadingMessage(); this.loadingIndicator = false; this.dataSource.data = users.map(data => { let newData: User; newData = ...

angulartypescript

Tips for sorting an array of objects by multiple keys while maintaining the order of each key that comes before

I am looking to create a versatile function that can organize an array of objects based on specified keys, while maintaining the order of previous keys. Here is a sample scenario: const input = [ { a: 'aardvark', b: 'bear', c: 'c ...

typescript

AngularJS UI-Router in hybrid mode fails to recognize routes upon initial page load or reload

It appears that when using the @ui-router/angular-hybrid, routes registered within an ng2+ module are not being recognized during the initial load or reload. However, these same routes work fine when accessed by directly typing the URL. I have followed th ...

angularjsangulartypescriptangular-ui-routerangular-hybrid

Customizing form validation in React using Zod resolver for optional fields

I am currently working on creating a form using React-hook-form and zod resolver. My goal is to have all fields be optional, yet still required despite being marked as optional in the zod schema: const schema = z.object({ name: z.string().min(3).max(50 ...

typescriptnext.jsreact-hook-formzod

Mutations are not set up in the schema

Having an issue with setting up mutations in my project using npm, apollo server, and typeorm. Every time I attempt to create a mutation, I receive the error message "Schema is not configured for mutations". Searching for solutions has been fruitless as mo ...

typescriptnpmgraphqltypegraphqlgraphql-mutation

Is there a way to check for keys in a TypeScript object that I am not familiar with?

I have a good understanding of the unknown type in TypeScript. I am dealing with untrusted input that is typed as unknown, and my goal is to verify if it contains a truthy value under the key input.things.0. function checkGreatness(input: unknown) { retu ...

typescript

Transferring HTML variables to an Angular Component

I am currently trying to transfer the information inputted into a text-box field on my webpage to variables within the component file. These variables will then be utilized in the service file, which includes a function connected to the POST request I exec ...

javascriptdatabaseangulartypescriptflask-sqlalchemy

Unable to successfully process HTTP Request Unsubscribe commands

When working with my component, I am retrieving data from a JSON file through services and subscribing to it. There is a condition check in place to stop the subscription once a specific criteria is met, but unfortunately, it doesn't seem to be workin ...

angulartypescriptsubscribereactivex

The TypeScript type 'Record<string, string>' cannot be directly assigned to a type of 'string'

I can't seem to figure out why this code isn't working. I've encountered similar issues in the past and never found a solution. The snippet goes like this: type dataType = { [key: string]: string | Record<string, string>; ...

javascripttypescript

Locating Items in an Array using Angular 5 and Forming a New Array with the Located Objects

Looking for a way to extract objects from an array that have the type "noActiveServiceDashboard" and "extraAmountDashboard". I want to create a new array with only these two entries in the same format. I've attempted using .find() or .filter() method ...

typescriptangular5

Creating a dynamic routing system for passing data easily

I am interested in sending the filters property from search-products.component.ts to ProductsListComponent using routing. Can this be done? Currently, I can pass static data but how about dynamic data? Below is a snippet of my demo code: app.routing.ts ...

angularangular2-routing

The subscribe method in Angular TS may be marked as deprecated, but worry not as it is still

I have developed a function that retrieves new data from a service file each time it is called. Here is how the function looks: onCarChange() { this.carService.getCarData(this.selectedCar).subscribe( async (response: CarData) => { if (response?.d ...

angulartypescripterror-handlingdeprecatedsubscribe

Is it possible to interchange the positions of two components in a routing system?

driver-details.component.ts @Component({ selector: 'app-driver-details', templateUrl: './driver-details.component.html', styleUrls: ['./driver-details.component.css'] }) export class DriverDetailsComponent implements OnI ...

javaangulartypescript

Establishing the state using React in conjunction with TypeScript

Struggling to understand how to utilize TypeScript to set the state of my React component. Currently developing a basic Todo list Creating a component for the entire list named: TodoList Desire to populate the list with initial items for testing purpos ...

reactjstypescript

Tips for binding data to numerous dynamic controls

Implementing reactive forms in my Angular project allowed me to create a simple form for adding employee work hours and breaks. The challenge I encountered was the inability to bind data from break controls. In the .ts file export class AddAppointmentForm ...

htmlcssangulartypescriptangular-reactive-forms

Saving customer pictures in the cloud with AWS

For my current project, I am developing an app using ionic2 that interacts with an API created using Flask. As part of the profile setup process, users are given the option to upload their own images. I have decided to store these images in an S3 bucket an ...

pythonangularamazon-web-servicesionic2flask-restful

Is it possible to automatically switch to a different route in a Next.js server component after a certain period of time?

Is it possible to achieve a similar function in an async server component: displaying the ui, waiting 3 seconds, and then redirecting to another route? In a client component, you can accomplish this using: useEffect(() => { function delay(ms: number) ...

reactjstypescriptnext.js

The functionality of router.navigate in Angular 5 seems to be malfunctioning

I am struggling with redirecting a user to another page based on a certain condition. Here is an example of my login component: ngOnInit() { console.log(">>> router", this.router) console.log(">>> activatedRoute", this.activate ...

angularhttp-redirectroutesnavigateurl

Tips for utilizing the forEach method in Angular 2 without relying on ngFor?

I recently started learning Angular 2 and I am trying to figure out how to access array details using a forEach loop and apply certain conditions on it. Once I make the necessary changes, I want to display this data using ngFor. In Angular 1, this was ea ...

angularforeach