Struggling to bring in fresh custom fonts in Angular

After creating new custom fonts using the following command: 

$ pdfmakefg ./my-fonts ./pdf/fonts/custom-fonts.js
, I added them to assets/fonts/. However, when attempting to import these custom fonts in an Angular component, I encountered the following error:

import pdfFonts from '../../../assets/fonts/custom-fonts';

Add-student.component.ts:27:22 - error TS7016: Could not find a declaration file for module '../../../assets/fonts/custom-fonts'. 'C:/Users/Asus/Desktop/students-prjt/prjct/src/assets/fonts/custom-fonts.js' implicitly has an 'any' type.

The path to the new custom fonts is correct. Despite this, I am still struggling to resolve this error! Is there any assistance available?

angulartypescriptpdfmake

Answer №1

Here's how I fixed it:

1 - Include allowJs: true in the tsconfig.json configuration file

"compilerOptions": {
    "allowJs": true, ...}

2 - Add module.export at the end of the costume-font.js script

module.exports = this.pdfMake.vfs;

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

Exploring the Possibility of Retrieving and Showing a PDF File from a Server in Angular 2 RC 5

I am currently working on integrating a PDF generated by a server into a view within my Angular 2 RC 5 project. The ASPNETCORE server is transmitting the object as an 'application/pdf', while the Angular client is attempting to interpret the resp ...

pdfangularasp.net-coreblob

Issue with Angular 2: scrolling event not triggering

Just starting out with Angular 2 and I'm trying to implement infinite scrolling for fetching data using REST API calls. Initially, I make a call like this to get the first set of 50 records: localhost:8080/myapp/records=items&offset=0&limit=5 ...

javascriptangular

The request to search for "aq" on localhost at port 8100 using Ionic 2 resulted in a 404 error, indicating that the

Trying to create a basic app that utilizes an http request, but facing challenges with cors in ionic 2. To begin with, modifications were made to the ionic.config.json { "name": "weatherapp", "app_id": "", "v2": true, "typescript": true, "prox ...

angulartypescriptionic2

Can you reference a data type within a Typescript declaration of an Angular2 data model?

When working with Mongoose, there is a convenient way to reference another data definition. I'm curious if there is a similar approach we can take when defining a data module for Angular 2? In Mongoose var personSchema = Schema({ _id : Number, ...

node.jsmongodbtypescriptmongoose

Having trouble with importing and receiving the error message "Module 'clone' not found."

When trying to use clone.js in Angular 2, I imported it with import * as clone from 'clone'. It was listed in my package.json dependencies and successfully imported into node_modules. However, when viewing the output, I encountered the error mes ...

javascriptangularnpm

The combination of ASP.Net Core 1.1 and Angular 2 in a PUT request triggers a No Access Control

In my ASP.Net Core 1.1 backend, CORS has been enabled as shown below: public void ConfigureServices(IServiceCollection services) { // Add framework services. services.AddDbContext<WebAPIDataContext>(options => { options.UseMyS ...

angularasp.net-core

Is it possible for one specific value with a class to impact all other values in the Angular4 view as it hovers?

<ul *ngFor="let item of workSpaceResponse; let i = index"> <li> <span (mouseenter)='checkList(item.value, i)' title='{{info}}'> <i [ngClass]="result ? 'fa fa-hourglass-end red' : 'fa fa-ho ...

javascriptangularangular2-template

Determine the data type of a variable in TypeScript by utilizing the compiler API

I am facing an issue with retrieving the type of a variable using the compiler API. Here is some background information on my situation: Since I execute everything in memory, I have had to create my own compiler host. This is necessary because the typechec ...

typescript

Create duplicates of both the array and its individual elements by value

I'm having trouble figuring out how to properly copy an array along with all its elements. In my model, I have a name and options, both of which are strings. This is what I currently have: const myArrayToDuplicate = [myModel, myModel, myModel] My ...

angulartypescript

The Pop up does not appear outside the boundaries when implementing column resizing in PrimeNG Table

I am currently integrating PrimeNG components into my Angular 5 project. On the landing page, I have specific requirements such as column resizing and filter pop-ups. The pop-up displays correctly on the table without using the pResizableColumn class. How ...

cssangularprimengprimeng-turbotable

Leveraging React's state to enable temporary invalid numeric input handling

My current approach may be flawed, but I aim to have a parent component and a child component, where the child contains an input field for users to enter numbers. The callback function of the parent component will only be triggered for valid numbers, as ve ...

reactjstypescript

Tips for refreshing the current page in Angular without being redirected to the login page

Exploring an Angular example for login and registration here on stackblitz Encountering an issue where after refreshing the page, the authguard redirects me to the login page even though I am already logged in. Looking for a solution to redirect to the c ...

node.jsangular

Unable to retrieve the regex value with an alternate label

Here is a RegExp expression that I am currently using: const regex = new RegExp('<(.*)>' + text + '<(.*)>'); renderer.setProperty(node, 'innerHTML', node.innerHTML.replace(regex, '<$1>' + replaceTe ...

javascriptregextypescript

Discovering ways to optimize argument type declarations in TypeScript

If we consider having code structured like this: function updateById( collection: Record<string, any>[], id: number, patch: Record<string, any> ): any[] { return collection.map(item => { if (item.id === id) { return { ...

javascripttypescriptvue.js

Steps to reset an Angular material toggle button:1. Locate the

<div id="slider-group" *ngFor="let sliderToggle of sliderToggleGroup"> <div> <mat-slide-toggle (ngModelChange)="updateSlider($event,sliderToggle)" [(ngModel)]="sliderToggle.isChecked"> {{sliderToggle.na ...

angularecmascript-6

When working on a node.js project with Angular, I'm considering incorporating a new HTML framework such as Foundation Zurb or Bootstrap. Is this a good idea, or should I stick

Is it necessary to use an additional HTML framework like Foundation Zurb or Bootstrap when using Angular in a node.js project? Can Angular alone handle the functionalities provided by Foundation Zurb / Bootstrap? Your insights would be greatly appreciated ...

node.jsangularbootstrap-4zurb-foundation

Difficulty showing paging in Syncfusion Grid when using Vue 2 with class components

Trying to implement paging in a Syncfusion Grid within a class component of a Vue 2 project using TypeScript. I have added the GridPlugin using "Vue.use" in main.ts. My understanding is that I need to: Import the Page class from ej2-vue-grids Create a se ...

typescriptvue.jsvuejs2syncfusion

The ajv-based middy validator does not adhere to the specified date and time format

When it comes to validation, I rely on middy as my go-to package, which is powered by ajv. Below is an example of how I set up the JSON schema: serviceDate: { type: 'string', format: 'date-time' }, The structure o ...

javascriptregextypescriptjsonschemaajv

Encountering issues with peer dependencies during the installation of AngularMaterial

Attempting to integrate Angular Material into my project using npm, and I am relatively inexperienced in this field. Initially, I used the command ng add @angular/material, which only installed version @7.0.0 and not the newer components that I require. S ...

angularnpmangular-materialnpm-install

What is the proper syntax for specifying a specific field in a generic class?

type Specific = {field: 'add'} | {field:'remove'}; function add(value: Specific) {} // Ensures value.field === 'add' function remove(value: Specific) {} // Ensures value.field === 'remove' How can I restrict functi ...

typescript