#Angular 17 works with Webpack or Vite? (Polyfills)

1 messages · Page 1 of 1 (latest)

shy blade
#

I would like to post here with a little hope a question that remained unanswered on stackoverflow:

When I create an Anglar17 application I see when I launch it that in the console it displays “Vite connected”.

But at the same time the @angular-devkit/build-angular package seems to depend on webpack.

I tried to install @angular-builders/custom-webpack but I read somewhere that it is not supported by Angular 17 (sorry I can't post the link I don't remember, I've looked through hundreds of web pages and just spent over 11 hours trying to add polyfills with no luck).

On the other hand I also read that Angular does not allow the configuration of Vite. Is it correct ?

If I summarize with Angular 17 it would be impossible to use polyfills because it does not allow the personalized configuration of Webpack or that of Vite. Am I wrong ?

Thanks for your help.

cyan orchid
#

build-angular pulls both Webpack and Esbuild

#

Vite is only used as a devserver

#

You can use any polyfill you want by adding them in to the polyfill prop in angular.json

shy blade
#

Thanks. Do you have an example? I spent hours following many examples without ever succeeding. I'm trying to get the @metaplex-foundation/js and @solana/web3.js libraries to work without success. These libraries have dependencies that use polyfills like node-fetch which are directly imported. Normally in old versions of Angular, webpack simulated this import by redirecting (via paths on tsconfig as I understand). But with Angular17 custom webpack configuration is no longer possible.

The problem is not so much the global variable which can easily be declared in javascript but above all that the dependencies directly import libraries via the "import/from" instruction.

wanton flame
#

@angular-builders/custom-webpack still exists for Angular 17. @angular-builders also has customizable versions of the new application builder that was added to @angular-devkit and which is built on Vite and ESBuild: https://github.com/just-jeb/angular-builders/tree/master/packages/custom-esbuild.
This lets you configure Vite and ESBuild and that would allow you to add aliases just like custom-webpack does.

cyan orchid
#

I'm wondering if you're using the right packages

shy blade
#

It's mostly @metaplex-foundation/js that seems to use polyfills. For example it uses "node-fetch" which imports Stream directly from 'stream'. I installed @angular-builders/custom-esbuild and created a plugin to redirect imports but it seems to have no effect. I have another Angular 13 project with webpack which uses the same libraries and it works perfectly. Looks like it becomes impossible to use polyfills with Angular>16.