What is the correct method for importing a Node module into Angular using TypeScript or AngularCLI?

As I integrate some "legacy" (non-typescript) JavaScript libraries into my Angular single page application.

Usually, I simply include a CDN link in the index.html file like this:

<script src="//cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako.min.js"></script>

and then declare it in the Angular component like this:

declare var pako: any;

This method usually works fine. Now, I want to host this library locally. I can add it to the Angular project using:

npm install pako

But how do I then add it to the Angular app?
I tried adding an import to polyfills.ts (which worked for hammerjs but not for pako)

Additionally, this approach should work for ng build (and then likely be included in the compiled/packed runtime.js)

By the way, here is a test stackblitz https://stackblitz.com/edit/ng-load-pako

Answer №1

Providing a stackblitz link along with questions makes it easier for me to give the correct answers:

Here is the stackblitz link

All you need to do is:

import * as pako from 'pako';

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: npx is unable to locate the module named 'webpack'

I'm currently experimenting with a customized Webpack setup. I recently came across the suggestion to use npx webpack instead of node ./node_modules/webpack/bin/webpack.js. However, I am encountering some difficulties getting it to function as expecte ...

Leveraging branch codes found within package.json from gitrepositories

Our team is currently working on a node.js application and I am using a package created by one of my colleagues that has been published to npm. Now, my colleague has created a new Git branch (referred to as "second"). Is there a way for me to include this ...

Utilizing formData.append in TypeScript to handle arrays

Hey there! I'm facing an issue while trying to send a form to my Profile endpoint. The problem lies in the 'user:{}' field, as I am unable to properly insert my array data into this specific field. Here is a breakdown of the fields within m ...

Steps for displaying a new event on a fullCalendar

Utilizing fullCalendar to display a list of events in the following manner: this.appointments = [{ title: "Appointment 1", date: "2020-09-06", allDay: false }, { title: "Appointment 2", date: "2020 ...

Can auto-import be configured in WebStorm without using double dots?

Is it feasible to configure WebStorm for automatic import of modules/Component/components/MyComponent instead of using ../MyComponent? ...

Tips for resolving the issue when Chrome is able to load the page but Postman cannot find it

I'm encountering a perplexing situation that is entirely new to me and difficult to comprehend. I find myself unable to decipher what exactly I am witnessing, leading to uncertainty about why it is occurring, not to mention the challenge of determinin ...

Can anyone provide a webpack configuration to package a webpack plugin together?

I'm in the process of developing a webpack plugin using typescript. Before I can publish it on NPM, I need to bundle the plugin code. However, I've encountered an exception stating that my plugin class is not a constructor. Below is the director ...

Tips for successfully passing an argument to an npm script while including a leading slash

Within my package.json file, I have defined some scripts: "scripts": { "build": "webpack-cli --mode production", "build:dev": "webpack-cli --mode development", } I am trying to pass an additional ...

Guide to Validating Fields in Angular's Reactive Forms After Using patchValue

I am working on a form that consists of sub-forms using ControlValueAccessor profile-form.component.ts form: FormGroup; this.form = this.formBuilder.group({ firstName: [], lastName: ["", Validators.maxLength(10)], email: ["", Valid ...

Issue with Angular 2 pipe causing unexpected undefined result

Here is a JSON format that I am working with: [{ "id": 9156, "slug": "chicken-seekh-wrap", "type": "dish", "title": "Chicken Seekh Wrap", "cuisine_type": [2140] }, { "id": 9150, "slug": "green-salad", "type": "dish", "title": "Green Sala ...

Arranging JSON based on values in an array using node.js

Seeking assistance with sorting a JSON object by specific keys within a node.js program. The task involves arranging the object in ascending order based on the "trip_miles" value when the "trip_name" equals CC, and then extracting only the id's as out ...

Having trouble creating a full-screen modal with NgbModal by passing content as a component?

I've been using Bootstrap widgets and trying to create a full-screen modal where the header sticks on top, the footer stays at the bottom, and the body scrolls in the middle. Initially, I found a simple HTML solution for this: However, when I want to ...

How can one rectify the 'EPERM: operation not allowed, unlink {FILE PATH}' error messages?

Every time I try to execute the command npm run build on my project, it always results in an error message: Error: EPERM: operation not permitted, unlink '{File path here}'] { errno: -4048, code: 'EPERM', syscall: 'unlink&apo ...

Anticipate receiving a 'Type' returned by external library functions

I've recently started learning TypeScript and have encountered a situation where I need to assign a type to a variable that is returned from a third-party library function with its own type definition. For instance: import {omit} from 'lodash&ap ...

While attempting to send a GET Request in Angular, access to XMLHttpRequest has been denied due to CORS policy restrictions

I am attempting to establish a GET method for my PHP API. Here is the code snippet I am using: export class PerfilComponent { perfil: any; constructor(private http: HttpClient) { } ngOnInit() { const token:string | null = localStorage.getItem(&ap ...

Creating a custom Angular filter to group every 3 items within an iteration into a new div container

When attempting to organize three instances of app-story-preview within a wrapper div using a ngFor loop, I encountered the following code: <ng-template [ngIf]="stories.length > 0" [ngIfElse]="empty"> <cdk-virtual-scroll-viewport [itemSize ...

Triggering a subsequent action in Ngrx depending on the data from the initial action

Currently, I am fetching a list of users using ngrx: this.users$ = this.store.select(fromReducer.getUsers); In my HTML template: <ul> <li *ngFor="let user of users$ | async"> {{user.id}} - {{user.name}} - {{user.email}} </ ...

Resetting the modal scroll time when the content of the modal is refreshed

I have implemented the modal in my application using ng-bootstrap. Within the modal, there are multiple pages that can be navigated using the Next and Back buttons. An issue I am facing is that when a page is long and requires scrolling, it loads in the ...

TypeScript: Unidentified reference to 'this' within the class

typescript version: 3.9.2 The goal is to define an interface constraint that permits only non-functional member keys on the class type NonFunctionKeys<T extends {}> = { [K in keyof T]-?: T[K] extends Function ? never : K }[keyof T]; class MyClas ...

Exploring properties of nested elements in React

Picture a scenario where a specific element returns: <Component1> <Component2 name="It's my name"/> </Component1> Now, what I want to accomplish is something like this: <Component1 some_property={getComponent2'sN ...