Compilation of dynamic imports in Angular with TypeScript has encountered an error during module build

I have been working on a project called "hack" which is available publicly at https://github.com/chdelucia/hack

Recently, I've encountered an issue while trying to import modules dynamically. When I hardcode the path as a string, everything works fine:

const a = await import(`../data/ctfbanditi`);

However, when I attempt to use a variable for the path like this:

let b = 'ctfbanditi';
const a = await import(`../data/${b}`);

An error occurs that says:

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\MYlocalpath\data\ctfbanditi.ts is missing from the TypeScript compilation.
Please make sure it is in your tsconfig via the 'files' or 'include' property. at ivy\loader.js

I have checked for common mistakes like typos, but couldn't find any. The goal is to create a function that takes a name attribute and reads a specific module accordingly:

  async getBlogHtmlbyId(name: string): Promise<string> {
    let code= '';
    const a = await import(`../data/${name}`);
    return code;
  }

If you have any suggestions or solutions, I would greatly appreciate it. Thank you.

Answer №1

To solve this issue, the key is to include the ts modules in the tsconfig.app.json

In my scenario, all the modules I need to dynamically import are located in a folder named /data/. Therefore, I included "src/data/*.ts" in the include section as shown below:

    /* For more information on this file, visit: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
  ],
  "include": [
    "src/**/*.d.ts",
    "src/data/*.ts"
  ]
}

On the service end:

  async fetchBlogContentById(fileName: string): Promise<string> {
    const code = await import(`../data/${fileName}`);
    return code?.blog || '';
  }

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

"Implementing passport authentication in an Angular application to return JSON data instead of redirecting

Seeking to retrieve JSON data after a successful sign-in or login to utilize Angular for frontend redirection, rather than Express handling the redirect on the backend. I have attempted solutions found here that seem logical and should function according ...

Determine whether the ng bootstrap modal has already been opened

Is there a way to determine if a modal window is open? In order to accomplish this, I create a variable called modalInstance: NgbModalRef; and initialize the modal by using the code below this.modalInstance = this.modalService.open(UpdateModalConten ...

Utilize the class type of a method parameter as the method type for another parameter

Here's a quick example illustrating my desired functionality. // Every time, the ACL class will have a different name such as "UsersACL", etc. export class EventsACL { test(): { read: true, write: true } { } } // This function acts ...

When working with Nativescript Schematics, ensure that all necessary modules are loaded properly

Currently, I am attempting to implement code sharing between an Angular web application and a mobile app using NativeScript Schematics. Below is the structure of my code https://i.stack.imgur.com/xgNrs.png In the mobile-specific HTML file, I have utilize ...

How can I access the variable name in an array of objects in React components?

Here is the code I have in my React project: const [value, setValue] = React.useState<CountriesEntityData | null>({ id: '', name: '', regions: [ { id: '', name: '', di ...

I'm having trouble displaying my Angular project on Localhost:4200

I am facing an issue with my localhost:4200 where it is not displaying anything from my project. It was working fine before but after making some changes like generating a new component and modifying it, the page appears blank now.see image here see image ...

Unlock the Power of Typography in React with Material UI Styled Components

Exploring the world of material UI is a new experience for me. I am currently in the process of creating a styled component using Typography. Below is what I have attempted so far: import styled from 'styled-components'; import { FormGroup, ...

When working with a union type in TypeScript, it is important to note that the property may

Imagine a scenario where I am dealing with two specific interfaces: interface Box { x: number y: number } and interface ColouredBox { x: number y: number colour: string } For the sake of this discussion, let's assume that the ...

Using Angular: How to reference the same ng-template with a component in a single HTML file without making a copy

Currently, I am facing a challenge while developing a web application using Angular. My task involves creating a search form with multiple fields as a component. Below is the code snippet for this component: <ng-template #filter> <app-articles-f ...

Maintain division contents while navigating

I need a solution to keep my div (NewCall) open even when the user navigates between pages in my Single Page Application. The NewCall div is located in my layout page and is triggered by user click. However, whenever I navigate to another page, the div cl ...

The Angular 8 click event operates like a JavaScript onload function

I have integrated my angular application into an iframe portlet. On the parent JSP page, there is a form with an invisible submit button. Clicking this button opens a popup window from an external application. I am attempting to trigger the click event o ...

What is the best way to display individual records from a Web API on the user interface?

Just a heads up: I'm unable to utilize pagination (skip, take) due to the data being sourced from multiple tables. For more information, you can refer to the Report model. I attempted to retrieve the data individually on the UI through WebAPI. The ...

Having difficulty invoking the forEach function on an Array in TypeScript

I'm currently working with a class that contains an array of objects. export interface Filter { sf?: Array<{ key: string, value: string }>; } In my attempt to loop through and print out the value of each object inside the array using the forE ...

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 ...

Disable Styling and Override Readonly CSS restrictions

What is the correct approach for customizing material design styling when input fields are disabled? Out of the Box https://i.sstatic.net/CvcAV.png Explore Angular Material Input Examples I managed to achieve my objective using the following CSS, but I ...

Extract objects from a nested array using a specific identifier

In order to obtain data from a nested array of objects using a specific ID, I am facing challenges. My goal is to retrieve this data so that I can utilize it in Angular Gridster 2. Although I have attempted using array.filter, I have struggled to achieve t ...

Creating and editing popup form components: A step-by-step guide

I am currently working on a basic CRUD example using react.js for the frontend. While I have successfully implemented the add/edit functionality within a component, I am now looking to dynamically call this component upon clicking and display it as a popu ...

Applying middleware to an Apollo server is not possible

Trying a new approach here import express, { Application } from 'express'; import { ApolloServer } from 'apollo-server-express'; import { buildSchema } from 'type-graphql'; async function startServer() { const app: App ...

"Implementing a loop to dynamically add elements in TypeScript

During the loop session, I am able to retrieve data but once outside the loop, I am unable to log it. fetchDetails(){ this.retrieveData().subscribe(data => { console.log(data); this.data = data; for (var k of this.data){ // conso ...

Introducing cutting-edge intellisense for Typescript Vue in VSCode, featuring automatic import functionality specifically designed for the

Currently, I am working on a small project using Typescript and Vue in VSCode. In my setup, I have TSLint, TSLint Vue, Vetur, and Prettier plugins installed. Unfortunately, I am facing an issue with the intellisense "auto import" feature. It does not seem ...