PDF-lib not found giving 404 error on import in angular

i’m using External JS file in my Angular project. That file is loaded and successfully recognised by Angular, even few functionalities are working just fine.

Only Module that’s not working is using Pdf-lib.

When i try to import this library in my Plain JS file this whats happens:

GET http://localhost:4200/node_modules/pdf-lib/dist/pdf-lib.min.js net::ERR_ABORTED 404 (Not Found)

Here’s JS file and specific function where i’m facing this issue, main problem is in import:

import * as PDFDocument from '/node_modules/pdf-lib/dist/pdf-lib.min.js';
document.getElementById("download-pdf-lib").addEventListener("click", async function () {
  if (!uploadedPdfData) {
    alert("Please upload a PDF first.");
    return;
  }

  const pdfBytes = await fetch(uploadedPdfData).then((res) => res.arrayBuffer()); // Fetch the PDF and convert to array buffer
  const pdfDoc = await PDFDocument.load(pdfBytes);  // Load the PDF document

  // Function to adjust y-coordinate
  const adjustYCoordinate = (y, pageHeight) => pageHeight - y;

  // Loop through each interaction and add it to the corresponding page
  interactionData.forEach(async (interaction) => {
    const page = pdfDoc.getPages()[interaction.page - 1]; // Get the page (zero-indexed)
    const { height } = page.getSize(); // Get the page height
    const adjustedY = adjustYCoordinate(interaction.y, height); // Adjust the y-coordinate
    // const text = `User ${interaction.user} clicked at (${interaction.x}, ${adjustedY})`;
    console.log(`User ${interaction.user} clicked at (${interaction.x}, ${adjustedY}) on Page Number: ${interaction.page}, Order ${interaction.order}`);

    // Append keywords for each interaction
    keywords.push(`User:${interaction.user}`);
    keywords.push(`Page: ${interaction.page}`);
    keywords.push(`X-axis: ${interaction.x}`);
    keywords.push(`Y-axis: ${interaction.y}`);
    keywords.push(`Order: ${interaction.order}`);
  });
  pdfDoc.setKeywords(keywords); // Set the keywords in the PDF document
  const modifiedPdfBytes = await pdfDoc.save(); // Save the modified PDF
  const blob = new Blob([modifiedPdfBytes], {
    type: "application/pdf",
  }); // Create a blob from the modified PDF
  const url = URL.createObjectURL(blob); // Create a URL for the blob
  const a = document.createElement("a"); // Create an anchor element
  a.href = url;
  a.download = "annotated_pdf.pdf"; // Set the download attribute
  a.click(); // Trigger the download
});

Here’s the rest of information of loading this JS file.
organizer.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-organizer',
  templateUrl: './organizer.component.html',
  styleUrls: ['./organizer.component.css']
})
export class OrganizerComponent implements OnInit{
  ngOnInit(){
    this.loadScript('assets/organizerjs/organizer.js');
  }
  loadScript(src:string){
    const script=document.createElement('script');
    script.src=src;
    script.type='module'
    document.body.appendChild(script);
  }
}

Angular.json:

"assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/pdf-lib/dist/pdf-lib.min.js",
                "output": "/node_modules/pdf-lib/dist/pdf-lib.min.js"
              }
            ],