Issue with Angular 8 build resulting in multiple build files being generated due to import() statements

My Angular project utilizes a file that includes several import() statements to load SVG files using the file-loader webpack plugin.

Following the migration to Angular 8, I encountered an issue where the angular build process was generating multiple build files in the /dist folder for each import() statement, supporting both es5 and es2015.

This particular file is responsible for exporting SVGs to create a dynamic icon component. The original file contains numerous imports.

For example:

https://i.sstatic.net/xF2fC.png

The above source file generates a file for each import() statement after the build process, like this:

https://i.sstatic.net/u7vlY.png

This issue is causing a proliferation of files, resulting in longer build times for our continuous integration process. Do you have any suggestions to address this problem?

angulartypescriptwebpackbuild

Answer №1

To exclude specific files during your build process, simply add the exclude property to your tsconfig.json file and specify the path of the file that you want to exclude.

 "exclude": [
    "path_to_your_file"
  ]

Important: Remember to make these changes in the tsconfig.json file located at the root level of your project.

Answer №2

To resolve the issue, we included /* webpackMode: "eager" */ in the code snippet below:

/* webpackMode: "eager" */ '!file-loader?outputPath=assets

Refer to code snippet 1 for more details.

Appreciate your assistance.

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

Having trouble storing the message ID within the user Object using Mongoose

My goal is to add a message to the messages property (an array) of a user object using Mongoose. However, I encounter an error when trying to save the user (user.save()). To troubleshoot, I added three console.log statements in the code below. Can anyone h ...

javascriptnode.jsangularmongoose

Typescript Angular2 filtering tutorial

In Angular 2 using TypeScript, the goal is to search for matching values from an array within an object array. The intention is to filter out any objects where the 'extraService' property contains any of the values from the 'array_values&apo ...

javascripthtmlangulartypescript

React useContext with TypeScript error: "property is not recognized on '{}'"

I have organized a context to distribute Firebase authentication objects in the following way: export function AuthProvider(props: {children: React.ReactNode}) { const [user, setUser] = useState<IUser>({uid: ""}); useEffect(() => ...

reactjstypescriptuse-context

Running the nestjs build command is impossible without the existence of the node_modules folder

Currently, I am in the process of creating a Nestjs micro-service and everything is going smoothly. To run the build found within the dist folder, I use the command below: node dist/main.js However, I encountered a problem where this command does not exec ...

node.jstypescriptnestjs

ng serve: Module 'tapable' not found

After moving my Angular 5 project to a new computer, I encountered an issue when attempting to ng serve: Cannot find module 'tapable' Error: Cannot find module 'tapable' at Function.Module._resolveFilename (module.js:469:15) at ...

node.jsangular

What are the steps for transferring images to a Huawei OBS Bucket?

I have all the necessary information such as my secret key, access key, bucket name, bucket URL, and data ready to start uploading to Huawei OBS using Angular. However, I am unsure how to put it all together. Can someone please assist me? Here are some re ...

angularcloudhuawei-cloud

Problems arising from positioning elements with CSS and organizing list items

I've been working on creating a navigation sidebar using Angular and Bootstrap, but I'm having trouble getting my navigation items to display correctly. APP Component HTML <div class="container-fluid"> <div class="row" id="header"&g ...

htmlcssangulartwitter-bootstrap

Connecting Angular modules via npm link is a great way to share common

Creating a project with a shared module that contains generic elements and components, such as a header, is my goal. This shared module will eventually be added as a dependency in package.json and installed through Nexus. However, during the development ph ...

angulartypescriptnpm

Displaying JSON data in a table using Angular 4

Here is a JSON data example: { "0": { "open": 93.3, "high": 96, "low": 93.3, "close": 95.04, "volume": 358172, "score": "100", "symbol": "ZBRA", "company_name": "Zebra Technologies Corp.", "company_sector": "Industrial Goods" }, "1": { "open": 19.1396, "h ...

jsonangularserviceangular-materialangular-cdk

Prevent the Typescript compiler from generating .d.ts files

I am having an issue with Typescript creating duplicate identifier errors because of the .d.ts files it generates during compilation. I have made changes to the tsconfig file in an attempt to prevent this: { "compileOnSave": true, "compilerOptions ...

typescriptvisual-studio-code

Webpack unnecessarily brings in modules from nested dependencies

In my React application, the main dependencies I am using are React, react-dom, Redux, Immutable, and a few other smaller libraries. One issue I've encountered is that when I build the application with webpack, it ends up loading extra modules like lo ...

javascriptjqueryreactjswebpacklodash

Synchronize Angular 5's provision of injection tokens

Is there a way to delay the provision of an InjectionToken until a previous provider's useFactory is finished? For instance, I would like to set MyInjectionToken only after the APP_INITIALIZER token has been allocated. providers: [ HttpClient, MySer ...

angulardependency-injectionangular-services

Encountering a situation where d3.events is returning null within Angular 2 TypeScript code

Seeking to enhance my d3 maps with tooltips, I came across a helpful code snippet at this link However, upon implementing the same code in an Angular 2 TypeScript file, an error emerged: Error: Cannot read property 'transition' of undefined Th ...

angulartypescriptd3.js

Encountering an issue with top-level await in Angular 17 when utilizing pdfjs-dist module

While using the Pdfjs library, I encountered an error message that reads: Top-level await is not available in the configured target environment ("chrome119.0", "edge119.0", "firefox115.0", "ios16.0", "safari16.0" + 7 overrides) /****/ webpack_exports = g ...

javascriptangulartypescriptpdfjs-dist

How should the superclass constructor of `MatDialog` be invoked when working with multiple classes?

When dealing with multiple features in my ts file, I decided to split them into separate classes. constructor( ) { super(MatDialog); } Encountered error: Argument of type 'typeof MatDialog' is not assig ...

angulartypescriptecmascript-6

Issue with forRoot method not triggering within Angular library

I have developed an Angular library with a static forRoot method to transfer static data from the application to the library. The purpose of creating a forRoot method is to effectively manage this process. export class DynamicFormBuilderModule { public s ...

angularazure-devopsangular-library

Turn off the button and add a CSS class to it when sending a message

I have an Angular 7 component with a form that includes the following TypeScript code: export class MessageComponent implements OnInit { message: FormGroup; constructor(private formBuilder: FormBuilder, private messageService: MessageService) { } ...

angulartypescript

Sending information to a personalized mat-grid element using properties

I am currently working on enhancing the functionality of the angular material mat-tree component by building a custom component. The main objective is to create a table with expandable and collapsible rows in a hierarchical structure. I have managed to ach ...

javascriptangularangular-material

Tips for reusing a Jest mock for react-router's useHistory

When testing my code, I set up a mock for the useHistory hook from react-router-dom like this: jest.mock("react-router-dom", () => ({ useHistory: () => ({ length: 13, push: jest.fn(), block: jest.fn(), createHref: jest.fn(), go ...

reactjstypescriptreact-routerjestjs

In React Typescript, there is an issue with react-router v4 where the Route component does not pass its props to the specified component

Struggling with React Router v4 and history usage in Browserrouter. Whenever attempting to access this.props.history.push("/"), the error pops up: TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> ...

reactjstypescriptreact-router-v4browser-history