How can you incorporate a module for typings without including it in the final webpack bundle?

As I venture into the realm of Webpack, I am faced with the challenge of transitioning from TypeScript 1.x to TypeScript 2. In my previous projects, I typically worked with TypeScript in one module using separate files, TSD for typings, and compiling through a Gulp task.

Currently, I am working on a new project where I am configuring a Webpack + TypeScript 2 setup with imports and @types for typings. While making progress, I am encountering an issue with excluding certain libraries from my webpack bundle.

The directory structure of my project is as follows:

components/
   customComponentA/
   customComponentB/
node_modules/
   @types/
       angular/
main.ts
tsconfig.json
webpack.config.js

Whenever I include 

import * as angular from "angular";
in my custom components, I encounter 'Can't resolve 'angular'' errors (which is expected). Once I add 'angular' to my node_modules, Webpack is content, but then Angular ends up being included in my final bundle.

I am striving for a solution where my typings are resolved without including Angular in the final bundle. Is there a way to achieve this?

angulartypescriptwebpack

Answer №1

For those embarking on their webpack journey, I found this section of the documentation particularly enlightening: https://webpack.js.org/configuration/externals/

Hoping this helps other newcomers navigating through webpack settings too :)

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

Webpack in Vuejs does not have access to the keys defined in dev.env.js file

The framework utilized here is vuejs-webpack, with build and config files located here. No modifications have been made to these files. According to the information on Environment Variables, the keys specified in dev.env.js should be accessible during the ...

javascriptnode.jswebpackvue.jsenvironment-variables

Add owl carousel to your npm project in any way you see fit

After struggling for a while, I finally wanted to implement owl-carousel, but couldn't figure out how to connect it using npm and webpack. The official NPM website states: Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration: ...

javascriptnpmwebpackowl-carousel

Having trouble getting Typescript code to function properly when using commonjs style require statements

I am completely new to Typescript, Node.js, and Express. Following the instructions outlined in this tutorial (https://www.digitalocean.com/community/tutorials/setting-up-a-node-project-with-typescript), I set up my project exactly as described there. The ...

javascriptnode.jstypescriptexpress

When working with Angular Universal, using d3.select may result in a "reference error: document is not defined" in the server.js file

I'm currently working on an Angular project that uses server-side rendering to generate D3 charts. Each chart is encapsulated within its own component, such as a line-chart component which consists of TypeScript, spec.ts, HTML, and CSS files for rende ...

javascriptangulartypescriptd3.jssvg

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...

javascripthtmltypescriptfirebasefirebase-storage

Organizing Angular models and interfaces

The Angular styleguide provides best practices for using classes and interfaces in applications, but it does not offer guidance on organizing interfaces and model classes. One common question that arises is: what are the best practices for organizing file ...

angulartypescript

Exploring the Power of TailwindCss in Storybook 6 for Angular Development

I am in the process of creating a component library using Angular version 11.2.8, and I'm attempting to integrate TailwindCss and Storybook 6. Despite trying various configurations, none seem to be working correctly for me. Whenever I run Storybook, ...

angulartailwind-cssstorybook

Oops! Looks like there's an issue with the route configuration for ''. Make sure to include one of the following: component, redirectTo, children, or loadChildren in order to validate the

I've been facing an issue while setting up a project with angular routing. The project is only displaying the contents of index.html and not app.component.html. Upon inspection, I noticed that the body tag just has <app-root></app-root> in ...

javascriptangularangularjs

The integration of AngularFireFunctions with Ionic 5 Angular breaks down when attempting to create a production build using the --prod flag

Attempting to invoke a Firebase function using Angular Fire within an Ionic project. const callable = this.afFunctions.httpsCallable('getWeather'); const result = await callable(request).toPromise(); The functionality operates as expected in ...

angularionic-frameworkionic5

TS2339 Error: The object 'Navigator' does not contain the property 'clipboard'

In the project I'm working on, there is an error that comes up when trying to copy custom data to the clipboard. It's something I can easily put together. Error TS2339: Property 'clipboard' does not exist on type 'Navigator' ...

reactjstypescript

Angular 2 components not properly handling two-way binding errors

Exploring how to achieve two-way binding in Angular 2, I am currently working with the following parent component setup: app.component.html: <child [(text)]="childText" (textChanged)="textChanged($event)"></child> <span>{{childText}}< ...

angulartypescript

The query fails to retrieve results for the specified date and the beginning of the month

I have encountered an issue with my query that is supposed to fetch values between the start and end of the month. Interestingly, when a record is entered on the first day of the month, it doesn't get returned in the query result. Only records entered ...

angulartypescriptgoogle-cloud-firestoreangularfire2

Issue: The Karma plugin in Angular CLI >6.0 is now exported from "@angular-devkit/build-angular" instead

Issue: I'm encountering an error in Angular CLI version 6.0 or higher where the Karma plugin is now exported by "@angular-devkit/build-angular". // Below is the Karma configuration file, you can find more information at // module.exports = function ...

angularunit-testingjasminekarma-runner

Is there a way to programmatically trigger a CodeAction from a VSCode extension?

Can I trigger another extension's code action programmatically from my VSCode extension? Specifically, I want to execute the resolveCodeAction of the code action provider before running it, similar to how VSCode handles Quick Fixes. Most resources su ...

typescriptvisual-studio-codevscode-extensions

The error message "The file 'environment.ts' is not located within the specified 'rootDir' directory" was encountered during the Angular Library build process

When attempting to access the environment variable in an Angular 9 library, I encountered an error during the library build process. Here is how it was implemented: import { EnvironmentViewModel } from 'projects/falcon-core/src/lib/view-models/envir ...

angulartypescriptangular-moduleangular-library

Ensure there is a gap between each object when they are arranged in a

Is there a way to customize the layout of elements in the ratings view so that there is automatic spacing between them? I considered using text (white spaces) for this purpose, but it seems like an inefficient solution. Are there any other alternatives to ...

javascriptcssreactjstypescriptreact-native

Save the application's state of the user in a mean stack program

In my Angular 9 application, I have forms with multiple sections. The first section includes name and personal details, the second part covers primary school information, and the third part focuses on past jobs held by the user. Each part is displayed in a ...

mysqlnode.jsangularngrxngrx-store

"Exploring the world of Typescript code through the eyes of Chrome with the help of the

Currently, I am immersing myself in learning Angular2 by following along with this project: https://github.com/start-angular/angular2-node-socket-io-chat-app I am utilizing VS Code and the Debugger for Chrome. However, when attempting to debug the code an ...

angulargoogle-chrome-devtoolsvisual-studio-code

varying shades for primeng's p-rating

How can I customize the color of stars in multiple p-rating elements within the same component? Is there a way to style stars using primeng or angular? .html <p-rating [ngModel]="inputData?.rating" readonly="true" stars="5"[cancel]="false" style="flo ...

angularprimeng

Restrict the number of rows in a CSS grid

Hello there, I am in the process of creating an image gallery using CSS grid. Specifically, my goal is to initially show just one row of images and then allow users to click a "Show more" button to reveal additional images. You can see my progress here: ...

javascriptangularcsscss-grid