Esbuild: [Questions] support for angular applications

Created on 10 Mar 2020  路  4Comments  路  Source: evanw/esbuild

esbuild looks promising, I want ask if there is there a support for angular applications, or do you plan to support angular application?

Most helpful comment

The main idea is to run angular compiler on your angular project to compile all html/ts files into regular js:

ngc --build ./tsconfig.app.json --outDir ./ngc

ngc stands for angular compiler and it is a drop-off replacement for tsc command (Typescript Compiler)

And then run any of building tool which can work with ES files, such as esbuild.

You will probably have a problems with scss files if you use them because ngcc compiler understand only pure css.
The output still will not be the same to what AngularCLI is produce, because they have few additional steps in pipeline (BuildOptimizer, conditional loading bundles es5/es2015, service workers, index.html production and etc)

PS.
Angular compiler is implented as set of custom typescript transformers using public typescript api. So you can try too hook up this transformers into other tools which use typescript natively. But there are no documentation about angular compiler internals and only on way to find some detail of implementation is digging into angular CLI code.

All 4 comments

I'm not familiar with Angular but it looks like Angular has a custom compiler that is pretty different than other JavaScript build tools. So I don't think Angular applications will work with esbuild.

I'm only intending for esbuild to target a certain sweet spot of use cases (bundling JavaScript, TypeScript, and maybe CSS). I don't think Angular is mainstream enough to warrant building into the core of esbuild, and since esbuild doesn't have plugins it won't be possible to add Angular support to esbuild.

Actually with some manual working it's possible to build Angular with tools such as es-build. Angular has a standlone compiler which can be used to compile angular components to regular typescript files and than you can hook it up with esbuild.

Despite the fact this is possible it's going to be a really hard way, because angular teams doesn't care too much about cases where angular apps built with tooling outside of angular's ecosystem.

@thekip do you have any examples on this setup that I could look into?

The main idea is to run angular compiler on your angular project to compile all html/ts files into regular js:

ngc --build ./tsconfig.app.json --outDir ./ngc

ngc stands for angular compiler and it is a drop-off replacement for tsc command (Typescript Compiler)

And then run any of building tool which can work with ES files, such as esbuild.

You will probably have a problems with scss files if you use them because ngcc compiler understand only pure css.
The output still will not be the same to what AngularCLI is produce, because they have few additional steps in pipeline (BuildOptimizer, conditional loading bundles es5/es2015, service workers, index.html production and etc)

PS.
Angular compiler is implented as set of custom typescript transformers using public typescript api. So you can try too hook up this transformers into other tools which use typescript natively. But there are no documentation about angular compiler internals and only on way to find some detail of implementation is digging into angular CLI code.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ojanvafai picture ojanvafai  路  3Comments

sarsamurmu picture sarsamurmu  路  3Comments

OneOfOne picture OneOfOne  路  3Comments

Gotterbild picture Gotterbild  路  3Comments

evanplaice picture evanplaice  路  3Comments