Angular

Angular v10 released!

Jun 29, 2020

2 min read

Angular 10 Released

Since Angular v9 and Ivy were only released 4 month ago, it is very exciting to see Angular v10.0.0 released on June 25th. v10 doesn't have a ton of features, but still it offer several improvements!

What's new in the release

Angular Material New Date Range Picker

Angular material introduces a new date range picker component. For more information, please check the doc here.

Warnings about CommonJS imports

If you use a dependency which is packaged with CommonJS, it can result in a larger bundle size, since it will be harder for webpack to tree shake. Minko wrote a great article about why this is, here.

In Angular v10, if the dependency is CommonJS packaged, the CLI will give you a warning. I, for one, hope more and more libraries will use the ESM bundle instead.

Strict settings

Angular CLI introduces a --strict option when you create a new project.

ng new --strict

It will do the following things:

Enable strict mode in Typescript compile options
Enable strict template check of Angular. For details, check the doc here.
Reduce default bundle budgets by ~75%.
Config linting rules to prevent declarations of type 'any'.
Config your app as side effect free to enable advanced tree shaking. For more detail, check the doc here.

Update the version of the dependencies

Typescript has been updated to 3.9
TSLib has updated to 2.0
TSLint has updated to v6

Update the browser configuration

Also the default supported browsers have been updated to exclude some old browsers, and include the new version. And you can update the browsers support by updating the .browserslistrc file.

Deprecations

Angular Package Format no longer includes ESM5 or FESM5 bundles. It saves a lot of download and installation time. Those bundles are no longer needed, since now, the ES5 support is done at the end of the build by babel.

And also finally IE 9, 10, and Internet Explorer Mobile, are marked as deprecation, and will not be supported at v11.

The @angular/bazel package is also deprecated in v10. Instead, Angular Bazel support will continue in rules_NodeJS Angular. For more details, please check Alex Eagle's blog here.

Performance improvements

There are several performance improvements about ngcc and compiler-cli. So now, build will be faster than v9.

How to update to v10

Just use Angular CLI, and run

ng update @angular/cli @angular/core

For more details, please check the official blog here.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Jia Li

Jia Li is a frontend developer with passion, he is an Angular Collaborator and the code owner of angular/zone.js. He loves Angular and now develops Angular enterprise application.

@JiaLiPassion @JiaLiPassion

QR Code Scanning & Generation

QR Code Scanning & Generation with ZXing and Angular QR codes provide a very valuable way of sharing information with users, and many applications rely on them for various purposes. Common examples of places where QR codes can be useful include but are not limited to theaters, social gatherings and other booking services. Integrating QR codes can seem intimidating, but thankfully they’re not too difficult to handle with Angular and the help of a couple of robust software libraries such as ZXing. What is ZXing? ZXing, also known as “Zebra Crossing” is a software library that allows developers to easily integrate scanning many different types of 1D and 2D barcodes. This library was originally written in Java, however many ports to other languages and platforms exist, including JavaScript. There are a couple of ways to use ZXing. You could either directly use the JavaScript library, which is framework-agnostic, or you could use a framework-specific library. I’m going to demonstrate how to use ZXing to scan QR codes with the Angular version of the library called ngx-scanner specifically, which has a full-fledged scanner component that makes it somewhat easy to integrate. Let’s Scan some QR Codes with Angular! Getting ngx-scanner up and running doesn’t take much setup at all. All you have to do is add an import to ZXingScannerModule inside of the module that you will be scanning QR codes in, and add a component to your template. Below shows a real-world example of how the component would be used. ` You’ll notice a lot of observables being referenced here. I’ll go over them one by one. Let’s start with the devices subject: ` This subject has data sent to it whenever cameras have been identified by the scanning component. We want to keep track of these so that we’re able to select a camera to use. In our case we’ll just select the first camera for simplicity's sake, as you can see happens with the selectedDevice$ observable that we have bound to the [device] attribute on the scanner: ` We utilize shareReplay here so we don’t need to re-scan the devices whenever additional subscribers check what devices are available. enable$ is a simple observable that emits true whenever devices have been detected, and startCamera$ is an observable that toggles between true and false whenever data is pushed to the toggleCamera$ subject. ` The scan function from RxJs is utilized so we have the previous state and can use that to determine in which direction the stored boolean should toggle to. Finally we push successfully scanned codes to scanSuccess$ which we can then subscribe to in the template. All together the final component code should look something like this: ` If we use this component then you should get something that looks like this: Scanning QR codes is awesome, but we can also generate our own QR codes as well! Generating our own QR Codes Unfortunately the ZXing scanner component we’re using is limited to just scanning QR codes, however there is another component library called ngx-kjua that can do this. Like ZXing this component is also based off of another pre-existing library that is framework-agnostic, in this case, kjua. Fortunately kjua is very easy to use. You simply supply it a code and it will render a QR code. ` How the QR code is rendered can change. There is an optional [render] attribute that you can specify that takes a few values. You can input ‘image’, ‘canvas’ or ‘svg’. The default render mode is ‘svg’. It should be noted that ‘svg’ and ‘canvas’ render modes made copying the image more difficult, so use ‘image’ if you want to make that possible. The component code associated with this template is very small. The component using ngx-kjua has a code observable that is updated with a new random code whenever a “Generate” button is pressed. ` I’ve opted to go with the randomstring package in this case. This component could be modified to instead allow for custom codes using a textbox if you want to encode URLs or other useful values that typically go inside of QR codes. The result looks like this: Summary Thanks to projects like ZXing and kjua it is easy to integrate handling of QR codes in Angular applications, be it for scanning them or creating them. I hope this guide has helped you. You can find the full example showcasing generation and scanning of QR codes in our blog-demos repository on GitHub....

