Spartacus storefront is having trouble locating the .d.ts file when using Angular/webpack

Seeking help from the SAP Spartacus team.

Encountering errors while developing a Spartacus component, specifically with certain Spartacus .d.ts definition files that cannot be resolved.

The issue is reproducible in this Github repository/branch:

This problem occurs only with specific Spartacus definitions, not all of them.

When using the import statement below in our component code, tsc can compile without any problems (the file 

/Users/i070295/SAPDevelop/vis/commerce-cloud-poc/storefront/node_modules/@spartacus/storefront/cms-structure/page/model/cms-component-data.d.ts
exists):

import { CmsComponentData } from '@spartacus/storefront/cms-structure/page/model/cms-component-data';

However, running ng serve --verbose, it seems Angular/Webpack are not searching for it correctly. The probing looks for files with a .ts extension but not a .d.ts extension:

[Error messages]

Attempted a suggested workaround online to modify the import path by adding a .d suffix to trick the module loading mechanism into treating a .d.ts file as a .ts file, but this does not work with angular 10.1 due to proper identification of uncompiled .ts files:

[More error messages]

Tried an alternative import statement that also failed: 

import { CmsComponentData } from '@spartacus/storefront/cms-structure/page/model';

This issue seems to be isolated to specific Spartacus definition files. Switched from using CmsComponentData to importing and using a different type (B2cStorefrontModule) at the same location in the code, which worked fine without any issues arising:

import { B2cStorefrontModule } from '@spartacus/storefront';

Open to suggestions on how to resolve this issue, kindly seeking assistance.

Regards, Sam Garland

angulartypescriptwebpackspartacus-storefront

Answer №1

The following import statement is functional: 

import { CmsComponentData } from '@spartacus/storefront';

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

Angular: The CORS issue continues despite configuring proxy.conf.json

I have tried several tutorials in an attempt to resolve my CORS issues, but unfortunately, I have been unsuccessful so far. My server setup is very basic - it responds to get 127.0.0.1:8080/hello by returning the string hello there for testing purposes. ...

angularcorsangular-httpclient

Module 'webpack-cli/bin/config-yargs' was not found, along with module 'webpack-cli'

Despite trying numerous solutions, I have been unable to resolve my issue. After cloning a repository from a friend and attempting to run the client directory, I encountered the following error: Cannot find module 'webpack-cli/bin/config-yargs' ...

npmwebpackwebpack-cli

What is the best way to receive the result of an asynchronous function as an input and showcase it using express?

I have recently started learning about node and express My goal is to create an API that can fetch data from an external source and use that data for my application Is there a way to retrieve the result of an asynchronous method and display it using the ...

javascriptnode.jstypescriptexpressnodes

Endure the class attribute in Angular 5

My SearchComponent has a route (/search) and SearchDetailComponent has a route (/search-detail:id). In the SearchComponent, there is a searchbox (input field) where I can type any text to start a search. After loading the search results and navigating to ...

angulartypescriptangular5

Router-outlet not displaying any content

I'm encountering an issue with using routing inside mat-drawer. Strangely, it results in a blank page. However, when I comment out the router-outlet element, the page displays correctly. Does anyone have insight on why this is happening? P.S. When I ...

angularangular-materialrouter

Generate a new entry by analyzing components from a separate array in a single line

I have a list of essential items and I aim to generate a record based on the elements within that list. Each item in the required list will correspond to an empty array in the exist record. Essentially, I am looking to condense the following code into one ...

javascripttypescript

What are the steps to switch out the 'subscribe' method with 'mergeMap' or

I am trying to understand how I can replace the subscribe method with switchMap in my code. I have been searching for an example online but haven't found one yet. dialogRef.afterClosed().pipe(filter(result => !!result)).switchMap(result => { ...

angularrxjs

Creating an app for sending text messages and making video calls with Spring Boot technology

I am interested in developing an application with Spring Boot that allows users to make video calls and share text messages. I also want the ability to save these videos for future viewing by registered users of the app. Although I am familiar with node.j ...

javascriptjavanode.jsangularspring-boot

Angular is programmed to detect any alterations

Upon detecting changes, the NgOnChanges function triggers an infinite service call to update the table, a situation that currently perplexes me. Any assistance on this matter would be greatly appreciated. Many thanks. The TableMultiSortComponent functions ...

javascriptangulartypescript

What is the best way to categorize an array based on a specific key, while also compiling distinct property values into a list

Suppose there is an array containing objects of type User[]: type User = { id: string; name: string; role: string; }; There may be several users in this array with the same id but different role (for example, admin or editor). The goal is to conv ...

javascripttypescript

When using react-admin with TypeScript, it is not possible to treat a namespace as a type

Encountering issues while adding files from the react-admin example demo, facing some errors: 'Cannot use namespace 'FilterProps' as a type.' Snippet of code: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/orde ...

typescriptreact-admin

Exciting Angular feature: Dynamic Titles

I am working with an <i> tag <i class="actionicon icon-star" [ngClass]="{'yellow' : data.isLiked}" (click)="Like(data)" aria-hidden="true" title="Liked"></i> In my current set ...

angulartypescript

Exploring the functionalities of can-deactivate without incorporating routing

I'm facing an issue with a parent component and multiple child components. The parent component contains a form, while each child component also has its own form. Unfortunately, all child components share the same route as the parent component and hav ...

javascriptnode.jsangularmean-stack

Displaying index.html exclusively using Angular Capacitor

I am currently working on converting my Angular application into an Android application using Capacitor. I have successfully installed Capacitor in my Angular project, which includes routing functionality. Here are the versions of the tools I am using: &qu ...

androidangularcapacitor

Invoking a self-executing anonymous function using requestAnimationFrame

Recently, I developed a basic 2D-tile-renderer using JavaScript and decided to convert it to TypeScript. The process went smoothly, with the only challenge being when I tried to call window.requestAnimationFrame with a callback function. Eventually, I was ...

typescript

A step-by-step guide on reading/loading a JSON file using Typescript

I'm fairly new to Typescript and I'm attempting to parse a simple JSON file using Typescript. After searching online and testing different solutions, I still haven't been able to find a straightforward code snippet that reads a local JSON fi ...

jsontypescript

Using conditional statements to render content based on a certain condition within a

One of my requirements is to dynamically render a React component in the following manner: parent.ts ... <Parent> <Child/> <Parent> ... child.ts ... return (someBoolean && <Component/>) ... While ...

javascriptreactjstypescript

Updating the src attribute within a modal using Angular

Struggling for days to update the src attribute with no success. Any assistance would be greatly valued. Here's the HTML: <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleM ...

angularbootstrap-modalngx-bootstrap-modalng-bootstrap-modal

I'm seeking a way to access the input element within the InputGroup component of BlueprintJs in my

The BluePrintJS React InputGroup component offers a convenient user interface for modern applications. However, it does not provide direct access to the internal <input> element. There are two primary reasons why I need to access the input element: ...

cssreactjstypescriptblueprintjs

What is the true function of the `as` keyword within a mapped type?

I am new to typescript and I find the usage of as confusing in the following example. type foo = "a" | "b" | 1 | 2; type bar = { [k in foo as number]: any } This example passes type checking. The resulting bar type is transformed i ...

typescript