Comments (16)
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.
from esbuild.
To add some more details,
- This RFC outlines some future work that may make Angular more suitable to work with esbuild (and faster in general).
- This PR shows that the Angular CLI is currently using esbuild for style optimizations.
My conclusion is that the lack of Angular support for esbuild is the responsibility of the Angular team, not esbuild. Angular has a pipeline that depends heavily on TypeScript tooling, and until they break that apart, there is nothing esbuild can reasonably do to better support Angular.
from esbuild.
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.
from 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.
from esbuild.
To build on @thekip's comment, I got pretty far just by doing:
"ngcc": "ngcc",
"esbuild": "ngc build -p tsconfig.app.json && esbuild ./out-tsc/app/main --bundle --minify --splitting --outdir=out --format=esm",
then running npm run ngcc
once and npm run esbuild
to build the project. I then had to manually copy the index.html
file to the folder where the main.js file was output, and add <script src="main.js" defer></script>
to the index.html
This feels pretty close, but I'm getting the error:
Error: Angular JIT compilation failed: '@angular/compiler' not loaded! - JIT compilation is discouraged for production use...
I'm probably not going to look into this much more because it still requires running ngc
so the speed improvements will probably be very minor. I'm just putting this here in case it helps others.
from esbuild.
Update on this for anyone wondering, it's on the roadmap!
https://angular.io/guide/roadmap#investigate-modern-bundles
from esbuild.
Looks like angular cli is starting to use esbuild internally. See changes related to @angular-devkit/build-angular
https://github.com/angular/angular-cli/blob/master/CHANGELOG.md
from esbuild.
Hi, here is a working experiment for a simple app
package.json
"@angular-builders/custom-webpack": "~11.1.1"
"esbuild-loader": "~2.11.0"
angular.json
projects.architect.serve.builder "@angular-builders/custom-webpack:dev-server"
projects.architect.build.builder "@angular-builders/custom-webpack:browser"
with options
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.conf.js",
"replaceDuplicatePlugins": true
},
...
}
custom-webpack.conf.js
const ESBuildPlugin = require("esbuild-loader/dist/plugin").default;
module.exports = function (config, opts, {target, configuration}) {
config.module = {
...config.module,
rules: [
...config.module.rules.filter(rule => !rule || !rule.use || !rule.use.loader || !rule.use.loader.includes("/babel-loader/")),
{
test: /\.ts$/,
loader: "esbuild-loader",
options: {
loader: "ts",
target: "es2018"
}
},
{
test: /\.js$/,
loader: "esbuild-loader",
options: {
target: "es2018"
}
}
]
}
var opts = undefined;
if (target === "serve") {
opts = {
options: {
minify: false
}
}
config.mode = "development";
config.devtool = "none";
}
else {
config.mode = "production";
}
config.plugins = [
...config.plugins,
new ESBuildPlugin(opts)
]
return config
}
It seems that
- It takes practically the same time to build this app
- I am not sure, but there will be a problem with dynamic chunks when tree-shaking is enabled.
from esbuild.
I agree, there is lots of Angular in enterprise.
Enterprise has virtually unlimited money, especially when it comes to tooling.
You might get sponsored/promoted by those big companies who need it.
from esbuild.
In Angular v15 we have experimental esbuild support in ng build
and ng build --watch
.
https://angular.io/guide/roadmap#investigate-modern-bundles
from esbuild.
"I don't think Angular is mainstream enough"
I fail to see how you don't consider Angular to be squarely in the 'mainstream' category of frameworks, and by some perspectives even consider it the most prominent. Esbuild will ultimately follow the path you want it to, but it's a pretty sizeable shortcoming if no accommodations are made for angular. Even exposing an esbuild go API would at least allow other bundlers to extend it without a loss in performance.
More reading:
https://www.codeinwp.com/blog/angular-vs-vue-vs-react/
from esbuild.
@evanw pls reopen this issue
from esbuild.
AnalogJS also has beta support for Vite if anyone would like to consider that as an option as well. Vite, if anyone doesn't know, uses esbuild under the hood
from esbuild.
I've done a bit of digging on my end regarding using esbuild
best I could get was this
"build:esbuild": "ngc build -p tsconfig.app.json --target es5 && esbuild out-tsc/app/main --outdir=esbuild-dist --splitting --bundle --minify --format=esm",
this does create a "esbuild-dist" folder with everything properly split into chunks, the only thing left to do is:
- copying the
assets
folder, the favicon and theindex.html
file into the build folder - modify the
index.html
file to add<script src="main.js" defer></script>
at the end of thebody
when launching a server on this folder however, ivy seems to get in the way, with a missing 'ɵmod' property
error, I've looked at the non-minified build code and it does look like ɵmod
, ɵcmp
and other ivy related additions are missing
Looking into the angular-cli source code it looks like this part might be handled by a webpack plugin, so looks like that's the brick wall with this idea sadly, unless someone would be willing to pick up the task of create a esbuild version of the plugin
from esbuild.
@thekip do you have any examples on this setup that I could look into?
from esbuild.
@evanw to @vzakharov-rxnt’s point, it would be extra attractive to the likes of Google as it would support their framework and be written in their language.
from esbuild.
Related Issues (20)
- Build failing in Dockerfile but works on local Windows machine
- Broken automatic JSX transform HOT 7
- ERROR: Expected "*/" to terminate multi-line comment HOT 2
- Expected ";" but found "const" - typescript transformer HOT 2
- Option to disable injected comment of input path file HOT 2
- Additional directories to watch HOT 3
- esbuild does not fail with undefined functions HOT 5
- Segmentation fault when using with vite and sveltekit project HOT 1
- Glob imports must match exactly
- Pass argument to IIFE HOT 1
- Esbuild causing bundle breakage when applied twice to the same bundle
- Splitting results in `Dynamic require of "<filename>" is not supported` when targeting `chrome62`
- [Feature Request] Add built-in HTML loader HOT 1
- Imports from stdio entrypoint don't have a namespace set
- DCE is not removed when value is from a const in another module.
- Get metafile info from a `watch()` rebuild HOT 2
- removes the backslash "\" when minify option is false HOT 4
- [Sourcemap] Private properties don't get sourcemapped correctly HOT 3
- ENV Secrets accessible from js code in a React + Rails APP. HOT 7
- [Feature] Ability to save charts from Bundle Size Analyzer as svg files
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esbuild.