Dec 13, 2023

4 mins

Angular

Overview of the New Signal APIs in Angular

Overview of the New Signal APIs in Angular Google's Minko Gechev and Jeremy Elbourn announced many exciting things at NG Conf 2024. Among them is the addition of several new signal-based APIs. They are already in developer preview, so we can play around with them. Let's dig into it, starting with signal-based inputs and the new matching outputs API. Signal Based Inputs Discussions about signal-based inputs have been taking place in the Angular community for some time now, and they are finally here. Until now, you used the @Input() decorator to define inputs. This is what you'd have to write in your component to declare an optional and a required input: ` With the new signal-based inputs, you can write much less boilerplate code. Here is how you can define the same inputs using the new syntax: ` It's not only less boilerplate, but because the values are signals, you can also use them directly in computed signals and effects. That, effectively, means you get to avoid computing combined values in ngOnChanges or using setters for your inputs to be able to compute derived values. In addition, input signals are read-only. The New Output I intentionally avoid calling them signal-based outputs because they are not. They still work the same way as the old outputs. The Angular team has just introduced a new output API that is more consistent with the latest inputs API and allows you to write less boilerplate, similar to the new input API. Here is how you would define an output until now: ` Here is how you can define the same output using the new syntax: ` The thing I like about the new output API is that sometimes it happens to me that I forget to instantiate the EventEmitter because I do this instead: ` You won't forget to instantiate the output with the new syntax because the output function does it for you. Signal Queries I am sure most readers know the @ViewChild, @ViewChildren, @ContentChild, and @ContentChildren decorators very well and have experienced the pain of triggering the infamous ExpressionChangedAfterItHasBeenCheckedError or having the values unavailable when needed. Here is a refresher on how you would use these decorators until now: ` With the new signal queries, similar to the new input API, the values are signals, and you can use them directly in computed signals and effects. You can define the same queries using the new syntax: ` Jeremy Elbourn mentioned that the new signal queries have better type inference and are more consistent with the new input and output APIs. He also showcased a brand new feature not available with the old queries. You can now define a query as required, and the Angular compiler will throw an error if the query has no result, guaranteeing that the value won't be undefined. Here is how you can define a required query: ` Model Inputs Jeremy and Minko announced the last new feature is the model inputs. The name is vague, but the feature is cool—it simplifies the definition of two-way bindings. Until now, to achieve two-way binding, you would have to define an input and an output following a given naming convention. @Input and @Output had to be defined with the same name (followed by "Change" in the case of the output). Then, you could use the template's [()] syntax. ` ` That way, you could keep the value in sync between the parent and the child component. With the new model inputs, you can define a two-way binding with a single line of code. Here is how you can define the same two-way binding using the new syntax: ` The html template stays the same: ` The model function returns a writable signal that can be updated directly. The value will be propagated back to any two-way bindings. Conclusion The new signal-based APIs are a great addition to Angular. They allow you to write less boilerplate code and make your components more reactive. The new APIs are already in developer preview, so you can start playing around with them today. I look forward to seeing how the community will adopt these new features and what other exciting things the Angular team has in store for us, such as zoneless apps by default....

Apr 3, 2024

3 mins

AngularJavaScript

What's new in Angular v12

