es6-promise VS Angular

const path = require('path');const webpack = require('webpack');const ExtractTextPlugin = require('extract-text-webpack-plugin');const merge = require('webpack-merge');const treeShakableModules = [ '@angular/animations', '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', 'zone.js',];const nonTreeShakableModules = [ 'bootstrap', 'core-js/client/shim', 'web-animations-js', 'event-source-polyfill', 'jquery', '@swimlane/ngx-datatable/release/assets/icons.css', 'ng2-toasty', 'ng2-toasty/bundles/style-bootstrap.css', 'ng2-charts', 'ngx-bootstrap/modal', 'ngx-bootstrap/tooltip', 'ngx-bootstrap/popover', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/carousel', 'bootstrap-vertical-tabs/bootstrap.vertical-tabs.css', 'bootstrap-toggle/css/bootstrap-toggle.css', 'bootstrap-toggle/js/bootstrap-toggle.js', 'bootstrap-select/dist/css/bootstrap-select.css', 'bootstrap-select/dist/js/bootstrap-select.js', 'bootstrap-datepicker/dist/css/bootstrap-datepicker3.css', 'font-awesome/css/font-awesome.css'];const allModules = treeShakableModules.concat(nonTreeShakableModules);module.exports = (env) => { const extractCSS = new ExtractTextPlugin('vendor.css'); const isDevBuild = !(env && env.prod); const sharedConfig = { stats: { modules: false }, resolve: { extensions: ['.js'] }, module: { rules: [ { test: /\.(gif|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } ] }, output: { publicPath: 'dist/', filename: '[name].js', library: '[name]\_[hash]' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580 new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898 new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 ] }; const clientBundleConfig = merge(sharedConfig, { entry: { // To keep development builds fast, include all vendor dependencies in the vendor bundle. // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle. vendor: isDevBuild ? allModules : nonTreeShakableModules }, output: { path: path.join(__dirname, 'wwwroot', 'dist') }, module: { rules: [ { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) } ] }, plugins: [ extractCSS, new webpack.DllPlugin({ path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name]\_[hash]' }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin() ]) }); return [clientBundleConfig];}

Some functions are more complicated and few lines of code are just not enough to make it work. Promise is not supported by IE11. To use it, there's need to load a package:

/** * https://github.com/angular/angular/blob/75a186e321cb417685b2f13e9961906fc0aed36c/packages/core/src/render3/reactivity/untracked.ts#L15 * * packages/core/src/render3/reactivity/untracked.ts * **/ export function untracked(nonReactiveReadsFn: () => T): T { const prevConsumer = setActiveConsumer(null); try { return nonReactiveReadsFn(); } finally { setActiveConsumer(prevConsumer); } }

source: https://github.com/angular/angular/issues/46542

Besides the dangers, mentioned by Angular docs (infinite loops, change detection errors), there is another thing, that might be quite nasty: effects are executed in a reactive context, and any code you call in effect, will be executed in a reactive context. If that code reads some signals, they will be added as dependencies to your effect. Here Alex Rickabaugh explains the details.

In June 2023, the Angular team raised a new RFC to implement control flow syntaxes within Angular. They gave the following rationale for introducing control flow syntax:

For scheduling, I use awesome code I found in the Angular source code.

Just to give you more context, I led the migration of several AngularJS applications to the newer Angular Framework. My client finally decided to make that move following the AngularJS deprecation announcement (stay up to date please 🙏)️.

Link — angular/CONTRIBUTING.md

Angular v17 was released some months ago with a ton of new features, a brand new logo and the new blog angular.dev.