Angular 12 Released Angular v12 has been released! Here are some main updates. Nullish coalescing operator support ` Core APP_INITIALIZER now supports Observable. It is also a long-waited feature request: in Angular v12, we can now use Observable as APP_INITIALIZER. ` Http HttpClient Before Angular 12, if you wanted to pass boolean or number as HttpParams, you had to: `` HttpClient.get('api/endpoint', { param1: '10', param2: 'true' }) `` With Angular 12, the HttpParams has been updated to accept the boolean and the number values: `` HttpClient.get('api/endpoint', { param1: 10, param2: true }) `` Http Interceptor Context This is a very long waited feature. In Angular 12, you can now pass data between interceptors. Here is a great article by Netanel Basal. More readable Http status code An enum HttpStatusCode is provided, so the user can use this enum to write more readable code for status code check. `` httpClient.post('api/endpoint', postBody, {observe: 'response'}).subscribe(res => { if (res.status === HttpStatusCode.Ok) { ... } }); `` Form Form: Support min/max validator HTML5 standards support built in validator such as min/max for input element. `` `` Before Angular 12, the min/max attributes are ignored by FormsModule, so the Angular FormControl valid property will still be true even the input data exceed the min or max range. But the underlying DOM HTMLInputElement's validity.valid will still be false. From Angular 12, the min/max validator is implemented so the valid result will be consistent with native DOM status. Animation Sometimes we want to disable animations. Before Angular 12, we needed to provide the NoopAnimationModule. In Angular 12, there is a new way to do that by using BrowserAnimationsModule.withConfig({disableAnimations: true}) so the user can disable animations based on the runtime information. Router Router: Support location.historyGo() functionality. Support location.historyGo(relativePosition: number) to navigate to the specific history page so it will be compatible with the DOM history.go() API. Router: Provides RouterOutletContract interface Provides RouterOutletContract interface allows the 3rd party library to implement its own RouterOutlet more easily (such as add own logic for navigation, animation). For details, please refer to this PR https://github.com/angular/angular/pull/40827. Tooling Angular Linker Ivy has been released from Angular 9 and has become the default in the Angular App from Angular 10. It is fast, easy to debug, and has a lot of possibilities in the future. However, for Angular library development, the user still has to compile the lib with the old ViewEngine to publish to npm. The Angular library deploy process is: 1. The developer compiles the lib with ViewEngine. 2. When the Angular app is using the lib, when yarn install, Angular compiler will travel the node_modules directory and use ngcc to convert the ViewEngine library to Ivy. This process is slow and needs to run whenever node_modules changes. The reason we need this process is if we remove ngcc and publish the Ivy instructions to npm, the instruction code will become the public API. It is very difficult to change it in the future. ViewEngine is not instruction but metadata, so it can be used across multiple versions even for Ivy. To resolve this issue, Angular provides an RFC last year, https://github.com/angular/angular/issues/38366, with an idea which is Angular Linker. It is an advanced version ngcc. It compiles the Angular library code with partial mode. - The output is not Ivy instructions, so it allows future changes. - The output is still metadata, but not like ViewEngine, the metadata is self-contained, so the output for one component contains all the information needed to compile this component without any other global knowledge(such as NgModule). It is fast and be able to do incremental/cache/parallel build. - The new intermediate output can be directly consumed by Angular Compiler, so the node_modules folder doesn't need to be touched. To use this feature, update the option in the tsconfig.lib.prod.json like this. `` "enableIvy": "true", "compilationMode": "partial" `` Typescript 4.2 support - Supports Typescript 4.2. E2E protractor RFC Angular is using protractor for e2e test. The protractor has a long history from 2013. It helped users write e2e test, and to support better async test, protractor did a lot of work via ControlFlow to make async/await work. Since the native async/await is introduced into Javascript standard, protractor ControlFlow becomes incompatible with the native async/await, so protractor drops the ControlFlow and uses the solution of selenium-webdriver completely. Also protractor has a lot of features just for AngularJS such as locator/mock. After removing these codes, protractor becomes a wrapper of selenium wrapper without any valuable functionalities. And now the Angular developers are using several alternative solutions to do the e2e test such as: - Cypress - PlayWright - Puppeteer The Angular team posts an RFC to deprecate the protractor and make Angular easy to integrate with the 3rd party e2d platform. Here is the RFC https://github.com/angular/protractor/issues/5502 Based on the RFC, Angular plans to drop the protractor support until Angular v15 and will guide the Angular developers to select an alternative platform when the user tries to run ng e2e. CLI: Webpack 5 support Webpack 5 support many new features such as: - Module federation is a new way to develop micro-frontend - Disk caching for faster build - Better tree shaking CLI: Lint Angular v11 deprecated to use TSLint as the default linter, and Angular v12 remove TSLint and codelyzer from cli, so please reference the following article to migrate to eslint. (https://github.com/angular-eslint/angular-eslint#migrating-from-codelyzer-and-tslint) CLI: Build When we build an Angular app, we use ng build --prod all the time. The options often confuse the user that --prod will make a production build, but it is just an alias of ng build --configuration=production. To make this more clear, CLI remove --prod and add a defaultConfiguration setting with the value production. Now, ng build default will build with production configuration. CLI: Build bundles with ES2017+ Until Angular 12, Angular only supports output bundles in ES2015 format. ES2017+ is not supported because Zone.js is not supporting native async/await patching. From Angular 12, CLI supports to only transpile the native async/await code to Promise but keep the other ES2017+ code untouched, so you can specify the output bundle format to ES2017+ from Angular 12. CLI: inlineCritical by default The inlineCritical settings of styles optimization in the angular.json becomes true by default. Please reference here for more details. CLI: strict mode by default The workspace generated by CLI will use strict mode by default. To generate non-strict mode, use --no-strict option. CLI: Built in tailwindcss support Tailwindcss is a popular CSS library. Before Angular 12, to integrate with Tailwindcss, the user needs to do some postcss configuration themselves. With Angular 12, this is done by the CLI so it is super easy to do the integration. `` npm install -D tailwindcss npx tailwindcss init `` This is the same process to install the normal Tailwindcss. CLI: confirm ng add before install packages from npm. Now ng add will ask the user to confirm the package/version before installing the packages. This gives the user a chance to stop the process when the user has a typo in the project name or want to initialize the project with other options. Angular Language Service for Ivy Angular Ivy has been released since v9, but the Angular Language Service is still using View Engine to compile the template and did a lot of magic work to make everything work in Ivy, which is not efficient. Also, since View Engine is deprecated, some issues and features may not be implemented in the View Engine version of Language Service for Ivy. Now we have the new Angular Language Service written in Ivy and for Ivy. You can opt-in the new Angular Language Service beta with Ivy support now. To use it in VSCode, try the following steps. 1. Install the latest extension in the VSCode Marketplace 2. Set strictTemplates: true in tsconfig.json Angular compiler options 3. Go to Preferences -> Settings -> Extensions -> Angular Language Service -> Check “Experimental Ivy” Please reference this blog for more details. CLI: Support inlineStyleLanguage option A new build option inlineStyleLanguage is added. Now you can write css/sass/scss/less in the inline style of a component! Angular Components MDC Web based new component Angular Component is continuing to create new MDC Web based components and the backward-compatible. Here is the design. For the new Angular Material Component, Angular CDK provides the behavior and the MDC Web Component provides the user experiences defined by the Material Design spec. The Angular Material team doesn't need to maintain another implementation of the Material Design and the UI will be more consistent. New @use SASS module system You may already use the @import syntax in the SASS style file, but it has some flaws and make the module system hard to maintain. For details, please reference the article here. Now Angular Components are using the new @use syntax for the better module system of SASS. To use the new module system, you can use the following schematic to migrate. `` ng g @angular/material:themingApi `` Also, the node-sass package will be replaced by the new sass package. Deprecations - IE11 support is deprecated! - ViewEngine for application build is removed. All applications are using Ivy to build. - entryComponent is removed from Component schematic. - string based lazy loading support is dropped. `` { path: 'Lazy', component: LazyComponent }, { path: 'lazy', loadChildren: './modules/lazy/lazy.module#LazyModule', } `` is not supported, please use dynamic import instead. `` { path: 'Lazy', component: LazyComponent }, { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) } `` For the full deprecation list, please check here. How to update to v12 Use the Angular CLI: `` ng update @angular/cli @angular/core `` You can find more information from update.angular.io/....

May 19, 2021

8 mins

Angular

How to Go from Software Engineer to AI Engineer with Shawn Wang

Shawn Wang discusses AI engineering’s potential impact on the software development labor market and developer experience. With the rise of artificial intelligence technologies, there is an increasing demand for professionals who can bridge the gap between AI and software engineering, and engineers are looking around for guidance on how to best learn AI. Shawn emphasizes the importance of acquiring core knowledge and skills in AI engineering, highlighting the need for a systematic approach to education and development. He envisions a future where AI engineering becomes a recognized profession, with specialized training programs and certifications. He further talks about mental models for approaching AI literacy, and skill building. Shawn also discusses the use of advanced AI technology in software development. He showcases tools like GPT Vision, which can automate tasks and generate code efficiently. While acknowledging the potential of AI in enhancing productivity, Shawn emphasizes the need to leverage AI tools to augment human capabilities rather than replace them. Download this episode here....

Apr 17, 2024

1 min

Artificial IntelligenceEngineering Leadership

Angular v10 released!

Angular 10 Released

What's new in the release

Angular Material New Date Range Picker

Warnings about CommonJS imports

Strict settings

Update the version of the dependencies

Update the browser configuration

Deprecations

Performance improvements

How to update to v10

Jia Li

You might also like

QR Code Scanning & Generation

Overview of the New Signal APIs in Angular

What's new in Angular v12

How to Go from Software Engineer to AI Engineer with Shawn Wang

You might also like

QR Code Scanning & Generation

Overview of the New Signal APIs in Angular

What's new in Angular v12

How to Go from Software Engineer to AI Engineer with Shawn Wang